-1

I'm a newbie for coding, I would like to learn how to add css style conditionally in functions.php My header controlled by .header-outer class. What would it be the best way to add css depending on category? I was able to determine category slug (not standard wordpress category) and wrote some if conditions. It's working but could not understand adding css. With wp_enqueue_style should I call external predefined css files or is it possible to write directly in functions.php.

wp_enqueue_style( '***', get_template_directory_uri() . '/mycss/category1.css', array(), '1.1', 'all');

Here I could not understand the first *** part ? I would like to embed all style not a class.

Thank you, Best Regards.

3 Answers 3

0

So on your category page check the body tag in your developer tools. There should be a category class. You can then target that page in your CSS with that classname. This is standard CSS stuff.

.cat-name{ color: blue; }

All other pages will not have that classname and the color: rule be your default.

Answering your direct question on how to conditionally load a stylesheet:

if(is_category('cats')){ 
    wp_enqueue_style( 'stylesheet-name', get_template_directory_uri() .'/mycss/category1.css', array(), '1.1', 'all');
}

Remember categories and taxonomies can get pretty complex. Custom taxonomies and categories may not work with something as simple as is_category

2
  • 1
    If using the last option is_category('cats') you'll most likely need to wrap in get_header or template_redirect otherwise it doesn't always work. Mar 9, 2016 at 21:54
  • Interesting, I've never ran into that and am using this code within functions.php currently. However as mentioned in my answer WP categories and taxonomies are tricky. Mar 10, 2016 at 14:34
0

Use this code to add a external css to your head.

//Proper way to enqueue scripts and styles
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
2
  • Thank you, it has worked like this...(It was for Easy Digital Downloads Categories) $terms = get_the_terms($download->ID, 'download_category'); $category = array_slice($terms, -1); foreach ( $category as $term ) { $slug .= $term->slug; } switch ($slug){ case 'home' : wp_enqueue_style( 'home', get_stylesheet_directory_uri() . '/css/default.css', false, '1.0', 'all' ); break; case 'photoshop' : wp_enqueue_style( 'photoshop', get_stylesheet_directory_uri() . '/css/photoshop.css', false, '1.0', 'all' ); break;
    – grasycho
    Mar 10, 2016 at 23:17
  • Your welcome. Please let otherw know that this is resolved bij giving it a check en points up
    – Dionoh
    Mar 11, 2016 at 7:27
0

I guess you're trying to say that you want to show a different css file for every category you have in your website.

If that is the case, you will simply hook to wp_enqueue_scripts and check if this is a category template using is_category() and which category is this using get_the_category(), and load the corresponding stylesheet.

Let's assume you have the files named with the same slug of the categories (i.e. photoshop -> photoshop.css, etc.):

function wpse220214_enqueue_category_style() {
    if(is_category()) {
        $slug = get_the_category(get_query_var( 'cat' ));
        $url = get_stylesheet_directory_uri()."/css/categories/$slug.css";
        if(file_exists($url)) { //So you don't get errors if the file is missing
            wp_enqueue_style( "$slug-style", $url, array(), '1.0');
        }
    }
}
add_action('wp_enqueue_scripts', 'wpse220214_enqueue_category_style');

Edit: You mentioned that you are using a custom taxonomy, 'download_category' as I see in your comments. In this case we will use is_tax() and get_queried_object() instead:

function wpse220214_enqueue_download_category_style() {
    if(is_tax('download_category')) {
        $slug = get_queried_object()->slug;
        $url = get_stylesheet_directory_uri()."/css/categories/$slug.css";
        if(file_exists($url)) { //So you don't get errors if the file is missing
            wp_enqueue_style( "$slug-style", $url, array(), '1.0');
        }
    }
}
add_action('wp_enqueue_scripts', 'wpse220214_enqueue_download_category_style');

Credit to this answer for using get_queried_object() and this for get_query_var('cat').

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.