Tweaking Your Theme

Customizing WordPress: an Introduction

March 7, 2011   ·   By   ·   1 Comment   ·   Posted in Customization, Tweaking Your Theme, Wordpress

WordPress is an amazingly flexible, powerful content management system – it can do a lot of things for a lot of different people, and can can be contorted to match the requirements of impossibly different businesses. All for free.

Right, but I just want to change my header

Of course. Lets talk about how you can go about making small customizations to your WordPress based site. There are routes to take for people of all ability levels – so don’t be afraid if you’re still not exactly sure what “hosting” means.

I’m going to give 2 paths here, one for people who don’t know html and css from arugula, and one for those who do, even if it’s just barely.

The easy way out: Choosing a flexible theme

Over the past 12-18 months, the WordPress community has exploded with a new class of themes – heavily customizable and easy to use, even for those with little or no html and css ability. I’m going to talk about 3 themes here – 2 paid, and one free. Feel free to chime in in the comments with your personal favorite.

Headway

Headway is my favorite. It’s not free, in fact, it’s not even cheap – but in my opinion, their visual editor is really fantastic – and just what a beginning WordPress user needs to get them up and running with a great looking, customized theme. Click here to visit Headway.

Thesis

Thesis has been around since the beginning of paid themes. It’s hugely popular and has a rabid following. It’s not my favorite for a number of reasons, but how wrong can 35,000 people be? Click here to visit Thesis

Atahualpa

Atahualpa is another tricky one. It’s very popular, and refreshingly, it’s free! However, there is a pretty steep learning curve that comes along with it. If you’ve got the patience to power through the learning stage, you’ll no doubt be very excited with the end product. Click here to visit the Atahualpa homepage

The Road Less Travelled – Modifying theme code yourself

The other option is a little less glamourous, and a lot more migraine inducing, but the possibilities are limitless. WordPress works on a templating system that is both easy to use, and robust enough to let you do anything you want it to. The kicker is: you need to learn how HTML, CSS, and even a little bit of PHP if you’re going to make this work. You don’t exactly need to be an expert in any of them to make small changes to an existing theme though. Here’s the quick overview, and some links to get you pointed in the right direction:

WordPress Theme Files

Nearly every WordPress theme consists of the same basic set of files, listed here:

  • index.php Index.php is your theme’s go-to guy. Traditionally, it controls the homepage (although if your theme has a file called “home.php”, that’s what will control your homepage). When all else fails, index.php is the file that WordPress looks to to generate your page.
  • header.php This one isn’t too tough. Header.php controls – wait for it – your header. In most themes, every single page on your site will share a header – so if you’re looking to add an image into your header, this is a good place to start your search.
  • footer.php Another no brainer. Looking for that hard to find copyright text? Start checking here.
  • sidebar.php More easy stuff – here’s where your sidebar code traditionally goes.
  • single.php This file is in charge of single post pages – like the one you’re looking at right now.
  • page.php This file is in charge of “Page” pages.
  • archive.php This file controls the layout of your archive pages – for example, the pages displayed when you click the “March 2011″ link on this blog, or one of the category links in the sidebar. A warning – categories are sometimes controlled by another file (category.php).
  • style.css Here’s where things get interesting. The style.css file is usually the single source of all CSS (which controls the actual look and feel of your blog – things like colors, layout, fonts, etc) on your theme. Get comfortable with this file, and the CSS that it uses.

That is, unfortunately, not even close to a complete list. Fortunately, there’s a handy diagram at this page on wordpress.org.

Now, you at least know where to start looking – all that’s left is to figure out what to do once you get there. Here are a couple of great tutorials to get you on your way:
HTML Tutorial
CSS Tutorial

Using a Page as Your Posts Page in WordPress

December 29, 2008   ·   By   ·   1 Comment   ·   Posted in Tweaking Your Theme, Wordpress

About a year ago, I put together a website for a client – it was for a medium sized company who needed a mostly static CMS for their website.  They wanted to be able to edit all of their pages themselves, but they also wanted a blog style section for news items.

Naturally, I suggested WordPress for the job – I hadn’t done a huge amount of work with WordPress in the past, but just enough to know that if a client needed a CMS or any sort of blog, I wanted to use WordPress for the job.

So, I got the whole site put together – but It was a fairly complex theme, with dynamically generated dropdown menus, different backgrounds for each page, etc etc, so I didn’t spend much time worrying about the a few details until right before the project needed to be completed – namely, making a static page the home page, and using a normal page to list the blog posts.

When the time came to do so, I whipped up an entirely overcomplicated system in the theme to do this for me – I used WordPress conditional tags to display the static page I wanted on the home page, and I used a custom query with a matching loop on a page template to display blog posts on the static page I wanted to.  The whole thing took hours of researching, implementing, and testing, and at the end of the day, it had some very specific requirements to work properly.

Six or eight months later, on a different project, I had the same requirement – the client needed a static home page, but still wanted a blog on another page.  I started to build the same type of system, and then noticed an option on Settings->Reading:

picture-1

This is still a little confusing at first, so here’s a bit of explanation:

You’ve got 2 sets of options.  First, you need to chose what your front page displays – this is the radio button.  The default, obviously, is ‘Your Latest Posts’.  This works the way you’d expect it to work – the homepage shows your latest posts.

The second option, A static page, gives you some choices:

First, you need to choose your Front page -  the dropdown menu here will be populated with all the pages you currently have written.  The page chosen here will determine the page that shows up on your blog home page.

Second, you have the Posts page -  here, you can choose a page to display your posts – this one is a little trickier – when you visit this page, you’re going to see the list of most recent posts, as you normally would on the homepage (in your theme files, this will now call index.php).  On most themes, this is NOT going to display your page content as well.