In WordPress, I have a template file called vertical-page.php.
When a page has this template applied, I want to load in a specific stylesheet and script.
I have tried to use is_page_template(), but it doesn't work. When I view the source of the page, the script and styles are not being loaded?
<?php
add_action('wp_enqueue_scripts', 'theme_scripts');
function theme_scripts() {
wp_enqueue_style('bootstrap-grid-style', get_template_directory_uri() . '/assets/css/bootstrap-grid.css', array(), STYLE_VERSION);
if ( is_page_template( 'vertical-page' ) ) {
wp_enqueue_style('tmp-override', get_template_directory_uri() . '/assets/css/override.css', array(), STYLE_VERSION);
wp_enqueue_script('overrides-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'),STYLE_VERSION, true);
}
?>
Try putting the add_action after the function
If your page template file is something.php and it's location is the main folder of the active theme, you need to pass an argument to the is_page_template() function like this: is_page_template('something.php')
Related
I am writing a some code for wordpress theme development that I plan on reusing for future themes (maybe even uploading to github).
it consist of a few dozen files and some javascript and css files as well.
the only commitment I am willing to make for the future is that all my files will be placed in the same directory, where will this directory be placed inside the theme directory is unknown.
how should I go about enqueuing files (wp_enqueue_style, wp_enqueue_script functions) if I don't know the files absolute path (get_template_directory_uri . '')?
also I hope that instead of having a dozen lines of include\require, I can write one include file that will include the rest of the files by their relative paths.
A simple solution, (not necessarily the most proper way) if you're needing the path within the theme index file could be something like so:
<?php
$TEMPLATE_PATH = get_template_directory_uri();
$TEMPLATE_PATH = parse_url($TEMPLATE_PATH, PHP_URL_PATH);
?>
You'd then be able to use the $TEMPLATE_PATH as a relative path like so:
<link href="<?php echo $TEMPLATE_PATH; ?>/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
this would be output like the following:
<link href="/wp-content/themes/ThemesName/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
Hope someone finds this useful.
I ended up using dirname(__FILE__) to determine loader.php location,
and substracting get_template_directory() out of it to get the relative path of my code inside the theme directory like this:
$MY_PATH = str_replace(realpath(get_template_directory()),"",dirname(__FILE__)));
end result load.php:
$MY_PATH = str_replace(realpath(get_template_directory()),"",dirname(__FILE__)));
require_once('file1.php');
require_once('file2.php');
require_once('file3.php');
function my_scripts() {
$mypath = $GLOBALS['MY_PATH'];
wp_enqueue_style( 'my-style', $template_directory_uri . $mypath . '/style.css');
wp_enqueue_script( 'my-js', $template_directory_uri . $mypath . '/script.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
now I can change my code directory location without editing the code in loader.php.
There are two main WP functions to use to find the relative paths within a theme:
get_template_directory()
get_template_directory_uri()
You could create a theme subdirectory called 'reusable' or something appropriate, which is a top level subdirectory. Furthermore, let's say your set of files are as follows:
mytheme/reusable/loader.php
mytheme/reusable/include-me.php
mytheme/reusable/include-another.php
mytheme/reusable/js/reuse.js
mytheme/reusable/css/reuse.css
loader.php:
<?php
// add as many files as you want to this array
$include_paths = array(
'reusable/include-me.php',
'reusable/include-another.php',
);
// loop through the paths and include them if they exist
$template_directory = trailingslashit(get_template_directory());
foreach( $include_paths as $path ) {
$complete_path = $template_directory . $path;
if( file_exists( $complete_path ) ) {
include($complete_path);
}
}
// function to enqueue js and css
function reusable_enqueue_scripts() {
$template_directory_uri = get_template_directory_uri();
wp_enqueue_style( 'reusable-style', $template_directory_uri . '/css/reuse.css');
wp_enqueue_script( 'reusable-js', $template_directory_uri . '/js/reuse.js');
}
// add function to enqueue action hook
add_action( 'wp_enqueue_scripts', 'reusable_enqueue_scripts' );
Then in your theme's functions.php file:
$reusable = trailingslashit(get_template_directory()).'reusable/loader.php';
include($reusable);
There's also a very useful WP function called get_template_part() that you can look into, might change how you're thinking about a solution.
you can retrieve theme directory URI from below WP function , you can then pass files name with respective folder name.
get_template_directory_uri()
I am having trouble with including modernizr for wordpress. I am using a child theme, btw. Can anyone help me out?
function foundation_assets() {
// Load JavaScripts
wp_enqueue_script('add_jquery', 'http://code.jquery.com/jquery-latest.min.js');
wp_enqueue_script('new_jquerypp', get_stylesheet_directory_uri() . '/js/jquerypp.custom.js');
wp_enqueue_script('bookblock', get_stylesheet_directory_uri() . '/js/jquery.bookblock.js');
//wp_enqueue_script('extra', get_stylesheet_directory_uri() . '/js/extra.js');
wp_enqueue_script('include_modernizr', get_stylesheet_directory_uri().'/js/modernizr.custom.js');
//Load Stylesheet
wp_enqueue_style( 'bookblock-css', get_stylesheet_directory_uri() . '/css/bookblock.css' );
}
add_action( 'wp_enqueue_scripts', 'foundation_assets' );
Here is my code for enqueuing it. It is saved in the functions.php.
Edited: Code has been changed.
1) it's commented out
2) you are missing the closing parathesis.
wp_enqueue_script('include_modernizr', get_stylesheet_directory_uri().'/js/modernizr.custom.js');
Also take a look at the function definition to ensure your scripts will load in the right order https://developer.wordpress.org/reference/functions/wp_enqueue_script/
for example wp_enqueue_script('new_jquerypp', get_stylesheet_directory_uri() . '/js/jquerypp.custom.js', array('add_jquery')); will make sure that new_jquerypp loads after jQuery itself
I have created a wordpress plugin that creates various widgets. To keep page load time down, I only want to enqueue the associated scripts when the widget is being used.
To do this I created a function like this:
function enqueue_lightbox(){
wp_enqueue_style(
SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-fancybox-css',
'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css',
array(),
SKIZZAR_SHORTCODES__VERSION
);
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox' );
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox-media' );
}
And in my widget class I call it like this:
enqueue_lightbox();
The issue I have is that I have 2 widgets sharing the same piece of code, so I'd like to create a statement that says, if it hasn't been enqueued elsewhere already, enqueue it.
How would I write this function?
You can use wp_script_is function to check the file and load it like this
$handle = 'fluidVids.js';
$list = 'enqueued';
if (wp_script_is( $handle, $list )) {
return;
} else {
wp_register_script( 'fluidVids.js', plugin_dir_url(__FILE__).'js/fluidvids.min.js');
wp_enqueue_script( 'fluidVids.js' );
}
I am working on a local WordPress install and I am trying to enqueue some stylesheets like I've done many times before but I've never run into this bug before.
Here is my code in the functions.php file.
function foundation_styles() {
wp_enqueue_style( 'foundation', get_template_directory() . '/css/foundation.css' );
}
add_action( 'wp_enqueue_scripts', 'foundation_styles' );
When viewing page source this is the file path that was enqueued:
<link rel='stylesheet' id='foundation-css' href='http://localhost/FoundationwebsiteC:xampphtdocsFoundationwebsite/wp-content/themes/foundation/css/foundation.css?ver=4.0' >
Instead it should be:
<link rel='stylesheet' id='foundation-css' href='http://localhost/Foundationwebsite/wp-content/themes/foundation/css/foundation.css?ver=4.0' >
Notice the C:xampphtdocsFoundationwebsite/ hidden in the middle of the file path.
The exact same thing happened when I used get_stylesheet_directory() instead of get_template_directory()
The filepath for my local install is:
C:\xampp\htdocs\Foundationwebsite\wp-content\themes\foundation\css
Anyone know what is causing my filepath to be so funky?
You're using functions that will return a path whereas what you need is a URL.
Replace get_template_directory() or get_stylesheet_directory() with get_template_directory_uri() or get_stylesheet_directory_uri().
Example:
function foundation_styles() {
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css' );
}
use this
function foundation_styles() {
wp_enqueue_style( 'foundation', get_bloginfo('template_url') . '/css/foundation.css' );
}
for more information refer this link
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
I am building out my first WordPress site for a client. I really want to use LESS for CSS and found a WP plugin named WP-LESS.
Now, I am total WordPress newb, but it appears that this plugin requires me to use a function called wp_enqueue_style() to tell WordPress to process the .less file.
I can't figure out where I use this function. I looked in my header.php file in my theme directory and I see this.
<link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Am I supposed to replace this code with something like this?
<?php wp_enqueue_style('mytheme',
get_bloginfo('template_directory').'/style.less',
array('blueprint'), '', 'screen, projection'); ?>
wp_enqueue_style usage inside of the theme or the plugin:
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a parent theme
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a child theme
wp_enqueue_style( 'my-style', plugins_url( '/css/my-style.css', __FILE__ ), false, '1.0', 'all' ); // Inside a plugin
Not quite, but almost. What you want to do is place a function in functions.php that queues your script.
So:
function addMyScript() {
wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');
Then make sure you have do_action('wp_head'); in your header.php file and it should work just fine.
Add below function in your theme function.php and you get style and script.
<?php
if ( ! function_exists( 'add_script_style' ) ) {
function add_script_style() {
/* Register & Enqueue Styles. */
wp_register_style( 'my-style', get_template_directory_uri().'/css/my-style.css' );
wp_enqueue_style( 'my-style' );
/* Register & Enqueue scripts. */
wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js' );
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'add_script_style', 10 );
?>
Ran into this issue myself, and EAMann's tip almost worked. It might be the version of WordPress (3.4), although I'm not a php developer so I'm not sure, but I needed this below the function instead of what was provided:
add_action('wp', 'useLess');
To make sure the enqueue is done at the proper time use add_action().
So it would be something like the following in functions.php:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style('main-style', get_template_directory_uri() . '/style.less');
});
Make sure to have a <?php wp_head(); ?> somewhere in your header.php.
btw no need to name the function, it can only a potential name clash or typo Preferably use a anonymous function
Final remark: Why not compile the .less files in the development environment and deploy the resulting .css file (minified or otherwise)?
If you enter this code correctly you must be see this function is exist or not in your index.php file wp_head(); & wp_footer();
if is not exist, you need to be add this function in your index file. you need to add this wp_head(); before haed tag, and another one add before body tag.
function load_style() {
wp_register_style( 'my_style', get_template_directory_uri(). '/css/my_style.css' );
wp_enqueue_style( 'my_style' );
}
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'load_style' );
For more details