WordPressGarage.com

Hard-coding an SEO friendly title in the WordPress header file

The title I am referring to here is the title that appears in the top bar of your browser, and is in betweeen <title></title> tags in your code. Apparently, to make it more SEO friendly, the title of the post or article should appear before the title of your blog, but generally themes have it programmed the other way around.

You can switch it through the use of plugins, but if you want to avoid using another plugin you can fix this in the header.php file. Find the code that starts with <title>, and replace what is currently there with this:

<title><?php if ( is_single() ) { ?> <?php wp_title(''); ?> &raquo; <?php } ?><?php bloginfo('name'); ?></title>

This tells WordPress that if the page is not single, the name of the blog will appear only. This is for the homepage. If the page is single, i.e. a single post page, then the name of the post will appear and then the blog title. So, for example, a post on WordPressGarage would have the following title:

Yet another way to feed your facebook obsession » WordPressGarage

Posted in Code Snippets | Tags: header, title | 4 Comments »

Create Flash header or slideshow on WordPress easily with Flashfader plugin

My Flash skills are non-existent, so when a client requested some kind of Flash header where the images fade out and in, I was happy that I remembered that I had once come a across a plugin that creates Flash slideshows.

Flashfader plugin lets you easily create Flash slideshows and place them almost anywhere on your blog.

How to use Flashfader:

1. Extract the files and upload them to the plugins directory. There are two files: flashfader.php and flashfader.swf. Both have to be in the root directory of plugins, and not in their own folder.
2. Install Flashfader.
3. Go to Manage > Flashfader. The following screen appears:
   
4. Here you can customize the appearance of the slideshow:
   1. Width/Height: define the width and height of the slideshow. If you upload pictures that are bigger or smaller than this size, they will be automatically edited to the size you define here. So if you want to have complete control over how your pictures look in the slideshow, select and width and height, enter them here, and make sure all your images are exactly that size.
   2. Background color: This is the color that will appear before your first image fades in.
   3. Fade Order: your images can either appear in a selected order, or randomly. Enter 1 if you want your images to appear in the order you define. Enter 2 if you want the images to appear randomly.
   4. Image display time: This is how long each image appears for before it fades out.
   5. Imag2image fade time: This is how long the fade between pictures takes.
   6. XHTML-valid flash embed: You can state whether you want the embed code to be XHTML-compliant. I found that it worked fine when XHTML-compliant.
5. Save your settings.
6. In the next part of the screen, you upload the images you want to appear in the slideshow.
   
7. If you set the Fade Order in step 3 above to sequential, you do not need to worry about the first column of numbers. If you did select to have a sequential slideshow, you can easily change the order by entering numbers in the middle column in the above picture.
8. Save your work.

You now have a completed Flash slideshow. But how do we get it to appear in the header of the site, or in any other part.

Integrating your new Flash show in your site

Posted in Plugins | Tags: Flash, header | 8 Comments »

Random Header Images without Javascript

Many blogs use random header images in their header so that every time a page is reloaded, a new image appears in the header of the site. This adds interest and variation for readers.

To accomplish this, most sites use a combination of CSS and Javascript. Rob Griffith at The Robservatory relates how he set up his family’s site to have rotating header images without using any Javascript. His method involves

• making a minor change to the CSS that calls the header image
• creating a folder specifically for header images
• naming the images sequentially (i.e. header1.jpg, header2.jpg)
• and adding a few lines to header.php.

Random header images for WordPress>>

Posted in Tips | Tags: header, Images | No Comments »