So what has Changed?

As you see from the demo, I’ve tried to preserve Aparatus’ original design. The few things that I changed is more for performance rather than visual. I went ahead and removed the Tweetmeme buttons in the archive pages – which greatly improved page loads. There was a horizontal scroll bar bug in the old version – which is now fixed.

The theme still utilizes Cufon – but only for select areas of the theme such as the Logo and the footer. The logo now has an etched and gradient look – which is a big enhancement. I also added some Google fonts – to the post and comments headings. A few CSS 3 code is also used to improve the presentation of the text a little bit more.

A new post thumbnail handling code is used. Both feature images and custom fields still work, it just handles the resizing better. The feature image also appears in the single post page – this is something many users have requested for.

The theme now supports the new WordPress menu system. You can now customize the menu according to your craziest “navi-wishes”.

Lastly, a smarter theme options is integrated. If you don’t enter a Twitter account – no button or feed will show in the theme. The same goes for the large ad button.

How to Use:

Installing the theme is just like any other WordPress theme. Simply go to the “Appearance” > “Install Themes” section in your admin panel. Click the “Upload” link – browse to the theme .zip file and “Install Now“.

Adding Post Thumbnails to your Posts:

To add images to your posts you can use the Post Thumbnail feature of WordPress. Simply go to the post in “Edit” mode. On the right side of the page – click on “Set Featured Image“:

This will trigger the image uploader. Upload your image and as soon as that’s done, click the “Use as Featured Image” link:

Note that you should keep the file sizes to a smaller size. The resizing script has a maximum size limit.

How to Use the Slideshow:

The slideshow automatically pulls your most recent posts (5 maximum). You can change this to pull from a specific category by going to “Appearance” > “Aparatus Options” and putting the category slug in the field: “Category Name for the Content Slider“. You can also take out the slideshow or choose to not automatically slide – by checking the appropriate boxes in the theme options.

Also, if you see the slider with the “Oops…Looks like” message (shown below) – that means you haven’t assigned a post thumbnail to your post. Read the section above called “Adding Post Thumbnails to your Posts“.

How to insert a Photo Gallery:

Adding a photo gallery into Aparatus is as easy as pie. Simply go to the post / page you want in “Edit” mode and click on the image uploader. Navigate to your local directory and highlight the images you want and click “Open“.

As soon as the images upload, click on “Save Changes” and additional settings will show. Select your options and click “Insert Gallery“.

Update your post / page and preview it. You should see your gallery in place.

How to Customize the Navigation Menu:

Go to “Appearance” > “Menus” and start by creating a new menu. Enter a menu name and click “Create“.

This will create a blank menu panel in the right side of the page. The idea is to select categories, pages or custom links from the left side, click the “Add to Menu” button – and it will appear on the menu panel in the right. In this panel, you can drag and drop the links so you can design the menu hierarchy. Links that are staggered underneath become the drop down links from the respective parent – you get the drift.

Once the menu is done – hit “Save Menu” and in the top most left column box called “Theme Locations“, select the menu you just created from the drop down called “Header Menu”. Click “Save” and view your website. You menu should now be in place.

Switching Stylesheets

Aparatus comes with 4 different color styles – also known as stylesheets. Go to “Appearance” > “Aparatus Options” and in the top most section is a drop down called “Style Sheet”. Select Maroon, Black, Blue or Green and “Save Changes“.

Adding the Twitter Badge and Latest Tweet:

Still in the theme options, right underneath the Style Sheet drop down, is the Twitter account field. Enter your Twitter user name in this field.

Save your changes and view your website. You should see a nice Twitter Badge in the Header – and your latest Tweet in the sidebar area.

Advertising Blocks:

You can ad advertising blocks in the sidebar area right in the theme options. You can do 1 large 300 x 250, and 4 small 125 x 125 squares. Go to the theme options page – and see the “Advertising Blocks” area. Enter the image source of the ad (where the image is coming from), and the destination (where the link goes when the image is clicked).

Save your changes and view your site. You should see the ad blocks in the sidebar nicely lined up:

Frequently Asked Questions:

I’ve gathered a several most asked questions in regards to Aparatus. Read below to see if your question is one of them.

Modify the Twitter Badge Image

Many want to modify the large Twitter Badge in the header. Please note that the font I’ve used in this badge is called – League Gothic, and you need to download that in your Fonts folder to twiddle the .psd file.

Slideshow is not showing images

If you’re using custom fields – make sure you have GD library installed. You also have to make sure that the cache folder inside scripts (themes/aparatus/scripts/cache) is fully writeable. In addition, you need to enter at least a couple of posts to kick start the slideshow.

How To make posts in the slideshow appear below the slideshow

By default posts inside the slideshow does not duplicate underneath – where the rest of the post are. Many like it this way – but some have asked how to make them show below as well. To do this look for this line of code inside gallery.php and delete it:

$saved_ids[] = get_the_ID();

How to fill the Author Box Information

The “About the Author” box right in the single posts page grabs information from your profile. Go to “Users” > “Your Profile”, under Biographical Info – enter your stuff there.

The Header Text takes too long to convert into the logo

Sometimes Cufon takes a bit of time to do its thing. Aparatus uses this to use your site name and automatically convert it into a decent looking logo. But sometimes – due to client browser constraints, it performs poorly.

For this issue it would probably best to use an image for your logo. If you really like how it looks with Cufon – just take a screenshot and convert the image into a jpeg and replace it inside the header.php.

Conclusion:

Enough of the FAQ! Download already! I hope you enjoy this theme as much I’ve seen it in many blogs. If you want to visit the original release post, click here. Otherwise, leave your comments and questions below. Happy blogging!

Let it be known that is is one of my older themes that I once had for sale in Themeforest. It did quite well in the beginning. Although I noticed the decline in sales as time passed, therefore I decided to give it away for free.

So what’s so special about it?

Monte Cristo is clean, sharp and minimal. Yet the subtle graphic effects give it a bit of modernity and heightened class. I especially like this theme because it kind of reminds me of the older style of web pages – with the borders, and the “page-peel” effect (which was quite big a couple of years ago). It comes with an options page where you can tweak the slideshow settings, switch stylesheets etc. It also comes with an alternate homepage template, as well as a “portfolio” page. Read my old sales pitch page for more details.

Creative Commons Who?

I’ve changed all my giveaways to have the Attribution Type of Creative Commons licensing model. What this means is that you can use the theme however you want – as long as you leave my credits in the footer. *But if you REALLY must take off the credits in the footer (i.e. you’re installing it for a client website): contact me – we may be able to work something out (hint: a small donation of some sort).

Conclusion

So go ahead, install Monte Cristo and have a blast. I’ve tested the theme to run on WP 3.0 and all major browsers. Also, make sure you read the “ReadMe.doc” file in the theme folder for additional instructions. Lastly, keep an eye out for more of my freebies. I shall be releasing more real soon!

Note: Since I created the theme almost a year ago, it doesn’t utilize the newer features of WordPress 3.0 such as post feature images, custom post types and custom menus.

This tutorial will show you how to create a simple style switcher from your themes options panel. It will have a single drop down list with all the available styles to pick from. Once saved – your theme will switch to the selected style. Ready to get started – let’s begin:

Part 1 – Set up functions.php

First thing you need is a functions.php file. A functions file is an optional “plugin” type of file you can include in your theme directory folder. One of its’ purpose is to setup administration options for your theme – which is exactly what we’re doing. Create a file and name it “functions.php” and paste the code below. Note that you need to change variables that define your theme name ($themename) and the short name ($shortname) to match your themes:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php 
 
$themename = "My Sweet Theme";
$shortname = "mst";
$options = array (
array( "name" => "Style Sheet",
	"desc" => "Enter the Style Sheet you would like to use for Sweet Ass Theme",
	"id" => $shortname."_style_sheet",
	"type" => "select",
	"options" => array("default", "green", "blue", "yellow"), 
	"std" => "default"),
);
?>

The above code initializes your theme options structure. First it defines several variables, including a multi-dimensional array (which will become our drop down list containing the four selectable options that will dictate our style sheets). Next is to copy the code below. This code loops through each iteration of the array we declared previously. It assigns a type of form field, displays labels and applies the correct descriptions etc. It also includes several functions that saves the form data, resets information and displays status messages etc. It’s a wee bit technical – so its better if we simply copy and paste the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

 
<?php
function mytheme_add_admin() {
 
global $themename, $shortname, $options;
 
if ( $_GET['page'] == basename(__FILE__) ) {
 
if ( 'save' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
 
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
 
header("Location: themes.php?page=functions.php&saved=true");
die;
 
} else if( 'reset' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
delete_option( $value['id'] ); }
 
header("Location: themes.php?page=functions.php&reset=true");
die;
 
}
}
 
add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
 
}
 
function mytheme_admin() {
 
global $themename, $shortname, $options;
 
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
 
?>
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
 
<form method="post">
 
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
 
case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
 
<?php break;
 
case "close":
?>
 
</table><br />
 
<?php break;
 
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td valign="top" colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
 
<!--custom-->
 
 
<?php break; 
case "sub-title":
?>
<h3 style="font-family:Georgia,'Times New Roman',Times,serif; padding-left:8px;"><?php echo $value['name']; ?></h3> 
<!--end-of-custom-->
 
 
<?php break;
 
case 'text':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php break;
 
}
}
?>
 
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
 
<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

Test out your theme options by going under the “Appearance” section > “Your Theme Name Options” tab. You will see the drop down list with the selectors already in place. Once you hit “Save Changes” – it saves your data. While clicking “Reset” sets it back to the default selector. We also see nice status messages appear on top each time we update.

Part 2 – Create the Style Sheets

Create four .css files that correspond to the drop down list selections we defined in our functions.php. The names do not have to exactly match the selectors (but is wise to have some meaningful relation to the names). Save these four files in the root directory of your theme:

style.css – this style sheet is for a black background page with white colored fonts.

1
2

/* CSS Document */
body {background:#000000; color:#FFFFFF;}

green.css – this style sheet is for a green background page with white colored fonts.

1
2

/* CSS Document */
body {background:#3bae09; color:#FFFFFF;}

blue.css – this style sheet is for a blue background page with white colored fonts.

1
2

/* CSS Document */
body {background:#038aba; color:#FFFFFF;}

yellow.css – this style sheet is for… you get the picture.

1
2

/* CSS Document */
body {background:#f6f658; color:#333333;}

Part 3 – The Switch Statement

Now that we have our options working in the back end, and we have our four style sheets sitting in the root folder waiting to be called, all we need now is a way to flip the style sheets in our header file. We achieve this by using a standard switch statement. A switch statement in php is an alternative to the the “if…else” statement. It uses the case keyword which we use to match our selectors to execute a statement that calls the appropriate style sheet. In the default header.php file – look for the line of code below and delete it:

1

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

This is the standard call for the default style.css file which we no longer need. Next, paste the code below inside your header.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
	global $options;
	foreach ($options as $value) {
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
	}
	?>			
	<?php switch ($mst_style_sheet) {
		 case "default":?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php break; ?>	
	<?php case "green":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/green.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "blue":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blue.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "yellow":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/yellow.css" type="text/css" media="screen" />
	<?php break; ?>	
	<?php }?>

The above code is quite self explanatory. First it grabs whichever values we’ve stored in our theme options. Second – is the switch statement for our drop down list, followed by cases for each entry – with its unique statement calling the style sheets.

Now if you go back to your style switcher and select “blue” – your theme style should switch to blue – and so on and so forth.

You can have as many styles as you wish to integrate in your options. As well as the amount of customization in the actual .css files is completely up to you. You can download the source files from this link – simply add these files in your theme folder and change some values – and your theme will instantly have it’s own style switcher.

Features

The slider in the home page templates are dynamic. Meaning – they are actual posts in your blog that you set in a specified category (i.e. feature) – so they show up in the slider. You can set it to run automatically and are allowed up to eight slides. The slider uses CSSGlobe’s “easy slider“. All images that link to other images automatically loads “FancyZoom” – which which is the amazing javascript zooming effect you see in many modern websites. Monte Cristo also comes with four different “characters” or color schemes: Jacopo is the gray and burgundy guy, Danglars swaggers in brown and taupe, Mondego likes it purple and green while Dantes is different shades of blue.

Why Friendly?

Monte Cristo has a built in options panel where you can set your preferences. Friendly because this way – you don’t have to know HTML, or Javascript to tweak the code. You can set which character you want from the options panel, set the slider categories, automatic or not, plugin your logo files – just about all that you need to customize Monte Cristo to fit your website.

Why Buy?

Monte Cristo is up on sale at ThemeForest.net for a measly $25.00. You can check out the live demo from this link. Why buy if I have been giving away stuff for free? Oh I don’t know – maybe because since I spent a whole lot of time making this theme that I figured I might as well try to make money off of it. Maybe since I give away free support once you purchase is another reason. Or maybe if I make enough money from this that I can now spend more time with my son – teach him not to say bad words like “what the heck“. Of course, its completely up to you.

Updated to Version 1.3 – Drop Down List Support for the Page Navigation!

For those of you who have asked for a drop down list for sub pages – the update is here. I will be glad to send you the update files if you contact me. If you already have Monte Cristo running and have made some edits to the css files – contact me, and I will send you the code to paste in the css files.

Get the Updated Files Here!