The theme went for sale in Themeforest – and it did pretty well the first several months – but finally reached its non selling point. Today I’m selling this theme for a measly $10 (the .psd files are FREE and is a separate download). For this low price – its practically free! Read on to see why its a good deal:

homepage of eureka

Theme Features:

At first look, you will fall in love with Eureka’s balanced design. A solid black header with just enough room for your logo and page navigation. The large feature slider will sure get your message out: loud and clear. The sharp containers that house the posts and sidebars are classic and well crafted. You will notice the comments area, social buttons, icons and footer – all complete the design as part of the whole. Your visitors will love your website – and for that, will want your business. Give Eureka a try.

Adding it to a WordPress theme has its benefits as well. For one, the code stays with the theme. Anyone who uses it gets this effect automatically. Not to mention, it’s pretty easy to implement.

This article will walk you through how to add Lightbox into your WordPress themes. I’m also going to assume that you have created WordPress themes before, for you will need to know how to work with template files and such. Ready to get started? Let’s begin.

Grab Pretty Photo

There are many lighbox plugins out there. I choose one called Prettyphoto from no-margin-for-errors.com. Prettyphoto uses jQuery, and is quite extensible. But the main reasons why I chose it is because the animation is flawless and the design is awesome. Download the production version from this link

Extract the .zip file into your hard drive. Inside prettyPhoto_compressed_3.1.2 – you will find the following folders and files. Copy them according to below:

• prettyPhoto folder (from prettyPhoto_compressed_3.1.2\images) and place inside (yourtheme\images\)
• prettyPhoto.css (from prettyPhoto_compressed_3.1.2\css) and place inside your theme root folder
• jquery.prettyPhoto.js (from prettyPhoto_compressed_3.1.2\js) and place inside (yourtheme\scripts\)

Include the Scripts

First we need jQuery. There is a preferred way to include jQuery into our themes – that is to use the wp_enqueue_script function. Open functions.php and add the code below. *If your theme doesn’t have a functions.php file – go ahead and create one.

1
2
3
4

function insert_jquery(){
	wp_enqueue_script('jquery');
}
add_action('init', 'insert_jquery');

Note that this is the preferred way because since WordPress is already shipped with a bunch of scripts (including jQuery) – you might as well use them. It is also considered good practice because updating Worpdress will include these javascript libraries (and how often do you do that!)

Add the Prettyphoto script and css into your theme header.php file:

1
2

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>

Custom Code

Modify the code in prettyPhoto.css. This step is necessary so the path to the images for prettyPhoto is corrected according to your setup:

• open prettyPhoto.css
• CTRL + F (Find) all instances of “url(../”
• And replace with “url(” *There should be around 100 occurences
• Save the file

Again, this is due to the location of the images and the css file has changed from the example files from prettyPhoto. This ensures the images needed for our lightbox is functioning properly:

Open header.php – and add the following code:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">  
jQuery(document).ready(function($) {
   $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
	animationSpeed: 'normal', /* fast/slow/normal */
	padding: 40, /* padding for each side of the picture */
        opacity: 0.35, /* Value betwee 0 and 1 */
	showTitle: true /* true/false */			
	});
})
</script>

What the above code does is selecting all links with the href attribute that equals to anything ending in .jpeg, .jpg, .gif and .png, and applying the prettyPhoto() function to it. This means that any link tag that leads to an image (file extensions mentioned) will trigger prettyPhoto. The script is also enclosed inside a document ready event using a jQuery noConflict wrapper. This is to prevent any compatibility issues with other javascript libraries that maybe included with your theme.

I also went ahead and added some options such as the animation speed, padding and show title to our .prettyPhoto function. For additional customization options – refer to the no-margin-for-errors documentation.

Conclusion

If all goes well – you can test your work by clicking on an image that links to another image. This should launch the prettyPhoto code that we’ve just plugged in. You can also apply the same code to links with inline content, external files, youtube movies or other flash based content. Again, refer to prettyPhoto documentation.

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!

The Holy Grail

So I thought it was easy to have three columns, with both sidebars static widths; while the center column is the only one that expands according to the browser. Boy I was wrong – I couldn’t figure it out for the life of me! And through some serious searching I finally discovered “the Holy Grail” – from A List Apart. The funny thing is – I’m probably one of the last ones to find this “sacred” code. Thanks to Matthew Levine’s article – I achieved my layout.

Breadcrumbs, Buttons and CSS3

I started to implement my own breadcrumb function – but discovered Dimox’s solution – was far more complete. I needed a breadcrumb navigation that doesn’t require a plugin and Dimox did the job very well. Zurb’s Super Awesome buttons are what’s styling all the buttons in Maximus. You should notice the resemblance for each button – with only the base color that is different from one another.

Lastly, I’ve adopted quite a few CSS3 techniques from all over the net. From box shadows, text shadows and overlays – all contribute to the visual effects of Maximum.

Conclusion

I hope you find good use for Maximum. I did enjoy experimenting and discovering new ways of doing things. I imagine this type of theme would suit the serious content writers (ones who need all the real estate they can get). It may also be used for ecommerce, or “wiki” types of layouts – who knows. If you do decide to use it, don’t forget to leave your url in the comments section below! Happy Blogging!

Below is a screenshot of Rotary’s glorious homepage. The roundabout carousel sits right on the fold – with images that are pulled straight from your post thumbnails. Click to view the Rotary Demo page:

Custom Post Type

You like that carousel / slider in the home page? Well that is due to the amazing code known as the roundabout by Fred LeBlanc. You can easily change the contents of this carousel in two ways:

1) Using a custom post type

In the left hand side of the admin area you will notice a section called “Roundabouts”. Simply add a new roundabout and give it a title, some content and attach a “feature image”.

The images are automatically resized to the right dimensions. Also – you’re only allowed up to 5 roundabouts.

2) Change the static code

If you decide you don’t want to use the custom post type feature – you can simply change the HTML. Inside home.php you will see an unordered list with each item as follows:

1

<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/586x360.jpg" alt="Need Image Here" /></a><div class="hiddendesc">Need to Enter Image</div></li>

Simply replace the values of your images, title and link and you’re set to go.

The Navigation Menu

This by far is my favorite 3.0 feature – custom menus. It’s simply amazing. I’ve added the code to Rotary that lets you design the main navigation of the theme.

Simply drag and drop items to the menu builder and save.

Feature Images

Just like the roundabout items – all posts in this theme can have its own feature image. Simply use the “Set feature Image” option for each post:

This image will show as thumbnails in the archive pages, and a medium photo inside the single page template:

Conclusion

Truly by using the features above – you can utilize the power of WordPress 3.0 as well as turn your blog into a cool CMS. Give Rotary a spin – it’s cool, it works and it’s only $10! Please leave your questions and comments below.

So much for a name change. Nonetheless, Aparatus is packed with features and design delight that aims to tickle your innermost web mag fancy. I have included extensive theme options that will leave you not needing to touch a single line of HTML. I have cufonized fonts for the headings and the site logos – that you need not create your own. I have modified the WordPress loop so much that it covered almost all possible looping scenario. Last of all, Aparatus comes with four different stylesheets targeted to suit your color schema.

Updated Twitter Badges!

I received enough comments on the Twitter badge to say “Follow ON Twitter” as supposed to “Follow IN Twitter“. So here they are:

• Maroon Badge
• Blue Badge
• Green Badge
• Black Badge

Simply replace the existing badge image in the Theme’s images folder.

The Slide Show

As for many magazine styled websites – a slideshow is a must have. Thanks to JonDesign’s Smooth Gallery – which made this possible. The slideshow by default pulls your five latest posts. The loop then continues to present the remaining of your posts directly below. The theme options allow total exclusion of the slideshow, as well as automatic slide. You can also specify a specific category to be pulled into the slideshow – without ever duplicating the posts in the bottom. All while the default loop logic is still acknowledged and functional. What this means is that – the loop still recognizes the options you enter in WordPress admin – not just in the theme (i.e. number of posts to show, etc); in addition, the paging system (next page etc) still works and automatically hides the slideshow in the inner pages. Oh, I also re-styled the WP-Navi Plugin (the right way), by de registering it’s default stylesheet.

WP 2.9 Thumbnail Ready!

The images in the slideshow as well as the thumbnails per post can be set by using the new “set as thumbnail” feature in WP 2.9!. This supersedes the old school way of inserting “custom-fields” – but will still work with either! You can use the thumbnail feature or custom fields set to “image”.

Ads, Twitter, Widgets and Everything else

The sidebar comes with advertising blocks which you can set up in the theme options panel. When you enter your Twitter account in the options, this will dictate the @replies in the Tweet Me buttons, the big “Follow my Updates” in the header, as well as the last tweet in the sidebar. The popular posts and recent comments tabbed area are all non-plugin driven – which means the code is all inclusive with the theme, without needing to install a plugin. Lastly, the sidebar supports widgets, the comments are threaded, gravatar – ready, as well as suckerfished drop down menus for the categories in the header.

That’s Enough! Download Already!

To view a live preview of Aparatus – click here. You can purchase the theme for $10 through Paypal.

Don’t forget to check on PsPrint Online Printing for high quality printing services.

A number of leading designers have already dominated this WordPress premium themes market; quite notably: Woothemes, DIYThemes and StudioPress.

But amongst these big names you may have come across a more succinct, straightforward and classy premium theme designer – simply named “Elegant Themes“.

Who is Elegant Themes?

Elegant Themes is owned by a designer named Nick Roach. This means that all of the designs and code that is produced from Elegant Themes is from this mighty fellow. According to Nick:

I created this website to provide WordPress themes of quality and integrity. I craft my themes with a goal of simplicity and professionalism and strive to inject each design with a dose of modest elegance. I believe that your website is not just a tool, it is an integral part of your identity. My job is to respect each customer by providing attractive and userfriendly templates that will help you achieve your online goals.

What’s so special about Elegant Themes?

Quality over quantity. Elegant Themes is hardly a large collection – I mean, there’s only about 30 downloadable themes at the time of this writing. But note they are quite high quality. Check out some of them below:

Wooden

Very down to earth, classy and professionally done – this theme can transform your blog into a modern website wonder.

Lumin

Soothing to the eye with subtle textures and sharp, detailed accents – this theme is packed with visual amenities that scream WEB 2.0!

GrungeMag

Semi-magazine, semi-newspaper – beautiful textures, slider, thumbnails – simply stunning.

Evid

Create your own “Hulu” styled video website with this theme:

Deviant

The ultimate grunge look! Random page tears, crumpled paper, dirty textures – you want your blog to stand out from the crowd – this be the theme for you!

Like Nick said – “each design is injected with a dose of modest elegance”. With each theme you will find excellent color schema, superb use of typography, plenty of textures, just the right amount of Javascript, and above all – originality. The themes obviously took time to build.

You Can’t Beat 20 Bucks a Year!

I don’t think I can elaborate on this any further. $20 dollars a year gives you unlimited access to all of Elegant Themes. Whether you’re a blog owner, an entrepreneur, or even a web developer – you’ve already won by having this arsenal of elegant designs to beautify your websites; all for about the same price as a bucket of fried chicken. Head on over to Elegant Themes!

After choosing the theme you want to use, another important thing is to find cheap webhosting for your site.

What the heck are “Magic Quotes”

For those who know PHP, the language is designed to avoid conflicts in strings (mostly characters used in variables) through the use of escape sequences. Escape sequences are formed by providing a (“\”) backslash in front of characters such as double quotes, to convert them into a literal string. The people who wrote PHP wanted this to be an automated process, so they decided that all text passed through online forms are automatically escaped with a backslash. This is known as Magic Quotes. Although their intentions were good, it has caused more problems than fixes. According to the PHP.net: Magic Quotes are deprecated as of version 5.3 and will not be part of future versions.

WordPress Fix

Although you can disable Magic Quotes in your hosting server php.ini file, it won’t do me any good since I’m developing a theme to be released for public use. This means that users of my theme will have various server configurations and telling them to turn this feature off is simply not an option. Luckily, WordPress has adapted PHP.net’s function “stripslashes deep” – which disables Magic Quotes at runtime. All you need to do is paste the following code into your theme file and should take care of the issue:

1
2
3
4
5
6
7
8

<?php 
if ( get_magic_quotes_gpc() ) {
    $_POST      = array_map( 'stripslashes_deep', $_POST );
    $_GET       = array_map( 'stripslashes_deep', $_GET );
    $_COOKIE    = array_map( 'stripslashes_deep', $_COOKIE );
    $_REQUEST   = array_map( 'stripslashes_deep', $_REQUEST );
}
?>

The above code strips slashes when data arrives via $_POST, $_GET, $_COOKIE, and $_REQUEST methods. In my case, I’ve pasted this code inside my functions.php file which contain my theme options. This page alone will serve multiple textarea input fields which will allow special characters such as Google Analytics and AdSense code. Note that this can be used in any page with input fields such as a contact and RSVP forms.

BTW, Interested in different hosting options? Learn about the best cloud storage services with Peer1.

Note that you can “widgetize” almost any of your template files, but for the sake of this article, we will take a look at just the more common, single sidebar.

First of all – What are Widgets?

According to Automattic (the company behind WordPress), “they’re just things you can use to personalize your WordPress site without knowing HTML”. To elaborate further, widgets are like a fast way to plug in bits of code into your sidebar. Widgets are accessed via the admin panel, under “Appearance” > “Widgets”. Common widgets are Calendar, Meta, Recent Posts, the Tag Cloud and Text. Widgets are not to be confused with “plugins”. Although there are some plugins that become available as “Widgets” once you install them.

Why use Widgets?

For theme developers – it is almost a necessity for your theme to be widgetized. This means that you have to tailor your theme to non-savvy users to be able to customize your theme to use these small snippets of code without writing a bit of HMTL. It is a way to cater to their needs as well as expand and utilize the full capability of WordPress. Check out the screenshot below of the Widgets section from the admin panel:

Now consider the user of your theme doesn’t know any web development – doesn’t this functionality come in very handy? This is why widgetizing your themes is always a good idea.

Styling Your Widgetized Sidebar

The Container Approach:

I’m sure you’ve seen this kind of sidebar. It’s one where widgets are compartmentalized or “boxed”. May it be sharp squares, faded edges or even rounded corners – the container approach is definitely one of the more popular sidebar styles around. Take a look at a typical container for a widget:

As you can see, the entire container can be drawn up by just one DIV. This is what the “before_widget” and “after_widget” name-value pairs are for in your functions.php:

Note that declaring a “sidebar-column” div for the widget container – you are now able to style unordered list items, as well as their child elements. As with my example, I’ve designated bigger icons for the parent list-style property, and a smaller arrow button for the children.

Below are a couple of good example websites that use the container approach for their sidebars:

http://www.gomediazine.com

http://www.blurbia.com/blog

The Continuous Column Approach:

This approach preserves the notion of a sidebar being – just a real bar. May it be in the right side or the left, the continuous column sidebar remains classic, simple and if done right – timeless.

Take a look at the simplicity of this style:

In this case, all I really styled is the headings of each widget. This is what the function.php’s “before_title” and “after_title” comes in handy. I used a regular H3 tag, assigning just the right font style, sufficient padding and a tiny bottom-border image – and it’s ready to go.

As mentioned, the continuous column approach gives your sidebar that “clean” look. It is used by many news and magazine style blogs in the conservative end. Two popular websites that employ the continuous column approach are:

http://www.woothemes.com/blog/

http://daily.creattica.com/

Anything Goes:

Anything goes is exactly what it implies. It is very random, no compartments, borders or even visible patterns. Although it is still a column, there is no definite distinction where widgets start or end. Note that this can only be achieved by combining the “fewest similar” widgets, along with static elements. By “fewest similar” I mean widgets that are visually different from one another. For example: “Recent Posts”, “Archives” and “Categories” widgets are all rendered as lists.

Remember – you can play with static elements and combine them with the more dynamic widgets, to give your sidebar a more arbitrary look:

Take a look at these websites that have an “anything goes” style sidebar:

http://www.webdesignerwall.com/

http://www.dawghousedesignstudio.com/

What about you? What’s your take on styling sidebars and widgets?

Usage

Blue Rooster is ready to use out of the box. The standard blog template will work with or without assigning thumbnails to your posts. In order to use thumbnails – you would have to assign custom fields to your posts with name: “image“. To learn more about custom fields – check this link from the WordPress Codex. You DO NOT have to resize your images for the thumbnails, thanks to the Darren Hoyt for his TimThumb script which made this all possible. The thumbnails are also powered by jQuery: PrettyPhoto – which is a lightbox clone where the larger images are displayed when clicked. A link to the single post is also included with the larger image.

The Bonus Templates

If you want to use the slide show in the front page – just apply the template “template-home” to your home page. Then make this page the static page of your site. To customize the slide show – simply replace the images in the images folder. Note that there are two sets of images: the larger image and the bottom bar. The active state and non-active state of the bottom bar matches the larger image. The Testimonials section in the template are actual posts under a category: testimonials. Simply create this category and start creating posts under it. The testimonial author works as the title for this section.

The Photo Gallery page is as simple as applying “photo gallery” to a page. The images in this gallery are automatically populated from your custom field thumbnails. So in order for this to populate – you must use thumbnails in your post.

Other Stuff

A custom login form is built in the header which is also jQuery powered. Once logged in will give you quick access to the dashboard, as well as quick “Edit” links after each post. The single post page includes an author information which feeds information from your user profile and Gravatar. So to utilize this section – your user information and gravatar must be filled out. The comments section support threading and pagination.

How to add links inside the Slideshow

In the template file called “template-home.php” is a section called “rotate” (means a div with an id named “rotate”). Within this rotate section, is a series of empty divs that have different ids – namely: fragment-1, fragment-2 and fragment-3. Even though these fragments are empty – they are styled with a background image in the stylesheet – so they appear that they have a large image.

You can enter anything inside these fragments as you wish (text, other images and even links).

Save the template and view

Now it’s totally up to you to change the background image, to fit the new link. It is also up to you to change the “style” of the link – to make it into a button, a large image – whatever you wish.
As mentioned, these div fragments are empty – so you can add anything you want.

Visit PsPrint Online Printing to get the best deals in commercial printing!