I recently started working on a wordpress site.
I have the woo commerce plugin working and he mystile theme. SO far so good!
However the gallery sucks!
I am trying to fiddle aroundwith it, but do not know my way around wordpress too well.
Question:
How do I add a line into the header?
Say for the single product, I would want to include a Javascript file. Do you know how I would do that?
What file do I augment?
Please let me know if you need more information.
Bo
To add a javascript file to the wordpress theme, you have 2 alternative:
Suppose we have a jquery.js inside the directory root of the theme.
Method A)
Open header.php file in wordpress theme. Add this inside <head> tag:
<script src="<?php echo get_template_directory_uri(); ?>/jquery.js"></script>
Method B)
Open functions.php file in wordpress theme:
Search something like add_action( 'wp_enqueue_scripts', 'blahblah' );,
If exist, find a function with blahblah name and add this code inside it:
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
Otherwise: You should add a function and add_action method:
function scripts_styles() {
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
}
add_action( 'wp_enqueue_scripts', 'scripts_styles' );
Note: Replace jquery string with your file name so.
Related
I've added a custom JQuery script to a new JS file "themes\twentytwentyone\js\script_new.js".
And I load this new JS file in theme functions.php file.
function add_custom_script() {
wp_enqueue_script(
'my_script',
get_stylesheet_directory_uri() .'/js/script_new.js',
array( 'jquery' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );
This works without any issue. But is there a way to achieve this without updating the theme functions.php file?
I'm not sure if updating the functions.php file is good practice.
Using child's theme functions.php is the best practice .
But if you don't want to use functions.php then you can call js file through footer.php or header.php too.
Please note i recommend and it is the safest to make child theme for any customisation and use Child theme's functions.php.
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}
I need to put a styled map on a contact page in WP.
I'd rather not use a plugin as it would be overkill, embedding on the other way won't allow me to customize layers, use placeholders, etc
I coded an example map on a static html page. https://dl.dropboxusercontent.com/u/13823768/map/test.html
How do I get from here to wordpress?
EDIT: I'm working with a child theme so I put this in functions.php (in my child-theme dir)
function enqueue_custom_scripts() {
wp_enqueue_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=it');
wp_enqueue_script('google-map-style', get_stylesheet_directory_uri() . '/js/map.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
?>
Looks ok so far but it needs <body onload="initialize()"> too.
Do you know how I can add the onload to the body tag?
You can accomplish this by creating a custom theme page template: http://codex.wordpress.org/Page_Templates or simply add the #map_canvas element in the "text" view of the WSYWYG content area of the page editor.
The next step is to add all of your map scripts, I would do this by enqueuing the scripts in your theme's functions.php by creating a callback function that is called on the wp_enqueue_scripts action: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.
the function you will add to functions.php would look something like this(replacing the filepaths with your scripts):
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I know you mentioned not wanting a plugin for overkill, but a plugin would allow portability of your code and would allow you to switch themes without losing your map code. Adding a plugin and shortcode to render the #map_canvas element would not be much more time than adding the code to functions.php. If your interested in writing a custom plugin, http://codex.wordpress.org/Writing_a_Plugin
I have been looking to figure this out for weeks. How to include a jquery in wordpress... so I have used the wp_enqeue_scripts();
but then I still don't understand it.
so for example I have this jquery slide down code..
$jQuery(document).ready(function() {
$jQuery('#slide').slideDown();
});
now this code works perfectly on my static html code which has the slide ID in it by the way..
so how would i include that slide to my wordpress plugin?
here is my plugin code
<?php
/*
Plugin Name: Jquery Test.
Plugin URI: http://wsplugins.com
Description: A plugin that increases your website traffic by floating facebook, twitter and google + share button. The buttons bounce and move over your page ensuring maximum attention by your visitors.
Author: Ronny Kibet.
Author URI: http://#.com
Version: 1.0
*/
thanks.
You have a couple of options.
Option #1
Paste the code into footer.php (or header.php).
<script>
$(function() {
$jQuery('#slide').slideDown();
});
</script>
This would result in every DOM element with an ID of "slide" to slideDown upon page load.
Option #2
Using WordPress' API, you could create a method in your theme to include a JavaScript file with the code inside . This is more complicated and requires an understanding of WordPress hooks.
I am having this same problem, but I got it to "somewhat" work. First you need to use wp_register_scripts, with the script name, and then do wp_enque_script("scriptname");... I don't understand why this is the way it is, but we just have to deal :-/
you may need to use noConflict, an example would be:
<script type="text/javascript">
var slide=jQuery.noConflict();
slide(function() {
slide('#slide').slideDown();
});
</script>
to enqueue a script in wordpress in a plugin use this:
/**
* Proper way to enqueue scripts
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('dependencyScriptThatNeedsToExecuteBeforeMyScriptName','forExample','jquery), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I was also searching for the same solution but I found it myself.
create a new file custom-functions.js in the js director and past the code that you want to enqueue in that file. Now enqueue it in the functions.php
wp_enqueue_script( 'custom-functions', get_template_directory_uri() . '/js/custom-functions.js', array(), '1.0', true );
read the full tutorial at Bootstrap WordPress Snippets - wp_enqueue_script
function theme_name_scripts() {
wp_enqueue_script( 'script-name', plugins_url( '/js/responsiveslides.min.js' , __FILE__ ), array(),false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );