I have a page that I want to apply custom css file, but I am having difficulty loading the custom css file for my page 'homepage'. If anyone could help me out, it would be highly appreciated. thank you!
This part works:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}
this part does not :(
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( '/stylehome.css', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
You're misunderstanding how wp_enqueue_style should be used.
In the example below the first argument I pass in is a handle, 'style-home'. The second argument is the path to the file.
function wpse_load_scripts_styles() {
if ( is_page( 'homepage' ) ) {
wp_enqueue_style( 'style-home', get_stylesheet_directory_uri() . '/stylehome.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_load_scripts_styles' );
get_stylesheet_directory_uri() gets the URL to your child theme folder. get_template_directory_uri() which is used in the first block of code in your question gets the path to the parent theme directory. Select the correct function based on where the file is located.
My guess would be that you've set the page, homepage, as your front page therefore you may want to replace the conditional with is_front_page().
Replace:
if ( is_page( 'homepage' ) ) {
With:
if ( is_front_page() ) {
Finally get_stylesheet_uri() as used in the second block of code in your question will return the URL of the child theme's stylesheet (or the parent theme if you don't have a child theme setup).
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Will this work for you?
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( 'child-home-style', get_stylesheet_directory_uri . '/stylehome.css');
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Related
I have a basic bunch of CSS/Js files defined in my functions.php file. There I register and enqueue those scripts and stylesheets.
But in specific situations I want to load additional scripts based on the site template which is used.
I tried to register and enqueue those additional scripts in the specific template file, but it didnt work. It does only work when included in the functions.php.
What is the correct way to do this?
You can try like this
add_action( 'wp_enqueue_scripts', 'enqueue_file' );
function enqueue_file() {
if(is_front() || is_archive()){ // you can set here condition
wp_enqueue_style( 'main-css', get_template_directory_uri() .
'/static/css/main.min.css"' );
}
}
add this to your functions.php in child theme:
add_action(
'wp_enqueue_scripts',
'loadActionFrontend'
);
function loadActionFrontend()
{
if( is_page( 'pageid here' ) ) {
wp_register_script(
'scriptName',
'scripturl',
[],
'',
true
);
wp_enqueue_script('scriptName');
}
}
with the query if( is_page( 'pageid here' ) ) you can insert your desired pageid where the script shold loaded.
Hey I have created tabbed menu in my wordpress blog. I have done it in parent theme. Now I have created a child theme of that parent theme. Everything seems fine expect tabbed menu. I have used jQuery for tabbed menu.
Here is my function.php file's specific part to include jQuery and css code from parent theme.
// enqueue tabs script
function my_scripts_tabs() {
if ( !is_admin() ) {
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script( 'custom-tabs', get_stylesheet_directory_uri() .
'/js/tabs.js', array('jquery'));
}
}
add_action('wp_enqueue_scripts', 'my_scripts_tabs');
//add tabs stylesheet
wp_register_style('jquery-custom-style',
get_stylesheet_directory_uri().'/css/jquery-ui-1.12.1.custom/jquery-ui.css',
array(), '1', 'screen');
wp_enqueue_style('jquery-custom-style');
Here is my function.php file for child theme.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( 'genericons' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
Anyone please help. TIA
You need to edit
get_stylesheet_directory_uri().'/css/jquery-ui-1.12.1.custom/jquery-ui.css'
to
get_template_directory_uri().'/css/jquery-ui-1.12.1.custom/jquery-ui.css'
at parent theme.
Because when it is run by child theme get_stylesheet_directory_uri() returns child theme path, although the code is in parent theme.
i have stylesheet that loads on all of my pages in my wordpress theme. i want to disable it in landing.php .
The file is in this address: http://example.com/wp-content/uploads/fusion-styles/fusion-22528.css
i had tried these codes so far:
function themeslug_enqueue_style() {
if (is_page_template( 'landing.php' )) {
wp_enqueue_style( 'stylesheet', 'http://example.com/wp-
content/uploads/fusion-styles/fusion-22528.css', false );
}
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
and this one:
function se_remove_styles() {
if ( is_page_template( 'landing.php' ) ) {
wp_dequeue_style( 'http://example.com/wp-content/uploads/fusion-
styles/fusion-22528.css?timestamp=1510985246&ver=4.9' );
}
}
add_action( 'wp_print_styles', 'se_remove_styles', 99999 );action(
'wp_print_styles', 'se_remove_all_styles', 999999 );
but didnt worked. i had use this code:
function se_remove_all_styles() {
global $wp_styles;
if ( is_page_template( 'landing.php' ) ) {
$wp_styles->queue = array();
}
}
add_action( 'wp_print_styles', 'se_remove_all_styles', 99 );
but it will remove all of my styles.
any help will appreciated.
This code snippet removes queued CSS called "animate" from your WP frontend.
function se_remove_styles() {
wp_dequeue_style( 'animate' );
}
add_action( 'wp_enqueue_scripts', 'se_remove_styles',99999 );
So, how to get handle name of queued CSS? There are some ways to do it, here is one of them:
Go to view-source:yourwebsite.com
CTRL+F and find your needed CSS file.
You will see the line like this:
< link rel="stylesheet" id="fusionblabla-css" href="http://example.com/wp-content/uploads/fusion-styles/fusion-22528.css" type="text/css" media="all" />
You see id='fusionblabla-css' there. Then "fusionblabla" is the handle name you are looking for. (not 'fusionblabla-css', but "'fusionblabla')
After it is done and you make sure that it is working you can add condition to that function
function se_remove_styles() {
if (SOME CONDITION HERE)
wp_dequeue_style( 'animate' );
}
add_action( 'wp_enqueue_scripts', 'se_remove_styles',99999 );
I'm using a child theme and need to enqueue the stylesheet for a slider. The css file is located in a folder in the parent theme directory, i.e. /parent-theme/css/flexislider.css
I created the child theme using a plugin which added a functions.php file to the child theme directory with the following code:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
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')
);
}
I assume I have to add another entry to the above function referencing flexislider.css but I'm not quite sure how to do it.
*UPDATED
Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
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_enqueue_style('flex-slider',get_template_directory_uri() . '/css/flexislider.css');
}
I don't have much experience with child-themes, but following the model in that function, I think get_template_directory points to the parent theme and not the child theme, which you said the flexislider code is located
I am trying to get my head round the wp_add_inline_style() function in WordPress.
//setting inline css.
function my_styles_method() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
$color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
I understand most of it but I am not understanding this bit:
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
Is this a dependency? or a blank css file so that code is written to it?
If its dependant then why? I just want to load custom css into the theme so it can be more customisable.
Thanks
Answer to my own question is, its a dependency :)