Wordpress Theme Development Presents: Elements of SEO

April 22, 2008 // Drew Stauffer

Wordpress themes are an easy way to change the entire look of your website. Free wordpress themes are even better. Every time I develop a new theme for public use I end up using it myself. What can I say, I get too attached.

But as the saying goes, “If you love something, set it free.” So, I’ve decided to release my Elements of SEO theme.

Elements of SEO is a fully customizable (but why would you want to) wordpress theme developed by me, Drew Stauffer. Thinking mainly of heavily content driven sites that usually don’t have that many exciting elements, I designed Elements of SEO to provide a bit of pizzazz while still maintaining the contextual integrity. With a primary focus on typography, Elements of SEO is clean, white, and fresh.

As a bonus along with the regular theme files I have also included a zipped file of some recommended plugins that I use. All of the plugins have been tested on this theme and are ready to go.

You can download Elements of SEO right now and begin using it immediately or you can read a little more about it on my wordpress themes page.

** UPDATE 07/08/08:
There were a few bugs with the view of the theme in the users dashboard after the initial launch, but everything is running smoothly now.

Technorati Tags: Wordpress, Wordpress themes, Wordpress development, Elements of SEO

Don't forget to subscribe to the Alibi Productions feed!

Speak your mind

83 responses so far ↓

1 owponlinewebpromotion // Apr 22, 2008 at 12:50 pm

Online promotion is the method which we use in all aspects of internet marketing to generate response from your target market. Online marketing can reduce your pay on ROI.You would experience a drastic change at the internet marketing when compared to the previous work. It can even save your money and time.
2 runescape gp // Apr 27, 2008 at 2:42 am

why would you
3 Runescape Powerleveling // Apr 27, 2008 at 2:42 am

maintaining the contextual integrity. With a primary focus on typography, Elements of SEO is clean, white, and fresh.
4 Jaimee // May 5, 2008 at 6:36 pm

Very nice! Perfect for my upcoming project!
5 Drew Stauffer // May 6, 2008 at 1:09 am

@Jaimee

Thanks for the kind words. I’m glad you like it. Let me know if you have any questions about anything.
6 John King // Jun 18, 2008 at 4:30 am

nice drew! I love this blog template and am a sucker for good typography. this site is looking great as well.
I also liked the writers block blog.
I would love to read some sort of a rating system for new widgets & plug-ins or the latest rad plug-in.
7 Drew Stauffer // Jun 18, 2008 at 3:02 pm

@John

Thanks man. In my off time I’ve definitely been enjoying designing more Wordpress templates. I should hopefully have a few more coming out soon.
8 David Potter // Jun 27, 2008 at 4:40 pm

I really like the appearance of this theme. One problem I noticed is that when viewing Internet Explorer (v7), the text is butted up against the left border with no space. It displays fine on Firefox. Have you seen this? Could you check it out and provide a fix?

Thanks,
David
9 Drew Stauffer // Jun 27, 2008 at 5:56 pm

@David

I’d be glad to provide a fix for it but I’m not quite sure which part your referring to.

Any chance you could provide a screen shot. My IE7 and FF versions look the same on my monitors and I want to make sure I’m fixing the right thing. You can email the screen shot to me @ drew [at] alibiproductions.com

Here is the demo version if you need it:
http://elementsofseo.com/
10 David Potter // Jun 27, 2008 at 6:04 pm

Ah, I see what the problem is. When you set the width of the browser window to exactly the width required to eliminate the horizontal scroll bar, there is no space on either side. It turns out this happens on IE7 and Firefox. Sorry for the confusion. Let me know if you’d still like a screenshot.
11 Drew Stauffer // Jun 27, 2008 at 6:19 pm

@David

When I designed the theme, I was banking on the fact that users always adjust their browser windows to make them larger and smaller and I was thinking that users would always make their window large enough to fit all the content.

Once you adjust your browser window to display all the content (plus a little more space) then nothing sits right on the edge. Does that make sense?
12 David Potter // Jun 27, 2008 at 6:22 pm

Yes, I see that. The problem I ran into is that my browser window happened to be exactly at that width. I tend to prefer not to change my browser width from site to site. I think it would make it look a little more professional if there was always some space on each side to avoid the text looking like it runs right up against the border.

It’s probably an easy thing for me to change in the CSS, so if I end up deploying this theme, I’ll probably make that change. Thanks for discussing this with me, though. Your responsiveness is very refreshing
13 Drew Stauffer // Jun 27, 2008 at 6:25 pm

@David

Well keep me posted. If by chance you want to use the theme but can’t make the fix I’ll gladly adjust one custom for you
14 Andy Howard // Jun 27, 2008 at 10:55 pm

Very nice theme, perfect for text-focused blogs. Great work.
15 Drew Stauffer // Jun 28, 2008 at 12:36 am

@Andy

Thanks a lot Andy
16 Manu // Jul 1, 2008 at 4:51 pm

Thanks Drew for the nice theme. Only issue is that why is the Theme Preview page showing the entire CSS besides the screenshot of the theme, rather than just the author info as the case should be? See it here.
17 Drew Stauffer // Jul 1, 2008 at 7:10 pm

@Manu

Thank you for bringing this to my attention. I will begin troubleshooting it immediately.

I’ll let you know as soon as it’s ready again.
18 Manu // Jul 1, 2008 at 7:48 pm

Great! Looking forward to the update.

One more thing, I set a background color for left and right sidebar, but its only displaying only till the point the sidebar content is displaying. How do I make it appear for the entire length of the page?

I’m currently using the theme so you may have a look. Sorry not too good with CSS so don’t know what to change.
19 letrodectus // Jul 4, 2008 at 12:52 pm

this is a very nice theme! its exactly what I’ve been looking for in a past few weeks. Thanks a lot for developing the theme, and more over - making it free
20 Drew Stauffer // Jul 9, 2008 at 1:05 am

UPDATE

All theme bugs have been fixed and everything is working smoothly.
23 Ext-perience // Aug 18, 2008 at 10:45 am

Hey Drew,
Good on you for releasing this awesome theme to the public, many thanks for that. I’m using it on my blog. I think it looks great! Well done man!

Cheers
James
24 Drew Stauffer // Aug 18, 2008 at 12:42 pm

@James

Thanks a lot, I appreciate the kind words.
25 Brian // Aug 26, 2008 at 11:43 am

Hey.
First of all great wordpress theme….it’s really great and so much better than any of the others I’ve seen and tried.

One issue I appear to be having is that when I apply some widgets that are not the defaults I get some errors created when I try to validate the xhtml. I was using the orininal them but updated to 1.2 as I thought this was corrected in this version but I ams still getting the errors for http://www.kybes.com

Any help would be greatly appreciated. Love your website by the way….great artivles.

Thanks

Brian
26 Drew Stauffer // Aug 26, 2008 at 1:13 pm

@ Brian

Let me take a look and see what I can find. I’ll email you back.
28 cat // Aug 28, 2008 at 5:48 pm

Love this theme, but I’d love it even more if it were 2 columns (with wider main column). Is there a reasonably easy way to accomplish this?
29 Drew Stauffer // Aug 29, 2008 at 10:20 pm

@cat

Sadly there isn’t an easy way. The only thing I could suggest would be to find a two column theme and play with the styles.
30 andi // Sep 1, 2008 at 8:29 am

what do i have to do if i want the author of the article to appear in the footer of the article (where “categories” is)?
31 Drew Stauffer // Sep 2, 2008 at 1:36 pm

@andi

Currently I don’t think the theme supports the author tag, but it’s very easy to add.

I would look in the Wordpress Codex for the author tag, I think its only 1 line of php.

Place that line where ever you want the authors name to display and you should be all set.
32 andyh // Sep 5, 2008 at 12:58 am

how do I edit main index.php

I am trying to implement google adsense code on the footer and header. when I go to an article page, i can see the banners.

but it appears I can’t edit index.php via wordpress theme editor(must be read-only)? as none of the changes get reflected on my main page
33 Drew Stauffer // Sep 5, 2008 at 1:31 am

@andyh

If you want to edit the index.php file via the theme editor you have to make the files writable on your server. Check out this article.
http://codex.wordpress.org/Changing_File_Permissions
34 Paula Schramm // Sep 18, 2008 at 3:54 pm

I just wanted to say, how much I love your theme. It is absolutely well written, easily tweaked and elegant. Thanks so much.
35 Drew Stauffer // Sep 18, 2008 at 5:05 pm

@Paula

Thanks a lot. I worked pretty hard on it and it seems like its getting a good response
36 SEO Firm // Sep 24, 2008 at 10:26 am

It’s good looking and professional design, there are so many duplicate themes on the web, but i can say, i am watching this for very first time.
37 Web Development India // Sep 24, 2008 at 10:27 am

It’s such a good looking and professional theme. Looks so simple but very attractive.
38 Daniele // Oct 2, 2008 at 11:11 am

Love this theme, very much!

But I want try to change the with of the search form, and remove the “search” button, if it’s possible… where i can find the code of the search form
39 Daniele // Oct 2, 2008 at 12:41 pm

how can I change the “search form” with and “search buton” text?

please help me

DAN
40 Drew Stauffer // Oct 2, 2008 at 1:02 pm

@ Daniele

You can adjust the search form width and text in the r_sidebar.php page and you also might want to look at the style.css.

Depending on what you want to do, you might have to open both, but I would start with the r_sidebar.php file.
41 Kath // Oct 9, 2008 at 5:23 pm

I’ve just found this theme and I love it! Just one thing - is it possible to have comments on the pages rather than just the index page?
42 Kath // Oct 13, 2008 at 2:51 pm

Me again … I’m having trouble getting images to right-align. Is this something I can fix myself in the css or is there a problem?
43 Drew Stauffer // Oct 13, 2008 at 5:57 pm

@Kath

The images should be able to align to the left, right and center. When you insert your image there should be class adjustment box that you can set it to what ever side you want.

If you can’t get it, can you send me a link so I can see what’s going on.

Did you ever get comments on pages? If not, Check out this post.

All you need to do is add one line to the page.php file
44 Steve // Dec 1, 2008 at 9:21 pm

Hello,

Thank you for your excellent design.

I have one quick question regarding widgets in my 2nd sidebar.

The final 2 widgets are not editable anymore, I can’t delete them or change them in any way. Any new ones I add are the same way.

What did I do? How shall I fix it?

Thank you

Steve

brooklynstreetart.com
45 Sanjay Nair // Dec 2, 2008 at 11:45 am

Hi Drew,

Great theme. Loved it the moment I saw it first! But I am a newbie to PHP and wordpress. Infact my knowledge is as good as zilch! I am well versed with HTML coding though! So…I have a lot of questions.

Number 1: I am trying to add links to the links section at the top right of the page (header). But the coding seems to be in PHP and new links come up as new List items in an unnumbered list along with an About link next to it.

Number 2: I am trying to add a small avataar of mine in the about section in the right sidebar. I uploaded the pic and added the img tag right below the H2. But the image isnt displayed.

Number 3: I wish to change the font and the font size in the header (the H3 tag masthead). But the top half of it dissapears as if there is a border there.

Whew! I know I am new but I am trying and working on it. Any help would be greatly appreciated.

Warm Regards,
Sanjay Nair
46 Drew Stauffer // Dec 2, 2008 at 5:49 pm

@Sanjay

I’m glad you like my theme. Let me try and answer some of your questions.

1. all nav items will be controlled in the admin panel (dashboard). it looks like you’ve added some links so i’m guessing you figured this out.

2. make sure with your image that it is the correct path….domain.com/wp-content/themes/elements-of-seo/images/image.jpg. obviously this path is just an example but you get the point.

3. all sizes for fonts are controlled in the styles.css file. not totally sure about what you mean in your problem above.

Hope this helps, let me know.
47 Sanjay Nair // Dec 3, 2008 at 5:09 am

Hi Steve.

Thanks for the reply. Yeah, I tried and figured out the first two….Still cant figure out the third one though….I tried to modify the style.css (the H1 tag for the masthead)…I changed the font family and the fonts, but they dont reflect on the site! Am still learning! So…will keep u busy with questions! [:)] Thanks for the help again!
48 Sanjay Nair // Dec 3, 2008 at 5:11 am

Who’s Steve? I wonder where that came from!

Sorry Drew!
49 Sanjay Nair // Dec 4, 2008 at 11:32 am

Hi Drew,

I am trying to customize the links that are displayed in the header. I edited the tag in the header. This is how it looks right now.

<a href=”">Home

But it doesnt seem to work! I also tried the &exclude command! But even that doesnt work? Any help?

Cheers,
Sanjay Nair
50 Drew Stauffer // Dec 4, 2008 at 2:21 pm

@Sanjay

So looking at your email you sent me and the comment above, I’m guessing that your only trying to show a few pages in the main nav at the top? Does that sound right?

You can try this link, Include pages in links

I’m not 100% sure of what your trying to achieve so I’m a little foggy on suggestions.

If you email exactly what you want to do I can email you back with how to do it.
51 Sanjay Nair // Dec 4, 2008 at 4:28 pm

Yes Drew. That’s right. I am trying to show only a few pages on that nav. I did try to follow the instructions on that page (http://codex.wordpress.org/Template_Tags/wp_list_pages#Include_Pages_in_List”) prior to sending you the email.

I also noticed that there are 3 different header files (header, my header and myheader 1). Is the nav related to these other files also?
52 Drew Stauffer // Dec 5, 2008 at 3:36 am

@Sanjay

Here is what i use to only display a few pages in the nav. get rid of everything else nav related and only put this code inside a [ul] tag:
< ?php wp_list_pages('include=136,2,29,10,13,131,16&title_li=&depth=1'); ?>

and yes, you’ll need to change the navigation in all 3 header files.
53 Sanjay Nair // Dec 5, 2008 at 6:54 am

It worked! Thanks a lot drew! Will keep you updated on the status!

Thanks again!
54 Will Sullivan // Dec 8, 2008 at 8:43 pm

Hi, Drew. Thanks for making this elegant theme available. It’s wonderful. I am new to development and have a few questions about customizing the design. My apologies in advance if these answers are available elsewhere.

1. I’m trying to add a bit of space between the Blog title and the description in order to increase the size of the title and not have the text overlap into the description. Is there a way to easily add a bit of space, here?

2. I’d like to add an image to the header, but I’m not entirely clear where this goes in the masthead.

3. I’d like to change the hover color of the recently written articles section in the first sidebar.

Sorry for the basic questions and my thanks again for any time you have to spare. I’ve browsed hundreds upon hundreds of themes and this is bar far my favorite.

Regards,
Will
55 Drew Stauffer // Dec 10, 2008 at 5:01 pm

@Will Sullivan

Thanks for the kind words. I’m glad you like the theme.

1. In your header space question…look for the masthead h1 in the styles.css file and play with the padding. 0 (top) 0 (right) 0 (bottom) 0 (left).

2. With the theme comes 3 different images for the masthead….the paint splatters. If you look in the images folder you’ll see them there. Make a new masthead image and save it out as the same name as some of the other masthead images and then re-upload. I would try and stick with the same dimensions as the existing images to avoid breaking the theme.

3. The colors of the links are in the left sidebar section in the css file. look for this:

#l_sidebar a:link, #l_sidebar a:visited
#l_sidebar a:hover, #l_sidebar a:active

Change the color in there and your side bar links will change.

Hope that helps. Have fun:)
56 Will Sullivan // Dec 11, 2008 at 5:29 am

Thanks, Drew! 1 and 3 were a breeze. Cheers for that. I still can’t find the line of code that refers to the header/banner “splatter” images. I like banner1.jpg a lot, but I can’t figure out how to swap it out with the all blue version. Thanks again for any time you have to advise.

All the best,
Will
57 Drew Stauffer // Dec 11, 2008 at 2:15 pm

@ Will Sullivan

If you just want to swap out the images…I would open up all 3 banners in photoshop or some photo editing software and rename them.

Locate the photo that’s currently on the page you want to change and then rename it to the one you want.

You shouldn’t have to mess with any code if your just swapping images.
58 Will Sullivan // Dec 11, 2008 at 6:34 pm

Perfect! Thanks, Drew.
59 Will Sullivan // Dec 13, 2008 at 9:29 pm

I know..it’s me again. Thanks for all your help thus far. One last question, I promise. How might you move one of the sidebars to the left hand side of the page, so that the organization is leftsidebar/content/right sidebar?

As always, thanks for any time you have to spare for this. I’m learning, but it’s slow goings.
60 Gary // Dec 30, 2008 at 10:29 pm

Drew, thanks for both the template and all the work you put into it and answering questions. I finally came back to this template after a month of trying others. This is simply more elegant. I would like to make the column with my articles and photographs a bit wider to use some of the available real estate of the page. I’ve been playing with Stylizer but seem to be hitting a 960px limit on width. Can you share a tip on increasing margins and possibly only increasing the width of column 1 while leaving the widget column widths as is? I’m happy to push out the overall left and right margins a bit, just trying to get my pics to fix without resizing them. Thanks in advance.
61 Alergia // Jan 9, 2009 at 5:07 pm

great theme man!

thank you for this job
62 JuniorD // Jan 16, 2009 at 2:25 pm

Just a couple of things that I noticed strange. WP Themes shows 1.2 as the latest version (via http://wordpress.org/extend/themes/elements-of-seo) but the latest version is actually 1.4

On header.php
<link rel=”Shortcut Icon” href=”<?php echo get_settings(’home’); ?>/wp-content/themes/elements-of-seo/images/favicon.ico” type=”image/x-icon” /></code>

Should be changed to <code><link rel=”Shortcut Icon” href=”<?php echo get_settings(’home’); ?>/wp-content/themes/elements-of-seo_1.4/images/favicon.ico” type=”image/x-icon” /></code>

on r_sidebar.php
<code><a href=”http://elementsofseo.com/?feed=rss”>Subscribe to our feed</a></code>

Should be changed to <code><a href=”<?php bloginfo(’rss_url’); ?>” >Subscribe via RSS</a></code>
63 Drew Stauffer // Jan 16, 2009 at 8:38 pm

@JuniorD

Yeah there were a few things that didn’t get switched over from when I was using the theme to when I released it to the public.

Elements of SEO was my first theme that I released so I might have rushed a few things.

Thanks for the catch.
64 JuniorDimas // Jan 16, 2009 at 8:44 pm

No problem. Just getting into the whole social community swing and have plenty of time to nitpick, research and resolve. Feel free to hit me up for a test drive

Stayed up till 2am making it XHTML compliant (all of it due to the Twitter Plug-in Tool syntax). Reviewing your site right now for SEO best practices (since I’m just starting, good form would go to a strong foundation).
65 Mary T // Jan 17, 2009 at 10:41 pm

Hi Drew,

This is my first attempt with blogging, so it’s been a big learning curve. I want to add an image in the right-hand column. I see how to get into the righthand column editor, but don’t know what to do when I get there. Can you help? I’ve created the image and uploaded it. Now what?

Thanks for your help. I like the clean lines of the template.
66 Web Design // Jan 19, 2009 at 7:29 am

It’s looking good and Professional Themes. It’s an Attractive Themes.
67 JuniorDimas // Jan 19, 2009 at 9:06 pm

A little trick you could incorporate for the next build in r_sidebar.php add the “click and default text dissapears” code

[ input type="text" alt="search this site" name="s" id="s" size="26" value="search this site..." onfocus="if (this.value == 'search this site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search this site...';}" / ]
68 j-lon // Feb 24, 2009 at 8:27 am

I really like the Elements of SEO theme, but I’m having some trouble with the way that IE7 and IE8 are rendering it. Not being a real CSS/HTML maven, I’m a little at a loss as to where to begin in troubleshooting this issue. I have some screen shots I could show you. Maybe you would have some thoughts on what is going on? Where could I send them screen shots?

TIA
69 j-lon // Feb 24, 2009 at 8:28 am

That should read “the screen shots.”
70 Drew Stauffer // Feb 24, 2009 at 9:13 pm

@j-lon

Send your screen shots to drew [at} alibiproductions.com

I haven’t used IE8 yet since none of my clients do, but we should be able to tackle your problems.
71 Drew Stauffer // Feb 25, 2009 at 5:19 pm

@j-lon

I took a look at your screen shots and I see the problem your referring to.

It looks like you have modified the code on your site and now it doesn’t validate (which might be why it doesn’t look right).

When I look at the elementsofseo.com on IE7 it looks fine so that would lead me to believe that one of your modifications somehow broke the site.

Since you haven’t gotten too far into your posts and modifications I would delete the version your using and re-upload the original version.

Then every time you make a tweak test the site on all browsers so that when something does happen you can easily revert back.
72 j-lon // Feb 25, 2009 at 6:38 pm

Thanks for getting back to me. Your feedback helped me to track down the problem. It was in one of my text widgets in the right side bar (specifically the one with the RSS Feeds in it).

I was missing the tags at the beginning and end of the code including the various feeds. It’s back to looking right, and I’ve now learned something new too about how everything fits together.
73 Kate // Feb 27, 2009 at 2:21 pm

Is there a way to customize the theme so that the comment link is more noticeable? We’ve had several people visit our blog who couldn’t figure out how to make a comment on the site because the comment link is at the top of the post vs. the bottom. Personally, I like it, but if there was a way to make it more obvious, we could have more comments from our clients.

Thank you!
74 Drew Stauffer // Feb 27, 2009 at 7:24 pm

@Kate

Sure you can change/customize it any way you like.

Just add a tag…strong, em or span tag around the php comments tag in both the home.php and index.php files.

Then add some CSS to it and your good to go.
75 Extagen // Mar 13, 2009 at 8:16 pm

Great Blog!
76 Charlie Madison // Mar 27, 2009 at 12:36 pm

Thanks for the themes. I saw the themes and I’m very happy to put one.
——————————————————
Charlie Madison
http://www.widecircles.com/
77 seo // Mar 27, 2009 at 1:48 pm

Welcome and keep up the great work! Just found this site, and I’ve been enjoying the tips and discussions here.
Im kind of new to site building but Im learning a lot from reading through the forums. Great Site

seo
78 RaiulBaztepo // Mar 29, 2009 at 8:25 am

Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
79 Odzyskiwanie Danych // Apr 16, 2009 at 5:10 pm

very helpfull blog.
80 Library Servers // Apr 28, 2009 at 4:31 am

Thanks for getting back to me. Your feedback helped me to track down the problem. It was in one of my text widgets in the right side bar (specifically the one with the RSS Feeds in it).

I was missing the tags at the beginning and end of the code including the various feeds. It’s back to looking right, and I’ve now learned something new too about how everything fits together.
thanks…
81 melayu // May 23, 2009 at 5:12 am

Walooo nice themes how about 2009 themes did dthey create one
82 Melayu Boleh // May 25, 2009 at 2:28 pm

I am in a process on collection SEO friendly wordpres themes.
I hope that you will update your themes so that it will compatible with future wp 2.8
thanks
83 Cheap Web Hosting // Jun 1, 2009 at 10:03 pm

I’m sorry, I still don’t really understand. Do I need to do anything special to my page or edit my HTML for keywords or tags? Do keywords have anything to do with the meta tag? Don’t search engines eignore the meta tag? And what do tags have to do with it?