Creating Different Post Views in WordPress Blogazine Style

Creating different layouts for articles or posts on wordpress like blogazine lovers do is quite interesting to try, although tutorial-webdesign.com is not a blogazine follower, but this time we will discuss a little about the basics of making it.

Different Layout Visualization
Image by Pingv

As you can see, the appearance of the article you are reading is different from the appearance of other articles on this website.

Try to compare with this: Making Youtube Videos as Website Background.

The differences are:

No header (logo)
The position of the content that is usually in the middle is now on the left, while the sidebar on the left moves to the middle.
The color of the top menu changes.
The sidebar color has also changed.
So how to make it? there are many ways to make it like that, some use plugins and some add or create their own scripts.

Start

On this occasion we will try manually, by adding a script, for that you need to change the function.php file a little in your wordpress theme folder.

Add the following script in wp-content/themes/theme_name/functions.php

add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
function custom_css_hooks() {
add_meta_box(‘custom_css’, ‘CSS For Post’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_css’, ‘CSS For Page’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_css_input() {
global $post;
echo ”;
echo ”.get_post_meta($post->ID,’_custom_css’,true) .”;
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST[‘custom_css’];
update_post_meta($post_id, ‘_custom_css’, $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ”;
endwhile; endif;
rewind_posts();
}
}
The script consists of 4 functions, of which 3 functions will be used to interact with the wordpress core, the function which we declare with add_action.

add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
custom_css_hooks & custom_css_input : to declare and add a metabox, here is a textarea with the name (CSS For Post) which will appear in every Post creation and (CSS For Post) which will appear in every Page creation.

save_custom_css: for the action of saving the results to the database.

insert_custom_css: to write the CSS that is inputted into the website header so that the display can change.

Results
The result is that a textarea will appear at the bottom when you write a post or page.

Textarea Image
The “CSS for Post” text area has appeared

How to use.

Please enter the css script to change your website in the CSS for Post or CSS for Pages, to change it, of course you must know what ID and Class are in the template used.

There we removed the header by adding display:none for the header
sidebar moves to the right by changing the float to float:right, while the content is added float:left.
And other settings, please explore yourself

firebug
firebug

To find out you can open the script in the template or use firebug to find out the ID or Class name used.

Other Feedback

to make the display 100% updated this way, and you have the intention to actually implement blogazine, you can clear the css for the purposes of setting up articles in style.css, and write the appearance for each post through the css column created (But yeah it takes time and effort).
Compress the css that will be entered first to reduce website speed.
Articles that can be used as references: The death of the boring blog post?
Hopefully useful, hopefully can eliminate boredom when blogging, greetings web development Indonesia.