Customizing a Wordpress Theme

Yup, it’s turned into Wordpress month on Search Engine Snark, which is like Shark Week only significantly lamer but still likely to draw more eyeballs.

For those who are too poor to hire a pro Wordpress designer (i.e. if your name isn’t Graywolf or you weren’t given a copy of Thesis for free) to re-tool an existing one or build it from scratch, our only options are to straight up use a Wordpress theme that’s already out there or to customize a theme to our own liking.

If your goal is to have a writing outlet that’s shared with friends and, while it could draw in a wider audience doesn’t necessarily need to, actually using a pre-existing Wordpress theme with no changes isn’t such a bad thing. If you can find a theme that fits your topic, your mood or your voice you’ve largely accomplished your goal. I’m not saying that you shouldn’t customize or tool around, but if you have a built-in audience that you don’t need to go beyond, you’re much better off focusing on making content production easier through plugins and leaving design as a secondary consideration.

You’re probably also kidding yourself. You know you’re doing this hoping to get a wider, adoring following you smug, attention-starved loser.

If, however, you’re over this delusion and can admit you want your blog to be true extension of your brand, your voice and your personality (personal or corporate) and to have someone other than friends and family reading it, you need something that is unique – to at least a degree. You need something that compliments your content in a way that only a form-fitting look and feel will accomplish. Deeper customization should be in your future.

“But, Search Engine Snark,” you might say – “I’m not sure how!” Well, then you’re in luck. Even if you don’t know anything about CSS or HTML, you’re going to learn how to bullshit your way through it right here and now.

1. Find a general form that you like. Spend some time on Wordpress, Smashing, any of the hundreds of theme galleries or individual designers’ free sites like Pearsonified and find what you’re looking for. Two columns or three? Nav column to the left or right of the content? Very delineated areas or lots of open white space between all sections? Double points if you can find one with H tags in logical places – anything that has the title of a post on the single post page as an H2 or lower will take some extra work, as will one with an H1 tag on the name of the blog on every single template.

   Once you’ve found your base and downloaded it, unpack and upload the theme to your WP-Content folder’s theme directory. You might consider re-naming this at this point and uploading another copy of the original theme in case you ever need a reference point.

2. Gather your tools and make nice with Firefox. The two of you are going to spend a lot of time together. You’ll need the following extensions:
   Web Developer: This extension has a lot of uses for SEO and for building your Wordpress theme, including allowing you to edit HTML and CSS and have the changes appear live on the page you’re viewing.
   Firebug: Amog other things, this extension allows you to quickly identify code that refers to a given page element and the CSS rules that apply to it.
3. Add and activate the Theme Tester Wordpress plugin: Discussed in an earlier post, this plugin will allow you to see the site using a different theme than any non-logged-in users will – which will allow you to test and edit a theme live instead of solely in code.
4. Activate the new base theme: If you’ve activated Theme Tester properly, this will make the new theme appear when you click on the ‘Visit Site’ link, while everyone else sees your current lame-ass theme instead.
5. Prep: Open your site while logged in. Open a second window in theme editor mode with your CSS file pulled up.

Now start putting Web Developer and Firebug to good use: Inspect the major pieces of your site using Firebug, find the resulting CSS piece in Web Developer and play around with the settings. As you get things looking like you want it to, copy and paste the CSS from the Web Developer screen to the Theme Editor page in your other window. If you truly don’t know anything about code, this will take some real time – but if by trial and error you can learn, it’ll come through bit by bit.

It’s best to start with the major pieces: How wide is your overall content area, how wide does that make your post information and sidebars, what’s the background color for all of these – find a good Hex Color list or reference for this piece to avoid unneeded experimentation.  Move from the skeleton to the header and nav area size and setup, to the appearance of your text – which can be much more important than personal style, especially when H tags are involved. In fact, the biggest pain in the ass may be something that won’t actually affect the appearance of your site: Making use of H1s on the “title” line of each page, H2s on major (non-repeated if possible) sub-topics and H3s and below on everything else.

This is why if you can find a theme that already has this particular area straight, you’ll save yourself a lot of time and heartache. You may notice that even as someone who deeply, deeply gives a crap about SEO I’m not perfect on this stretch – though you may notice the minimums are at least taken care of.

A really good idea that is often overlooked: Adding automatic styling for images. You can set minimum and maximum sizes, automatically build in breathing room between image and text, automate borders, lots of things that collectively make a huge difference in your blog’s appearance. This is built into some themes’ CSS, but if not, get into a blog that already has it (like Cutline) and, well, steal borrow save yourself time and make it your own.

And that’s how you get started on customizing your Wordpress blog template. You can speed things along by learning a little CSS or at least having some cheat sheets or resources handy, but this stuff is best learned by doing – so don’t let a little something like not having a clue stop you. Never really stopped anyone else.

Mom says there are no posts that are like me. I am unique.

Tags:   learning SEO · wordpres themes · wordpress · wordpress optimization · wordpress seo Share on Twitter

 More where that came from - get Search Engine Snark feeds!
Subscribe to Search Engine Snark by Email