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.

What are Custom Fields?

Basically, fields is what makes WordPress into WordPress. The text area in your post/page editor, the checkboxes in the category field up to the buttons that allow you to publish a post. Imagine you are able to create this fields for yourself.

Being able to program custom fields for your WordPress site is an extremely useful ability that will immensely please your clients. With careful planning you can come up with custom fields that will save you (and your clients) heaps of time.

Powerful examples of using custom fields

Imagine you want to create an opening hours area on a directory website. You could write all the opening hours in the product pages. But this would mean you have to copy the mark up every single time and search for time table manually to change the hours. Not efficient at all.

I would suggest you read up a bit about (WooCommerce) custom fields on this very popular post Mastering WooCommerce Products Custom Fields – Remi Corson. This will bring you up to speed on how to program all the different fields. I will just be looking at Text fields in this Tutorial, so you know exactly how to make a quality opening hours section in your current/next WordPress site.

Let’s assign the tab in the back-end of WooCommerce

We want to add a nice tab in the backend in WooCommerce for easy access for the client and to keep our products organized. You can even add a conditional statement if you don’t want this to appear on certain products, but for now this will appear on all your products.

Basically we add the new tab to the woocommerce_product_write_panel_tabs function which is already defined by WooCommerce.

/** Custom Tabs for Opening Hours. **/

function opening_hours_options_tab() {
?>
	<li class="opening_hours"><a href="#opening_hours_data"><?php _e('Opening Hours', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'opening_hours_options_tab'); 

/**
 * Custom Tab Options
 * 
 * Provides the input fields and add/remove buttons for custom tabs on the single product page.
 */
function opening_hours_options() {
	global $post;
	
	$opening_hours_options = array(
		'title' => get_post_meta($post->ID, 'opening_hours_title', true),
		'content' => get_post_meta($post->ID, 'opening_hours_content', true),
	);	
?>
	<div id="opening_hours_data" class="panel woocommerce_options_panel">
		<div class="club-opening-hours">
			<p class="form-field">
				<?php 
// Opening Hours Custom field Type
?>
<p class="form-field day_field_type">
	<label for="day_field_type"><?php echo __( 'Opening Hours', 'woocommerce' ); ?></label>
	<span class="wrap">
		<?php $day_field_type = get_post_meta( $post->ID, '_day_field_type', true ); ?>	
		<input placeholder="<?php _e( 'Monday', 'woocommerce' ); ?>" type="text" name="_day_field_one" value="<?php echo $day_field_type[0]; ?>" step="any" style="width: 250px;" />
		<input placeholder="<?php _e( 'Tuesday', 'woocommerce' ); ?>" type="text" name="_day_field_two" value="<?php echo $day_field_type[1]; ?>" step="any" style="width: 250px;" />
		<input placeholder="<?php _e( 'Wednesday', 'woocommerce' ); ?>" type="text" name="_day_field_three" value="<?php echo $day_field_type[2]; ?>" step="any" style="width: 250px;" />
		<input placeholder="<?php _e( 'Thursday', 'woocommerce' ); ?>" type="text" name="_day_field_four" value="<?php echo $day_field_type[3]; ?>" step="any" style="width: 250px;" />
		<input placeholder="<?php _e( 'Friday', 'woocommerce' ); ?>" type="text" name="_day_field_five" value="<?php echo $day_field_type[4]; ?>" step="any" style="width: 250px;" />
		<input placeholder="<?php _e( 'Saturday', 'woocommerce' ); ?>" type="text" name="_day_field_six" value="<?php echo $day_field_type[5]; ?>" step="any"  style="width: 250px;" />
		<input placeholder="<?php _e( 'Sunday', 'woocommerce' ); ?>" type="text" name="_day_field_seven" value="<?php echo $day_field_type[6]; ?>" step="any" style="width: 250px;" />
	</span>
	<span class="description"><?php _e( 'e.g. 06:00-22:00', 'woocommerce' ); ?></span>	
			</p>
		</div>
	</div>
<?php
}
add_action('woocommerce_product_write_panels', 'opening_hours_options');

As always save the fields in your database or you won’t be able to use them

// Save Fields
	add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

	// Function to save all custom field information from products
function woo_add_custom_general_fields_save( $post_id ){
	
	// Opening Hours Custom Fields
		$day_field_type =  array( esc_attr( $_POST['_day_field_one'] ), esc_attr( $_POST['_day_field_two'] ), esc_attr( $_POST['_day_field_three'] ),esc_attr( $_POST['_day_field_four'] ), esc_attr( $_POST['_day_field_five'] ), esc_attr( $_POST['_day_field_six'] ), esc_attr( $_POST['_day_field_seven'] ) );
	update_post_meta( $post_id, '_day_field_type', $day_field_type );
		
}

Now how to display our opening hours using short code

You could add the tabs using a conditional statement in your project but lets keep it to short code so you can pretty much add it anywhere you like.

This function basically passes through each value added in the custom fields and adds the day of the week using a counter. So when it finds a custom field active it will print the date next to that field on the front-end. Shout out to Ivo for helping me figure out how to use the counter properly.

If there isn’t a value it will just skip the field completely.

add_shortcode('opening_hours', 'opening_hours_custom_fields');
// Add WooCommerce opening hours
//add_filter( 'woocommerce_after_single_product_summary', 'opening_hours_custom_fields',5 );
function opening_hours_custom_fields() {
    if ( $lista = genesis_get_custom_field( '_day_field_type', $post->ID ) ) {	
        $values = array();
	    $counter = 0;
		$days=array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
        foreach ( $lista as $value ) {
            if ( $value != '' )
                $values[] = $value;
        }
        if ( $values ) {		 
            echo '<div id="hours_custom_fields">';
            echo '<ul>';		 
		foreach ( $values as $value ){
            echo "<li><div class='one-half first'>$days[$counter]</div><div class='right-hours one-half' style='text-align:right;'><i class='fa fa-clock-o'></i> $value </div></li>";
            $counter++;
        }
        echo '</ul>';
        echo '</div>';
	
		}			
    	}
}	

That concludes this post, now you have learned how to create a new tab in WooCommerce, save fields into the backend and add a counter to your code. Feel free to mangle the code as you like. Obviously you can change this example to more than just opening hours.

Feel free to link me to your articles or your projects. Would love to see your work in progress.

What is a jQuery lightbox?

While creating forms for a website I felt that a form was taking up a lot of room. Therefore, I decided to look for a plugin to create a pop up. A lightbox jQuery plugin allows you to create a clickable link with a pop up. There are a lot of plugins out there that do similar things but I didn’t want to install a WordPress plugin with a lot of extra features I don’t need.

WordPress built-in jQuery?

You may not have to look further than WordPress itself, there is a handy plugin already defined in WordPress called Thickbox. I will show you how to use both Thickbox and Colorbox in this post. Colorbox is a bit more feature rich, while Thickbox is in my opinion easier to implement.

Let’s start with loading Thickbox

As Thickbox is not loaded automatically, you have to start it in order to use it. Just paste the following in your functions.php file to start it up.

function aj_jquery_thickbox() {
add_thickbox();
}

add_action('wp_enqueue_scripts', 'aj_jquery_thickbox');

Now lets create the content

Here is an example of what we are trying to achieve:

Try out the thickbox and click here!

Don’t worry, its quite simple to achieve. The Thickbox codex page explains extra features that you may wish to include.

Here is the exact code to start up your own lightbox.

<div id="aj-content" style="display:none;">
     <p>
          Surprise, here is the hidden content!
     </p>
</div>

<a href="#TB_inline?width=600&height=550&inlineId=aj-content" class="thickbox">Try out the thickbox and click here!</a>

How to add in Colorbox JS instead?

As mentioned the second option is to add Colorbox.js. Place the JS and CSS file in your current theme’s folder and add the following code to functions.php.

add_action('wp_enqueue_scripts', 'aj_colorboxjs_scripts'); // initiate the function  

function aj_colorboxjs_scripts() {
wp_register_script ( 'colorbox-min' , get_stylesheet_directory_uri() . '/js/jquery.colorbox-min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'colorbox-min' );

// Commented out because you probably want to use the minified version of the script
//wp_register_script ( 'colorbox' , get_stylesheet_directory_uri() . '/js/jquery.colorbox.js', array( 'jquery' ), '1', true );
//wp_enqueue_script( 'colorbox' );

wp_register_style ('colorboxcss', get_stylesheet_directory_uri() . '/css/colorbox.css','', '1', 'all');
wp_enqueue_style( 'colorbox' );
}

Now add the script that will target the CSS and start up the Colorbox plugin. This can also be pasted into your functions.php.

// Add the script to your footer
add_action( 'genesis_after','ajtheme_colorboxjs' );

//Colorbox - a pretty lightbox for content
function ajtheme_colorboxjs() {
	?><script type="text/javascript">
var $s = jQuery.noConflict(); $s(document).ready(function(){
$s(".inline-form").colorbox({inline:true, width:"50%", escKey:true, onOpen: function() {
                $s('#cboxOverlay').height($s(document).height());
        }, overlayClose:true, onLoad: function() {
    $s('#cboxClose').remove();
}});
$s(".callbacks").colorbox({
				onOpen:function(){ alert('onOpen: colorbox is about to open'); },
				onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
				onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
				onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
				onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				//Example of preserving a JavaScript event for inline calls.
				$s("#cboxOverlay").click(function(){
				closeColorBox();
				});
				});
		</script><?php
}

Now add the following html in your theme (page, template or anywhere else)

With the following html we launch the lightbox in our theme. Notice that the above script targets the CSS ‘inline-form’ in our html below. Pretty easy and creative solution right?

<a class="inline-form" href="#inline_content"><p class="button">Launch Colorbox</p></a>

<div style="display:none">
<div id="inline_content" style="background:#fff;">
<p>This is the content that you will see in the lightbox</p>
</div>
</div>

Hope this helps you in your next WordPress project, as always feel free to leave a comment, I might be able to help.