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
Related
I am pretty new to wordpress, I want to convert a bootstrap theme into wordpress,i dont know if this question is a stupid one. This is the code in my functions file
<!---This is my functions.php file---->
<?php
add_theme_support('post-thumbnails');
function new2w_theme_styles(){
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '');
wp_enqueue_style( 'essentials_css', get_template_directory_uri() . 'assets/css/essentials.css');
wp_enqueue_style( 'layout_css', get_template_directory_uri() . 'assets/css/layout.css');
wp_enqueue_style( 'scheme_css', get_template_directory_uri() . '/css/color_scheme/blue.css');
wp_enqueue_style( 'custom_forms', get_template_directory_uri() . '/css/custom-forms-v2.css');
wp_enqueue_style( 'pack_css', get_template_directory_uri() . '/css/pack_realestate.css');
wp_enqueue_style( 'header-1', get_template_directory_uri() . '/css/header-1.css');
wp_enqueue_style( 'style_css', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'new2w_theme_styles');
function new2w_theme_js(){
wp_enqueue_scripts('bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js',array('jquery'), '', true);
wp_enqueue_scripts('script', get_template_directory_uri() . '/js/script.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'new2w_theme_js');
?>
Please how can I perform this same loop task for another section of my static page,I have looped through 3 images with this code, I have also created corresponding post in my admin panel;
<?php if( have_posts()) : while( have_posts()) : the_post();?>
HTML GOES HERE
<?php endwhile; endif;?>
<?
I want to use this same method to loop through another image grid of 4 with the get_the_post_thumbnail() function, how do I manage post for this.?
You could copy the contents of the bootstrap CSS file and paste the style definitions to your theme (in dashboard, go to Design / Customizer / Additional CSS and paste the code there).
However to apply the style classes to the correct WordPress generated DOM elements, you either have to apply class names to those DOM elements or rename the style classes such that they fit to the DOM elements' names. This approach could still clash with other CSS files anyways.
I register my css in Header with <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri().'/style.css'; ?>">
and the site couldn't recognize my css file, I also tried to use enqueue style :
function my_assets() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'style' ) );
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
and it recognize the css but when you edit the css file it is not changing/updating, so I deleted the enqueue_style function and now it recognizes 2 css and still not changing when you edit the css file.
what do you think is the problem and solution here?
Please try to use versioning when you enqueue the file.
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', filemtime(get_stylesheet_directory() . '/style.css'), false );
On the official documentation, you can check the version parameters i used on this sample:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Hope it helps.
Jose
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 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