Pixels from the Edge

My last couple of posts I’ve talked about how to customize Wordpress to create your own theme and templates. As I talked about in this post I feel that Wordpress is a hugely powerful CMS admin system but falls behind with its front-end publishing capabilities. I don’t like how it publishes the HTML and in this post I will give some hints as to how to completely abandon the Wordpress front-end for your own.

Custom Permalinks
By default all pages are created as something like ‘http://www.mysite.com/?p=14′. But Wordpress has it’s own built-in URL parser and router allowing us to make pretty URLs. Click ‘Settings->Permalinks’ in the left sidebar and select the ‘Month and name’ radio button and hit save (don’t worry about the other options, they really only affect the “posts” URL structure and we’re only concentrating on “pages” here).

It creates an ‘.htaccess’ file in the web root, if Apache doesn’t have permission to create this file then you can create it yourself with the following:

Basically every file that doesn’t exist (media, css, js, etc. files that physically exist bypass the rule) gets sent to the index.php file which does a URL lookup and routes to the correct template.

You can now go and look at a custom page you’ve made and see it has a beautified URL as a Permalink.

Custom Header and Footer
The default Wordpress header and footer does a lot of automatic work. In order to free your code from this I recommend creating you own header and footer. Any functionality that the header and footer contains that you want to keep can be ported over as you need it.

In your theme folder create your own header.php and footer.php files. It’s probably a good idea to save a backup first (even though you’ll probably already have the whole thing backed-up from when you created your own theme, and then get rid of everything in the files you don’t want. For example when I first started experimenting I kept all the boiler plate stuff and ditched the automatic navigation generation and sidebar code. Start with the minimum and work things back in from your template as you need them, if you feel you need them, personally I rewrote everything back in.

Once you understand what you’re doing here you can drop the whole header and footer approach and use a templating engine such as Sigma (which I’ve favored for some time).

Custom Homepage
The final move is to set the homepage as something other that the blog. This is the final key in freeing up Wordpress from being a blog tool dependent on the default code to becoming, well anything you want from a website, backed by a powerful CMS. Of course you will also always have the option to quickly and easily implement a powerful blogging system into your site, but the point is the blog doesn’t actually have to be your site.

In your admin panel create a new page with the title ‘HOMEPAGE’, I recommend to first create a homepage template because a homepage is never like anything else. Once you have that page published navigate to ‘Settings->Reading’ and under the first option ‘Front page displays’ select the second radio button ‘A static page (select below)’, and in the drop-down find the ‘HOMEPAGE’ page you just created, and save your changes.

That’s it, you’re now free to go crazy with your website design and code yet still harness the power that the Wordpress CMS yields! And don’t forget if you want to have a blog in your website, now or in the future, you already have all the tools you could want.

This is part of an ongoing series of posts I am publishing talking about how to use Wordpress as a custom CMS.

1. Open up a new file and add the following:

<?php
/*
Template Name: My Template
*/
?>

2. Save the file in your theme folder with the name of your new template, the filename doesn’t have to be an exact match for the template name, e.g. ‘mytemplate.php’.

3. In the admin panel create a new page. Give it a title, type in some content, and then in the right sidebar under ‘Attributes’, find your new template in the drop down and select it, and publish the page.

4. When you view your new page on your sites front-end you’ll see a totally blank page. This is good and means it’s worked as we’ve not told the template to do anything yet.

5. Go back to your template file and update it to match the following:

<?php
/*
Template Name: My Template
*/
get_header();

get_footer();
?>

6. Now when you refresh your new page you’ll see the header and footer are now incorporated:

7. That’s great but the content from the CMS is still missing. Add the following into the template file between the get_header() and get_footer() calls, save it and refresh the page:

$thisPage=query_posts("pagename=".$_SERVER["PATH_INFO"]);
echo $thisPage[0]->post_content;

That’s it, you’ve just created your own template! You can now continue to develop out your new template and create more pages using that template, and create more templates.

This is part of an ongoing series of posts I am publishing talking about how to use Wordpress as a custom CMS.

I recently had a crash course in WordPress when I had to build a very custom website from scratch in two weeks from start to finish. It needed to be WordPress because this site will contain a blog that will be handed off to a third party to maintain, and WordPress is arguably the industry standards for blogging software. I wasn’t overly familiar with WordPress, I’d setup a blog or two in my time, but never anything as complex as building a custom theme or plugin. But I basically knew everything I needed to do was possible, I’d read up on being able to create custom themes and plugins and I felt quite confident that I could get done everything I needed to. What I didn’t know really was how I was going to do it, or how it was going to run as a CMS once launched. In the end I was surprised at how easy some things were to implement, and frustrated at the lack of what I would consider common tools.

What I realized pretty quickly were two things:-

1. The Administration Panel is kick-ass, it’s beautiful to look at and use and takes care of all the administration dirty work you’d have to do if you were writing from scratch.
2. I pretty much hate the core WordPress PHP code, no disrespect to the people that dedicated so much time to it over the years, but to me and for my purposes it’s a cluster-fuck of a headache.

Look I’m not saying I’m right in this approach, but I’m pretty sure that this approach is right for me. I follow a school of thought which basically says that if you can’t figure it out in less than an hour it’s broken (something I took away from a mesmerizing Rasmus Lerdorf keynote speech at a conference many years ago). And that’s how I felt about much of the “automagic” internals of WordPress, I couldn’t figure them out for shit and I got more and more frustrated as I started to realize that I could be writing this myself from scratch, not just in a clean manner that I would obviously intimately understand, but also in less time that it is taking me to figure out the spaghetti code. I felt the same way with the plugins, that by the time I’d searched through the thousands of plugins and actually found the one that does what I need, and installed it and played around with it, only to find that it doesn’t do exactly what I need at which point I’d have to jump back into the pool of plugins looking for another suitor. Even if I did eventually find exactly what I needed, which lets face it is rarely the case, I could have already written a more suitable and stable plugin myself.

But on the other hand the administration panel WordPress has to offer is truly something of beauty. It takes care of all the user security, roles and permissions, pages and posts with vanity URLs, WYSIWYG editors, media uploads, and comment moderating, just to mention a few of it’s highlights. Basically all the rudimentary crud we have to worry about when building a CMS from scratch, shit in my line of work the admin panel is often more complex than the front-end. And not only is it solid in it’s task, so that you can feel comfortable that it’ll do its job without having to peek under the hood, but it has some sprinkles of scriptaculous and ajax so it also does it sexy. And couple that with the fact that it’s extremely easy to implement your own custom menu items and modules to the panel makes for a great application.

So I basically ended up writing my own front-end. I got familar with WordPress and found all the functions I needed to pull in the information I was generating with the admin panel. I’d like to write about how you can get setup up with all the basics you need to get up to speed with where I am at with all of this. I’ll hopefully accomplish this by exploring the following topics over a number of entries:-

• Create your own theme
• Custom homepage
• Making plugins
• Understanding pages
• Meta tags and custom fields
• Custom RSS file

By the way the WordPress site I built is www.thefordstory.com