Read this Post first to help set up your Breathe Theme.

This is the working site of my free Wordpress theme Breathe.   I have put a lot of time into the design and adding some features that I think make the site more functional and are the kinds of thing I wanted when I first started using Wordpress.  To make your theme work like this one, you will need to download and activate two plugins at least. “Get  the image” and “Multi Level Navigation“.

The Blog title and the Tag line is situated at the top of the page. Change these in your General Settings.

The top bar is a page directory.  All the pages will be listed here. There is however no support for child pages. Don’t worry as there is heaps of navigation below.

The main picture is 950px x 200px. It is called header.jpg and can be changed by making a new picture at these dimentions and uploading it to wp-content>themes>breathe>images.

The bottom navigation uses the Multi Level Navigation plugin which needs to be downloaded to make it work like this theme does. I have also changed the default CSS for this plugin. See the post that outlines what you need to do to intergrate this into your theme.

The main content on the front page and in the search page use the Plugin Get the image. If you choose not to download and use this its o.k. but it in the script if you want to use it.  This plugin takes the first picture for the relevant post. If there is no picture for the post it will insert a default image. Read the “changing the default thumbnail” post for more information. (removed in version1.7)

The Main page uses an excerpt call for the text.  The wordpress defaut is 55 words. If you want more get the plugin Advanced Excerpt. Set the plugin to 70 words and it ust gives a little more text on the front page.  The hitch is that if there is an image inserted into a post within the first 70 words it will be included on the front page and it upsets the design asthetics.  So just dont put a picture in the first paragraph.

The side bar is 300px wide.  It is big so it can handle long titles and even Google adsense ads.

The post pages have an Author section is taken from the User menu. Just add your information there and it will magically appear in each article you post.

Comments can be seen below. I have put in a couple of dummy ones. They also support Gravatars

This is what the 404 Error page looks like.

Do a search to view what the search page look like.

I think that is it. Hope it works for you.

Enjoy.

The header image is 950×200 pixels.

The header image can be located in the images folder within the breathe folder. It is called header.jpg

Alternatively if you have already added the theme to your wordpress it is now located at wp-content/themes/breathe/images

A comments count has been added to the front page.

I have removed the default thumbnail for posts without images, but it will still display images on posts that have images.

If you have made modifications to your Breathe theme and don’t want them over written the best way is to download the theme then upload the index.php, styles.css, search.php and functions.php files to over write the old files.  Also upload “comment-grey-bubble.png” into the images folder and that is it, you will have the latest version working for you.

Warning: Cannot modify header information – headers already sent by (output started at /hsphere/local/home/blah/yoursite.com/wp-content/themes/breathe/functions.php:21) in /hsphere/local/home/blah/yoursite.com/wp-includes/pluggable.php on line 850

If you have made changes to the Theme, these will be over written when you update, including the header.jpg.  This does not include the changes to the navigation plugin and therefore the navigation bar. If you would like to just fix this problem without updating the entire theme upload the functions.txt file. Rename this file functions.php and save it, then replace it with your FTP in the Breathe Theme.  Alternatively cut and paste this into your functions.php file through the admin.

Default Thumbnail

To make it so that double images are not shown on the front page put the first image after the first paragraph or at least 70 words into the a post.  This is because the except will show the first 70 words as I have set it up and will include an image if it is in the first 70 words.

In version 1.7 I disabled the default thumbnail.  You can reinstate it if you find this line of code in the index.php file

<?php if ( function_exists( 'get_the_image' ) ) { get_the_image(); } ?>

and replace it with this

<?php if( function_exists( 'get_the_image' ) ) get_the_image( array( 'default_image' => '../wp-content/themes/breathe/images/thumbnail.jpg')); ?>

Get the plugin (Multi Level Navigation) and activate it by following the directions with the plugin.

This plugin is particularly powerful in providing a navigation system that works in all browsers, looks good and is fully customisable.  By following the next few steps we will integrate it into the look and feel that compliments the Breathe Theme.

Lets get started.

Once it is activated your navigation will look like this as the default. Blue which does not fit this theme so here is how to modify it.

Go to Settings > Multi Level Navigation

Click on the appearance tab at the top of the page.

Highlight the CSS

Delete all.

Copy and Paste the below CSS back into the box.


#suckerfishnav {font-weight:bold; width:100%; margin:0 0 0px 0;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:40px;padding:0 ;margin:0; width:100%;}
#suckerfishnav a {display:block;color:#ffffff;text-decoration:none;text-transform: uppercase;padding:0px 0px 0px 15px;}
#suckerfishnav li {float:left;padding:0 0 0 0px;}
#suckerfishnav ul {position:absolute;left:-999em;height:auto; width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:1px solid #666666;}
#suckerfishnav li li {width:149px;border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {background:#dddddd;}

#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#ff0000;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {text-decoration:none;color:#ff0000;}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {text-decoration:none;}

Settings

Setting tab – First box Speed of fade in effect (drop down box) change to instant update options

Menu Contents

Menu Item #1 Home

Menu Item # 2 Categories (single dropdown)

Menu Item # 3 Archives Month (single dropdown)

Menu Item #4 Links with categories – single dropdown

Of course you can configure this anyway you like.

Firefox has Google Gears as an add on which interferes with Wordpress. By disabling Gears you will fix the problem. This is how you do it.

Step 1

Go to tools>options in the Firefox browser.

Step 2

Select the main option and click on manage Add ons.

Step 3

Click on the disable button.

Step 4

Shut down Firefox for the changes to take effect.  That is it…

Step 1

Using your FTP open the root directory. Download .htaccess and open it with

Step 2

Insert the following into your .htaccess file. If there is other commands which there most likely will be just under that is fine.

<IfModule mod_security.c>
SetEnvIfNoCase Content-Type
"^multipart/form-data;" "MODSEC_NOPOSTBUFFERING=Do not buffer file uploads"
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on No
</IfModule>

Step 3

Save  and upload the .htaccess file back into the root directory overwriting the original.

Result: Image upload should be successfully using Firefox/Windows with no errors.