Author: wordpressluv

WordPress categories are very convenient way to group related posts together. Your reader can find posts in a specific category in one page and read pots of their interest . Setting up categories provide a proper site structure. You can assign one or more categories while creating the post. See fig below.

In wordpress  each category has its own page. Add category title to your menu. (Refer How to add navigation menu). Your reader can view all the posts on a certain topic in one place.

Before proceeding let us have a look at creating category page in wordpress. Visit Posts » Categories page. On this page you can Add / Edit WordPress categories. Refer the following image to see how to add/find category slug. We are going to use category slug while creating template.

Click on View link to view category page. When a viewer clicks on a Category link  by default, WordPress shows a page with list of Posts in that particular Category. But you can easily create a custom looking page for different categories on your site.

For example:

Suppose you have a category “WordPress hosting” on your site and you want to display all posts under this category in one style. And you have another category “WordPress themes” and display all posts under this category in another style.

Let us see how to create a custom page template for a certain category  in wordpress

As you know WordPress uses a set of template files to display a page. When someone clicks a Category link, wordpress searches down through the template hierarchy in the current theme’s directory to generate the correct page.

So what file is used to load a category page?

WordPress looks for either one of the following templates.

1. category-slug.php
2. category-ID.php
3. category.php
4. archive.php
5. index.php

For example:

On your site you have a category “WordPress hosting” with slug “wphosting” and id = “12”. To display this page wordpress look for template category-wphosting.php. If not it’s not found, it will look for template names in the following order. category-12.php >> category.php >> archive.php>> index.php. So to display custom style, you need to create either one of the above template.

Most wordpress theme includes archive.php file( or even category.php file). Edit ‘ archive.php ‘ to make custom look and feel. If you do not want to make too complicated changes, you can use conditional tags inside a generic template, like archive.php. But I don’t want to edit my archive file. Here I’m going to make a category.php and make changes over there.

1. Go to Appearance » ThemeEditor. From the list of theme files on your right, look for category.php , if you do not have a category.php file, look for archive.php and make a copy of it.(Note: If category.php file exists, go to step 4)
2. Copy all the contents of archive.php and paste them in your favorite code editor like Notepad. Save this file as category.php. Make necessary changes. Some tips on editing files are given below.
3. Connect to your website using FTP client. Upload new file(category.php) to /wp-content/themes/your-current-theme/ directory.
4. (Note:) If category.php file exists, you can either edit code or make a copy of category.php file to create separate design for each category. Here I’m going to make different design for my webhosting category. Make a copy of category.php. Save it as category-{category-slug}.php. In my case save as category-wphosting.php to create separate design for wordpress hosting category. Using this technique you can create templates for any category. Just use category-{category-slug}.php as the file name. You can find category slugs by visiting the categories section as explained in the beginning of this article. Then upload new file as in step 3.

Modify Your New Template

Now you can edit the way you want your category page to look like. If you’re going to attempt this, you need a basic understanding of php code. Here are some tips on editing the template.

Display Category title

Use is_category() conditional tag to display information related to particular category. For example how to add category title or some header image / text related to a category.

Look for <?php if(have_posts()) , add following code above it.

Display post related to a Category

To show  the correct category of posts add following code right above the WordPress loop.

<?php 
$args = array( 'post_type' =>   'post',                        
               'category_name' =>    'wphosting',                    
               'posts_per_page' =>  20, 
               'paged' =>  $paged   );
query_posts( $args );
?>

How to Display WordPress Posts in 4 Columns

Step #1: Create column CSS

First you need to have some CSS column classes in place. Add the following code in your theme’s style.php

/* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } }

Step 2: Edit category.php/category-{category-slug}.php code

Look for following piece of code: Please note: Different themes have different structure and code.  So look carefully and apply same logic.

Replace it with following code.

How to display post in 3 columns

Basically you can adjust column width in above CSS and counter in above php code to display posts in 2,3,4 columns.

See the following part in css code. we set width : 2s% to dispay 4 columns.
.column {
float: left;
width: 25%;
padding: 10px;}

• Let us see what is happening in php code.
• First We set the count at 0, created a new row() and then added a column ().
• After displaying content, we close the column div and increase the counter by one.
• Now we check whether our counter exceeded maximum number of columns.(Since we want four columns, we check if the counter is 4) .
• If it reached 4, reset the counter to 0 then close the row div.
• Repeat the loop.
• Once loop is done, check whether we close the row div. Check if the counter is greater than 0, then add a</div> tag.

To display content in 3 columns do the following:

• Edit CSS: >> “width: 25%;” to “width: 33.33%;”
• Edit php >> “if($i == 4) {” to “if($i == 3) {“

And that’s it! Have fun Editing.