After many months of searching for a grand looking WordPress theme, I have finally found it – introducing the Michael Jules WordPress Theme, a combination of a magazine and a blog. You can view get the free theme here which comes with some basic instructions to set up the theme. You would have realised that this blog is based on this theme.

The download version comes with only the basic blog structure and you would need to set up the whole theme, like the one you see here. This post will guide you, in a step-by-step manner, on how to do this.

Header: The theme has a defaulted “Arthemia” logo which is an image file with the following codes in the header.php file (assessed through Design/Theme Editor):<a href=”<?php echo get_option(‘home’); ?>/”><img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/arthemia/images/logo.png” width=”177px” height=”39px” alt=”" /></a>. To change the logo, use your FTP program to place your new logo into the “wp content/theme/arthemia/ images” folder. You have to change the “logo.png” file name to reflect the file name of your new logo. At the same time, make sure you change the image width and height to follow the dimension of your new image file so that you do not get a distorted image.

The header also has a 468px by 60px image on the top right hand corner with the following codes (header.php file): <div class=”right”> <img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/arthemia/ images/ banners/ wide.jpg” alt=”" width=”468px” height=”60px” /></div>.

This image (see above) area is for you to put your Google Adsense codes or a banner link. To do this you need to put your banner link or Adsense codes in between the <div class=”right”>… </div> tags, overwriting the <img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/arthemia/ images/banners/wide.jpg” alt=”" width=”468px” height=”60px” /> codes.

Main Menu:

Every time you create a parent page, it will be shown as a menu item. Any sub pages which you link to a parent page will be listed as a drop down item when you hover your cursor over the menu link.

You can change the menu’s defaulted “HOME” wording to another wording of your choice by making the changes to the text (in bold as highlighted in the example below) in the header.php file. You can assess the file via the theme editor.

<div id=”navbar” class=”clearfloat”>
<ul id=”page-bar” class=”left clearfloat”>
<li><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>
<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>
</ul>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
</div>

Headline:

The post title and image are inserted by creating a normal post where you specify that the post belong to the “Headline” category. The image is inserted by adding a custom field into your post (read the theme author’s detailed instructions here .

You must be aware that you cannot add more than one post for the “Headline” category. If you want to add another post to this category, you have to take out the first post and put it, maybe to the featured post or other post categories.

To change the font type or size, you can make changes to the theme’s  stylesheet (style.css) (assess via Appearance/Editor):

#headline  div.title {
font-weight:bold;
font:2.4em Georgia;
letter-spacing:-0.05em;
display:block;
padding-bottom:5px;
}

Make whatever changes you want to the font type or size in the css codes highlighted above in bold.

Featured:

The featured image is inserted through a blog posting. The title link is actually the posting title under the “Featured” category. Your full posting appearing below the title link (Sock Rules as in this example) will make your featured box distorted because of its article length. To minimize the display length to just 3 or 4 lines, you need to place the <more> code at the place you want the text to end. To do this, you need to switch to the HTML mode instead of using the Visual mode. You may wish to add the “Read more…” just before the <more> code

Browse Categories:

The browse categories can be set by Adding a New Category via your Dashboard/Manage/Categories. The narrations under each browse category are actually the “Descriptions” of each post category. If you look at the theme template, there are only five Browse Categories shown here and you can display them in a particular order (from left to right) of your choice by the following codes found in the Main Index Template (assessed via the Dashboard/Design/Theme Editor).

<?php $display_categories = array(5,6,7,8,11); $i = 1;
foreach ($display_categories as $category) { ?>

In the above codes (in italics), the “array(5,6,7,8,11)” are the ID numbers of each post category. For example, the “array (5,” (post category ID no. 5) is the first category displayed on the left followed by post category ID no. 6. To get your ID number under each post category, go to Dashboard/Manage/ Categories. To you see the post category ID no. at the bottom left corner of your computer screen, move your mouse over each category title3.

Content Page:

The theme has a default five (5) post per content page. You may want to consider increasing the number of post per content page in the event that your blog has a long sidebar. To do this, open the Main Index Template (index.php) file and change the default number “5″ (highlighted in bold below)  to a higher number.

<?php
$page = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
query_posts(“cat=-25,-26&paged=$page&posts_per_page=5“); ?>

The images (according to categories) on the left hand side are inserted by creating a normal post where you specify that the post belong to a specified category. The image is inserted by adding a custom field into your post (read the theme author’s detailed instructions here. Please ensure that you select an image that is not less than 424 x 399 in size or else your image will be distorted.

Page Navigation boxes:

navi1

To put this navigation feature at the bottom of your posts, you need a navigation plugin. Go to the Lester Chan’s site to download the plugin. Unzip the folder and FTP the plugin to your WP plugin folder and activate the same.  Be careful not to change any of the following codes in the main index template (index.php) file (assess via the theme editor)  that comes with the Michael Jubel theme:

<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); }
else { ?>

to the following codes as suggested by the plugin usage instruction:

<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>

or else it will not work.

Advertisement (Top Sidebar):

sidebar

To put your advertisement or Google Adsense into this advertisement box, go to the theme editor and open the sidebar.php file. Enter your advertisement html codes or Google Adsense javascripts between the <div id=”sidebar”> and </div> as shown below:

<div id=”sidebar”>

(Inset your html or javascripts here)

</div>
<div id=”sidebar-top”>

You need to ensure that the height and width of the image or Google Adsense dimension is within 300px by 250px.

Sidebar:

sidebar11

The appearance of the above  sidebar is controlled by widgets. The widget has four boxes (sidebar top, sidebar left, sidebar right and sidebar bottom) as shown above in brackets. Using the widget functionality, you may decide to place text, categories, blogroll, tags or pages etc. in any of the four boxes.

Every time you create a page, WordPress will automatically display the page title on the top horizontal menu bar and the left sidebar. If you wish to hide the page title from the left sidebar, click here for the simple procedure.

Bottom Footer (recent posts, most commented and most viewed as in the theme sample):

The appearance of the footer is controlled by widgets. The widget has four columns (footer left, footer center and footer right). Again, you may decide to place text, categories, tags, recent posts, most commented or most viewed etc. in any of the four columns.

I hope the detailed explanation on how to set up the Michael Jubel theme is helpful.

If you like this post, please consider subscribing to this site’s RSS feed. You can also subscribe by email and any new posts will be sent directly to your inbox.


Tagged with: • •

Filed under: WP Tools

Like this post? Subscribe to my RSS feed and get loads more!