alexanderdejong.com

Wordpress Developer

  • Home
  • Blog
  • Projects
  • Contact
You are here: Home / Wordpress / WP Tutorials

How to style two different blog pages in the same WordPress site

Posted on March 30, 2015 Leave a Comment

It’s quite easy to build two different styled blog themes on your WordPress website. You could do this by leveraging the Multi-site functionality of WordPress. Another option is to add a CSS class to each blog post for each category or tag. If you think this will make things confusing for the admin user then create two Custom Post Types (CPT) with their own taxonomies. In this blog post we will go through the various options available and their benefits.

Create a category and style the class to your taste. Or add a custom style to the post.

This would probably be the easiest way to do this. Just open up your single.php file and find the following line of code:

<div id="content" role="main">

Change this line of code to the following:

<div id="content" role="main" <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>">

The following classes are added by default:

.post-id
.post
.attachment
.sticky
.hentry (hAtom microformat pages)
.category-ID
.category-name
.tag-name

The output would look like this:

<div id="post-4564" class="post post-1264 category-18 category-dancing logged-in">

Let’s say your category name is webdesign and you would like to change the color of your Blog Title. You can simply add the following css to your style.css file.

.category-webdesign .entry-title h1 {
color:#000;
}

This method allows you to experiment with different ideas. You can:

  • Style Posts Based on Authors
  • Style Posts Based on Popularity using Comment Count
  • Style Posts based on Custom Fields

This is the least intrusive and quickest fix to changing the design of your category post.
However, it only allows you to add custom CSS. To rearrange the template you would to go a completely different way.

Creating a Custom Post Type to style blog (posts)

From a purely administrative perspective, the main benefit to CPTs is that admins can see a separate section for each CPT and can create a blog post, they would go to their own panel, one for each CPT. You can label each CPT with the names of specific individuals. Using that and a plugin to control Account Capatability (like Capability Manager ) would help to differentiate the two separate blog approach. You can even create a separate homepage with different WP query filters to show different content. Then you just add Taxonomies and the site url goes yoursite/custom-post-type/taxonomy. But if you want the single posts in each category to have another design then you will have to add some custom body classes and a unique template. It will take a couple of hours to do at least.

Use a Multi-site installation to style two different blogs

Just add one in a separate directory and install it from there.



Update for other methods mentioned in this post planned for next week April 7th 2015.

Filed Under: WP Tutorials

Recent Posts

  • Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • How to Install Roots Bedrock on a Digital Ocean Droplet running on Serverpilot via SSH
  • Linux SSH Useful Server Commands to Remember: Grep, Permissions and more.
  • How to Install Roots Sage 8.5.1 on a Digital Ocean Droplet running on Serverpilot via SSH

Find more content

Affiliate links
  • cheap shared hosting
  • low priced virtual servers only 5$
Affiliates
  • If someone buys a product then I get a commission.
  • You pay the same price using my affiliate links.
  • I can spend more time making newsletters and tutorials.
  • Thanks for visiting!

Connect with me

Recent Comments

  • Pedro Gómez on Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • Tim Delmeire on How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • Jaehyuk J Yang on How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • Alexander de Jong on A guide on customising the membership experience with Theme my Login (TML)
  • Judit Sarkany on A guide on customising the membership experience with Theme my Login (TML)

Recent Posts

  • Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • How to Install Roots Bedrock on a Digital Ocean Droplet running on Serverpilot via SSH
  • Linux SSH Useful Server Commands to Remember: Grep, Permissions and more.
  • How to Install Roots Sage 8.5.1 on a Digital Ocean Droplet running on Serverpilot via SSH

Copyright © 2014 | Alexander de Jong | About | Contact | Privacy | Sitemap