3 Simple WordPress Theme Design Tips


While making the theme for Talk Web I had a few issues that I wanted to overcome so I thought to myself why not post them. The second tip is actually something I did for another blog rather than Talk Web but I think it is worthy of being included. I know lots of sites do “top 50” or “10 tips” but I didn’t want to make a huge post (I’m used to just posting a photo on my blog with a few paragraphs). These tips were too small to justify a post of their own so I decided to merge the 3. I hope they help someone.

Make a WordPress title H1 on home and search pages only

When I have made WordPress themes in the past one of the things that has perplexed me was how I could make my blog title have an h1 on the index page and search pages, but have a h2 on content pages. On content pages it is much nicer to have the post title tagged as h1 and you should only have one h1 tag at a time. Here is the simple solution that I have used in my header, but it could be used elsewhere in a WordPress theme:

<!--?php if ((is_home()) || (is_search())) { echo '
<h1>Talk Web | SEO, Blogging, Social Media & Web Technology Blog</h1>

' ; }
else { echo '
<h2>Talk Web | SEO, Blogging, Social Media & Web Technology Blog</h2>

'; }

It is worth noting that I have manually set my title tag rather than use

<!--?php the_title(); ?-->

Make a WordPress header image change with category

If you want the image in your header to change depending on the category on your WordPress blog here is how it can be done. This is the php that would go into the header:

<!--?php if ( is_category('blogging') ) { ;?--></pre>
<div id="headerimage-blogging"><!--?php } elseif ( is_category('seo') ){ ;?-->
<div id="headerimage-seo"><!--?php } elseif ( is_category('social-media') ){ ;?-->
<div id="headerimage-social-media"><!--?php } else { ;?-->
<div id="headerimage"></div>

The CSS to go with this would be:

#headerimage-blogging {width:960px;height:200px;margin:0 auto;background-image:url(images/blogging-header.jpg);background-repeat:no-repeat;}
#headerimage-seo{width:960px;height:200px;margin:0 auto;background-image:url(images/seo-header.jpg);background-repeat:no-repeat;}
#headerimage-social-media {width:960px;height:200px;margin:0 auto;background-image:url(images/social-media-header.jpg);background-repeat:no-repeat;}
#headerimage {width:960px;height:200px;margin:0 auto;background-image:url(images/header.jpg);background-repeat:no-repeat;}

The code can be expanded to cover many categories. Any that you haven’t configured will display the default image.

How to enable thumbnails in WordPress

wordpress search results with thumbnails

I like the way blogs such as Mashable & Stay on Search show thumbnails next to their post excerpts and wanted this for my search results. Here is how you do it. First of all you need to enable the function by adding this to your functions.php:

add_theme_support( 'post-thumbnails' );

If you want to specify the thumbnail size you can do so by using this instead:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );

Then you add this code to your WordPress theme template file, in my case this was search.php:

<!--?php if(has_post_thumbnail()) { the_post_thumbnail();}
else { echo '<img src="'.get_bloginfo(" alt="Talk Web Technology Blog Logo" ?-->'; }

What this code does is check to see if you have added a thumbnail to your post, if there isn’t one added it will display the default logo instead. To add the thumbnail to your post, click on the set featured image option. By default this is underneath the post tags option on the right of your admin panel on the add/edit post page. Then choose your image and click use as feature image and close the window, and that is it now enjoy your new thumbnails! You will of course have to style your theme with CSS to accommodate the new thumbnails. It is worth remembering to set the ALT text when you set a featured image as this can help with SEO.

That’s my tips for today. If you have any ideas content you would like to see on Talk Web feel free to contact me!

Post Comment