I've been following a tutorial online thats taught me how to enqueue stylesheets for Wordpress with the functions folder instead of the headerusing the following code:
function lucieaverillphotography_scripts() {
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() ); }
Followed by:
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
This has worked, but when I tried to enqueue a separate stylesheet for a page template, it won't work. Here is the code I used, I put it between the two above:
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
else { wp_enqueue_style( 'lucieaverillphotography_style',
get_template_directory_uri() . '/style.css'); }
I have a feeling that it's something to do with the last part: '/style.css' ... but the only way I can get my theme to recognise the new stylesheet is by adding: '/css/full-page.css' in its place and then it uses the new stylesheet for every page rather than the page template.
If I change it by adding the name of the folder that contains style.css - i.e '/files/style.css' , I lose all my css altogether, which is puzzling as I thought this was the most obvious thing to try.
Try This in functions.php
function lucieaverillphotography_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' , get_template_directory_uri() . '/css/full-page.css');
}
else{
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
Related
I have the following code to where it's supposed to work.
function boom_theme_styles() {
wp_enqueue_style( 'style_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'boom_theme_styles' );
However, the style.css will not load. Looks like a basic webpage from the 1990s. Thanks for the help.
wp_enqueue_style('style_css', get_stylesheet_uri());
I've searched through several questions and still having trouble. I'd really appreciate some expertise from y'all. =)
The child theme created and activated on my WordPress site seems to be enacting no changes.
I know essentially zero PHP but trying to use the functions.php instead of #import since it's supposed to be a better load time.
Here's what I have in my child theme's directory style.css (first) and functions.php (second)
/*
Theme Name: Quest-Child
Description: No Coward's Quest Child Theme
Author: Jason from No Coward
Author URI: http://www.nocoward.com
Template: quest
Version: 1.0
*/
/* add padding to site description */
.site-description {
padding-top: 15px;
padding-bottom: 30px;
}
.body {
background: red;
}
/* can be found on "Services" page. Is the first ID within the <p> element */
#cc-m-12571703896 {
background: blue;
}
<?php
function my_theme_enqueue_styles() {
$parent_style = 'quest-all-css'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
WordPress recognizes the child theme and has allowed me to activate it successfully.
The stuff in CSS is what I've tried to use for testing my child-theme laying down my changes. Nothing is appearing.
Again, I have zero PHP knowledge. Based on the official WordPress "How to create a child theme", I copied and pasted the code above and tried to fill in the "parent-style" value based on their instructions.
Here's what I saw on my parent theme I could possibly be using for the functions.php "parent-style"...
// Enqueue required styles
wp_enqueue_style( 'quest-bootstrap', get_template_directory_uri() . '/assets/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'smartmenus', get_template_directory_uri() . '/assets/plugins/smartmenus/addons/bootstrap/jquery.smartmenus.bootstrap.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/plugins/font-awesome/css/font-awesome.min.css' );
wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/assets/plugins/animate/animate.css' );
wp_enqueue_style( 'slit-slider', get_template_directory_uri() . '/assets/plugins/FullscreenSlitSlider/css/style.css' );
wp_enqueue_style( 'colorbox', get_template_directory_uri() . '/assets/plugins/colorbox/colorbox.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array(
'quest-bootstrap',
'smartmenus',
'font-awesome',
'animate-css',
'slit-slider',
'colorbox'
) );
...
// Enqueue required styles
wp_enqueue_style( 'quest-all-css', get_template_directory_uri() . '/assets/css/plugins-all.min.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array( 'quest-all-css' ) );
// Enqueue required scripts
wp_enqueue_script( 'quest-all-js', get_template_directory_uri() . '/assets/js/quest-and-plugins.js', array(
'jquery',
'masonry'
) );
What am I missing?
Thanks in advance!
-Jason
I managed to fix this. Here's the PHP code I found on the help forum. I think the "Portfolio" bit may be extraneous, but it's working so I'm leaving it there just in case.
<?php
add_action( 'wp_enqueue_scripts', 'quest_child_enqueue_styles' );
function quest_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_filter( 'quest_plus_template_content-portfolio', 'quest_child_template_portfolio' );
function quest_child_template_portfolio(){
return get_stylesheet_directory() . '/content-portfolio.php';
}
Caveat to this solution: There is a weird thing happening. I put in some styling to make something "Background: red" so I could test if the child theme was working, and despite deleting that bit of code, it is still appearing.
For now I'm chalking it up to slow hosting but be aware that's happening if you follow this solution.
Hope this helps someone else! =)
Jason
I have tried using the following code to embed Bootstrap to Wordpress but it doesn't work. Need help..........
<?php
function resources() {
wp_enqueue_style('style',get_stylesheet_uri());
wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}
add_action('wp_enqueue_scripts', 'resources');
This may be helpful to you
WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
For Reference: click here
In order towp_enqueue_scripts in function.php work properly, <?php wp_head(); ?> needs to be placed before the closing </head> and <?php wp_footer(); ?> before closing </body> tag in your template file.
Because you didn't post your template file, so I think this can be a reason causes your problem.
Hope this help
Just use the bootstrap CDN - https://www.bootstrapcdn.com/
In your child theme find the function theme_enqueue_styles() and add the two lines of extra code shown below.
function theme_enqueue_styles() {
// Add the following two lines //
wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
// ------ -------//
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
Make sure your file location of downloaded bootstrap files. and put this code into functions.php
1.stylesheet CSS file
2.script js file
<?php
function load_stylesheets()
{
// enqueue parent styles
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts','load_stylesheets');
?>
For my website, I am trying to include my own stylesheet for icons other than font-awesome. However, no matter what I do with "wp_enqueue_style", I can only end up using one of the stylesheets (either mine or font-awesome) but not both. Only one would be working. I was wondering what I am doing incorrectly with my coding here:
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );
wp_enqueue_style( 'Mystyle', get_template_directory_uri().'/fontawesome/css/Mystyle.css', array());
What can I do so that both 'font-awesome.css' and 'mystyle.css' can be used? Thanks
You should wrap wp_enqueue_style() in a function and hook that function to wp_enqueue_scripts. For example:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
// Enqueue more style sheets here.
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
You're code should look like this.
function my_scripts() {
// Add Mystyle
wp_enqueue_style( 'Mystyle', get_template_directory_uri().'/fontawesome/css/Mystyle.css',array());
// Add Font Awesome
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );
}
//Push to wordpress all files
add_action( 'wp_enqueue_scripts', 'my_scripts' );
I am trying to en-queue css in WordPress.
Here is my code:
function adding_styles()
{
wp_register_script( 'jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// Register the style like this for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'jquery-ui-css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'adding_styles' );
However, jquery-ui.css doesn't load. Can anybody guess the error here??
I believe you need to add path to the CSS file -
wp_enqueue_style( 'jquery-ui-css',get_stylesheet_uri() );
EDIT -
It will clearly works with the URL -
wp_enqueue_style( 'jquery-ui-css', http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css );
Reference - wp_enqueue_style
Look for$src parameter
Try this:
You can add javascript & css in wordpress like this
function load_custom_wp_admin_js() {
wp_enqueue_script('custom_wp_admin_js', plugins_url() . '/dynamic-headers/dynamic-header.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_js');
Add this code in function.php file.
-
Thanks