Attaching Other CSS File to Category Page

Attaching Other CSS File to Category Page

It seems so simple and yet, in order to find the solution to this need of mine I had to go through numerous codex entries, support items and posts. So, I thought it be appropriate to sum things up.

Target: To attach a different css file to a WordPress category page and that category post pages, for having slightly different design for each category.

Step 1: Create category template file

For having unique category page, you need to create a category template file according to the wp file hierarchy, explained in codex pages: Category Templates and Template Hierarchy.

You can use the name or the id you assigned the category, when you defined it in admin.

The name of the file would be category-name.php or category-id.php and it should be stored at the same directory of category.php, or if in a child theme, in the theme directory.

You can make as many changes as needed to that file.

IMPORTANT: For attaching a css file, you must replace the get_header() with the content of the header.php file.

Step 2: Create the css file

You can use this css file to change only a few style classes.

Create a css file with the name of your choice and store it in the theme directory, or in any folder inside it.

Write only the style classes you want to change in this page.

IMPORTANT: to make the css file you have just created a dependency of the theme style, include an import command at the beginning of the file.

@import url("style.css");
/* Theme customization starts here-------------------------------------------------------------- */

/**
* 7.0 Sidebars * -----------------------------------------------------------------------------
*/

/* Secondary */
#secondary {
background-color: #db3328;
}

@media screen and (min-width: 1008px) {
.site:before {
background-color: #db3328;
}
}

Note: The import command here directs to the theme stylesheet that is located at the same directory as the css file. For directing to other directories you may use something like

@import url("../twentyfourteen/style.css");

step 3: Add a function to functions.php

In the function needed we use 3 wp functions: wp_register_style() for registering the new stylesheet, wp_dequeue_style() for telling the system not to call the default stylesheet and wp_enqueue_style() for calling the new stylesheet we have just created.

function my_style() {
        wp_register_style( 'my-style', get_stylesheet_directory_uri(). '/style-my.css'  );
        wp_dequeue_style( 'twentyfourteen-style' );
	wp_enqueue_style( 'my-style' );	
	}

 

wp_register_style():

1) first variable is a name of your choice.

2) second variable is the url of the new css file. For child theme (recommended) use get_stylesheet_directory_uri(). For a theme use get_template_directory_uri().

wp_dequeue_style():

For finding the name of the stylesheet used, display the source of the webpage. In the rel link line directing to the stylesheet, the name appears in the id with the suffix -css. So if the id is twentyfourteen-style-css, the name is twentyfourteen-style.

wp_enqueue_style():

Use the name you designated at wp_register_style().

step 4: Add the proper action to category template.

Back to category template we’ve created in Step 1.

In the head section, just above wp_head(), we’ll add the action that calls the function we’ve just created.

<?php add_action( 'wp_enqueue_scripts', 'my_style' ); ?>
<php wp_head(); ?>

In the above, wp_enqueue_scripts is an wp_head action, my_style is the name of the function we’ve created in step 3.

Changing the css file of a single Post page

As template hierarchy of WordPress is only offering the option of special template for post type, I have found that the best way to achieve my goal is to use the custom post template plugin.

For the purpose of changing the single post css file, you can use the css file and the function created for the category in steps 2,3 above.

Step 5: Creating post template

Using single.php as a starting point, save it with a different name. There is no naming convention and you may choose any name that clearly represents this template for you.

Plugin requirements

For designating the template name the plugin would read, add the following to the beginning of the new post template:

<?php
/*
Template Name Posts: Snarfer
*/
?>

 

Please make sure to use Template Name Posts: exactly. The name that follows is the template name. Again, you may choose any name that clearly represents this template for you.

Also, make sure the new template is stored in the same directory as the index.php of the theme (not in a sub-folder), or if a child theme, in the top directory of the theme.

Adding different css file to the template

As in step 1 above, replace the get_header() with the content of the header.php file.

Then, as in step 4 above, add the action that calls the function created in step 3 (see step 4).

Attaching template to post

The plugin enables you to choose templates for posts, the same way you choose templates for pages.

Enter the post editing page in admin, look for the Post Template box and choose the template you’ve just created.

Update and you’re done.

0 Comments
Share Post
No Comments

Post a Comment