Enqueuing multiple style sheets in Wordpress child theme - php

I have several Wordpress sites set up and have child themes created for all of them. One of the sites is going to have multiple subsites that will all include customized branding. I have a style sheet enqueued in my child theme with the following code in my functions.php file.
if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
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( 'font-awesome','swiper','perfect-scrollbar','animate' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
This works fine and my style sheet is functioning as expected. The issue I'm running in to is as I add new subsites with customized branding, the size of this style sheet, style.css, is getting harder to manage. What I want to do is enqueue another style sheet in my child theme for the subsites. I tried to replicate the code above to enqueue the new style sheet, but it does not work. Here is what I added in my functions.php file immediately below the code above:
if ( !function_exists( 'coastal_thm_cfg_locale_css' ) ):
function coastal_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'coastal_thm_cfg_locale_css' );
if ( !function_exists( 'coastal_thm_cfg_parent_css' ) ):
function coastal_thm_cfg_parent_css() {
wp_enqueue_style( 'coastal_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'coastal-style.css', array( 'font-awesome','swiper','perfect-scrollbar','animate' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'coastal_thm_cfg_parent_css', 11 );
I thought this would work but it does not. I understand child themes but must admin the whole enqueuing process is quite confusing to me. I used a plugin, Child Theme Configurator, to enqueue the primary child theme style sheet.
I've looked through several blog posts and questions in Stackoverflow, but cannot find an answer to the specific problem.
Is enqueuing multiple style sheets like this possible?
If so, what am I doing wrong?

Related

Where to insert php code into the functions.php file of my child theme

First of all, I'm not a developer. I've managed to insert some functions for my WooCommerce webshop by inserting code snippets into the functions.php file of my parent theme. I've made a child theme in case I have to update the theme. I'm afraid these functions get lost otherwise.
I've used the Child Theme Configurator plugin to create the child theme. Now I'm trying to insert the same code snippets into the functions.php file of the child theme. I however, break my site every time. Before adding the code I've removed the functions from the parent theme, otherwise an overlap might excist.
I think I'm adding these code snippets at the wrong location within the file. Below you see the code from the 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_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
if ( !function_exists( 'child_theme_configurator_css' ) ):
function child_theme_configurator_css() {
wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'hello-elementor','hello-elementor','hello-elementor-theme-style' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 10 );
// END ENQUEUE PARENT ACTION
This is the code I've successfully added to the parent theme. Now I want to add it to the child theme:
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
return $tabs;
}
/* melding uitschakelen: toegevoegd aan winkelwagen */
add_filter( 'wc_add_to_cart_message_html', 'ql_remove_add_to_cart_message' );
function ql_remove_add_to_cart_message( $message ){
return '';
}
Where and how do I add it?
Thanks for the help in advance! :)

Use Wordpress Enqueue Array to Load Stylesheet Last

I want the modified child theme site-banner1.css stylesheet to load after the parent theme so it overwrites the parent file with the changes. I am using the enqueue array() to try and push site-banner1.css to the end of the queue by inputting the last style id (CSS from a plugin) into the array function. Here is the code from functions.php:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
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( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
function my_theme_enqueue_styles() {
$parent_style = 'tesseract-site-banner';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/css/site-banner.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/site-banner1.css',
array( $parent_style, 'tt-easy-google-font-styles')
); }
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles',99999 );
Currently site-banner1.css is visible in the source code but it is not the last stylesheet to load and so the changes are not visible. The parent site-banner.css is still visible in the dev tools with the styles. By adding the last CSS id into the array can I force site-banner1.css to load after it, I think code is missing from the array but not sure what? If this is incorrect what is the way to force the sheet to load at the end of the queue?
I managed to fix the problem using wp_deregister_style:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
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( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
add_action( 'wp_enqueue_scripts', 'load_alta_styles', 200 );
function load_alta_styles() {
wp_dequeue_style( 'tesseract-site-banner' );
wp_deregister_style( 'tesseract-site-banner' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .
'/site-banner1.css' );
}

Wordpress child-theme functions.php Read-More excerpt link

I'm trying to change the "read more" link in a child theme.
From the codex, I've added the following to the functions.php file of the parent theme (twentyseventeen)
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
global $post;
return ' <a class="moretag" href="'.
get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
...and it does what I'd like it to do.
However, I don't want it to be wiped out if the theme is ever updated.
So I've created a child-theme.
However when I add the code to the child theme functions.php file, it does not work.
My child-theme functions.php file looks like this:
<?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( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
if ( !function_exists( 'child_theme_configurator_css' ) ):
function child_theme_configurator_css() {
wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','twentyseventeen-style' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// END ENQUEUE PARENT ACTION
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
global $post;
return ' <a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I was able to get this to work with some information from this question:
Wordpress functions.php child theme [Resolved]
In my child-theme functions PHP, I checked to see if the original twentyseventeen_excerpt_more() function has executed, and then give my alternative readmore() function a higher priority. With the higher priority (15), add_filter( 'excerpt_more', 'readmore', 15 ); my function runs first, and the original read more function is ignored in the parent theme.
This is what the function looks like in my child-theme functions.php file:
if ( ! function_exists ( 'twentyseventeen_excerpt_more' ) ) {
function readmore( $link ) {
if ( is_admin() ) {
return $link;
}
$link = sprintf( '<p class="link-more">%2$s</p>',
esc_url( get_permalink( get_the_ID() ) ),
/* translators: %s: Name of current post */
sprintf( __( '[Read More...]<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) )
);
return ' … ' . $link;
}
add_filter( 'excerpt_more', 'readmore', 15 );
}
BTW, the above could also be inserted into a plugin .php file if you would prefer.

Child theme enqueuing with dependencies

I'm trying to create a child theme. The parent theme has a style.css and all, and I was looking at wp_enqueue_style() function, and it says that you can inlude dependencies. So that means that the themes own style.css can be active, and in my child theme if I specify the same rule in my style.css, it should overwrite it.
But the dependency is an array of handles. How do I find those handles?
wp_enqueue_style( 'mytheme-style', get_stylesheet_directory_uri().'/style.css', array('main_css') );
I tried with the above, but it only loads the style.css from child theme, not the parent.
Where can I find these handles?
EDIT:
I found the code for reproducing the handles and scripts:
function wpa54064_inspect_scripts() {
global $wp_scripts;
foreach( $wp_scripts->queue as $handle ) :
echo $handle,' ';
endforeach;
}
add_action( 'wp_print_scripts', 'wpa54064_inspect_scripts' );
function wpa54064_inspect_style() {
global $wp_styles;
foreach( $wp_styles->queue as $handle ) :
echo $handle,' ';
endforeach;
}
add_action( 'wp_print_scripts', 'wpa54064_inspect_style' );
But it still doesn't work the way I thought it does.
get_stylesheet_directory_uri() will return the child themes URL if active.
Since you're trying to load the style.css file inside your parent theme you can use get_template_directory_uri() instead.
E.g:
wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css', array('main_css') );
My suggestion would be to load your stylesheets like this (code goes inside your child theme's functions.php):
function wpse_load_styles() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'mytheme', get_stylesheet_uri(), array( 'parent-styles' ) );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_styles' );

Use functions.php file to call specific style sheet when a unique Wordpress page template is used

I have a responsive Wordpress theme from "Elegant Themes" that works well, but there's a page that I wish to be non-responsive. I created a style sheet that successfully renders the site non-responsive, but I only want to it to use the said style sheet when a particular page template is used.
I've determined that the logic is probably executed it the functions.php file, and that I'll likely need to use "wp_enqueue_style", but I can't seem to crack it. Here's what I have right now (my addition is below Loads the main style sheet comment:
function et_nexus_load_scripts_styles(){
global $wp_styles;
$template_dir = get_template_directory_uri();
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_enqueue_script( 'superfish', $template_dir . '/js/superfish.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'nexus-custom-script', $template_dir . '/js/custom.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'nexus-custom-script', 'et_custom', array(
'mobile_nav_text' => esc_html__( 'Navigation Menu', 'Nexus' ),
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'et_hb_nonce' => wp_create_nonce( 'et_hb_nonce' ),
) );
$et_gf_enqueue_fonts = array();
$et_gf_heading_font = sanitize_text_field( et_get_option( 'heading_font', 'none' ) );
$et_gf_body_font = sanitize_text_field( et_get_option( 'body_font', 'none' ) );
if ( 'none' != $et_gf_heading_font ) $et_gf_enqueue_fonts[] = $et_gf_heading_font;
if ( 'none' != $et_gf_body_font ) $et_gf_enqueue_fonts[] = $et_gf_body_font;
if ( ! empty( $et_gf_enqueue_fonts ) ) et_gf_enqueue_fonts( $et_gf_enqueue_fonts );
/*
* Loads the main stylesheet.
*/
if ( is_page_template('custom-pagetemplate.php') ) {
wp_register_style( ‘custom-style’, get_stylesheet_directory_uri() . ‘/customstyles.css’ );
wp_enqueue_style( ‘custom-style’ );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
From what I can tell, I have my condition set up correctly using is_page_template, but it definitely isn't using the right style sheet to load the page.
Note: I posted this question to Elegant Themes' customization support board, and the moderator said that what I'm trying to do is possible, but it would necessitate a level of customization that would require me to hire a third party developer.
Having said that, if I'm missing something huge here and need to pick up a PHP book (I know very little about PHP), or shell out some cash to hire someone to get this done, please don't hesitate to set me straight. Otherwise, any input is much appreciated.
Thanks!
Sorry to jump the gun and answer my own question to quickly, but I got it working using the following code:
if ( is_page_template('custom-pagetemplate.php') ) {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/customstyle.css' );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
My primary issue was that I was using get_stylesheet_directory_uri() instead of get_template_directory_uri.
This article helped me out a lot: How to enqueue a custom stylesheet via functions.php in WordPress
Thanks!
You can do something similar to this:
if(is_page($page)) {
// Load non responsive css
}
else {
// load normal css
}
http://codex.wordpress.org/Function_Reference/is_page

Categories