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 am creating a wordpress childtheme. I have style.css in the childtheme and I am using this:
wp_enqueue_style( 'parent-style-bob', get_template_directory_uri() . '/style.css' ); to bring in the style.css from the parent - 2016 in this case. This is working fine as far as I can tell.
I now want to add a separate responsive css style sheet that is AFTER my childtheme/style.css (for development purposes)
If I add this to my function wp_enqueue_style( 'responsive-bob', get_stylesheet_uri() . '/styles-responsive.css' ); it comes in BEFORE my childthemes css file.
How do i get the order right please?
Here's the whole function:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style-bob', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'responsive-bob', get_stylesheet_uri() . '/styles-responsive.css' );
}
You can "wait" for the child style to load and then load your stylesheet, ie, make your stylesheet dependant on the child style. The child style handle will be twentysixteen-style
You can do the following
wp_enqueue_style( 'responsive-bob', get_stylesheet_directory_uri() . '/styles-responsive.css', array( 'twentysixteen-style) );
I'm trying to convert HTML static website to WordPress. I'm stuck at the very beginning, where I need to load all my styles from css folder in my function.php
<?php
// Loading styles
add_action( 'wp_enqueue_scripts', 'load_styles' );
function load_styles() {
wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css' );
wp_enqueue_style( 'font-awesome2', get_template_directory_uri() . '/css/font-awesome2.css' );
wp_enqueue_style( 'framework', get_template_directory_uri() . '/css/framework.css' );
wp_enqueue_style( 'owl', get_template_directory_uri() . '/css/owl.theme.css' );
wp_enqueue_style( 'style', get_template_directory_uri() . 'style.css' );
}
?>
Here are all my files located in the following directory:
And then I'm trying to inspect element in Google Chrome I got a bunch of errors that are saying the same thing: Failed to load resource: the server responded with a status of 404 (Not Found)
In my header.php I'm calling <?php wp_head(); ?> right before the </head> TAG. In my index.php file I'm calling <?php get_header(); ?>
I tried to move add_action( 'wp_enqueue_scripts', 'load_styles' ); to the bottom;
I tried to set permissions for my folders in Filezilla to 777;
I tried to use get_stylesheet_uri() instead of get_template_directory_uri();
And I don't know what I supposed to do next.
You've probably already figured this out but it looks like you missed /css/ before your style.css
It should look something like this:
wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
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