Semi-Static WordPress Homepage

I’m a great fan of Lorelle. She writes some really interesting stuff about WordPress and Blogging and you should all check out her stuff.

Recently (well, last week - but I’m slow at getting round to things as I’m quite busy), she posted up an interesting “challenge” to “help kick [our collective] blogging ass” as she puts it.

Well, I thought I’d share with you all a tip on something that I’ve recently been working on. I’m quite pleased with the result even though the solution isn’t the most ideal and rather raw. It isn’t the most elegant solution as I’d have hoped it to be but it works…

This isn’t specifically a “blogging” tip - it’s more of a theme tip. Or rather a way in which you can push the boundaries of WordPress if you’re inclined to think of WordPress as something other than “a blogging tool”.

And I do.

Now, I know some of you WordPress and Blogging purists are going to hate me. But hey, screw that - WordPress is Open Source and the whole point of Open Source projects is that you can push them to become what you need them to do. Right?

I’m not about to get into a debate on the whole purity of the blog thing right now. Instead, I’m going to show you what’s possible if you put your mind to it.

As you may have gathered, I’m taking up Lorelle’s tips challenge on this one and this post is about creating a Semi-Static WordPress Homepage.

Are you ready? Are you confused? Read on and I’ll explain everything.

I’m not going to lie to you - this isn’t easy but it’s worthwhile making the effort and following the steps if you want to make your site *ROCK*. BTW, I originally posted this tip on the StomperNet forums but thought it was good enough to share with you all as it is pretty cool and “I do what I like and like what I do” (hmmm… I’m sure there’s a song there somewhere…).
Okay - so, let’s get the party going… The question is:

“How Do You Create A Semi-Static Homepage?”

Firstly, let’s consider another question:

“WTF would you want to do that anyway?!?!?”

Good question. I like your train of thought. Destination unknown - so let’s get it back on track, shall we?

There’s a couple of good reasons.

Firstly, I’m currently working with a couple of clients who like the idea of displaying some information about themselves or their sites on the Hompage of their WordPress blog. At the same time, they like the idea of having the most recent posts showing up *in the main body* of the page too.

Note here: The key here is “in the main body of the page” and *NOT* in your sidebars. This is important as we’ll see in a minute.

B) Because having a partly static or semi-dyamic home page is such a cool idea. Why wouldn’t you want one?

And on the other hand) the idea is right out there on the edge of a reasonable wishlist items and these types of challenges make working with WordPress interesting. I love tackling something like this and pushing the boundaries of WordPress! Might as well enjoy what you do, eh?

So, some of you may have already upgraded to WP2.1+ and found a new feature called “Static Homepage”. It’s pretty cool - you can select a Page to become your homepage and use the selected page to display a whole manner of things.

What’s The Problem With Static Homepages?

Well, to be frank, I’m using version 2.2.1 and finding this very buggy. There’s hardly any documentation on this new feature although I found this interesting article on how to create a static homepage on Richard and Stephanie Sipe’s blog and, while it shows you how to can select Static pages for the Front Page (home) and Posts Page, personally I don’t think it goes far enough.

How far is far enough? For me, that would be a “Semi-Static” homepage. Plenty far enough without falling off the edge.

Let’s look at the “Front Page Displays / A Static Page” feature in WordPress. You can find this under Options / Reading in WP2.1+.

Here’s a few problems:

1. In the section called “Front Page Displays”, selecting a Static home “Page” means you cannot add The Loop to the page to display Posts. The Loop will simply display Pages found and not Posts - not sure why this is.

   To be honest, I don’t care - it doesn’t work at the moment and I’ve spent too much time faffing about with trying to get it to work… I even manged to get it to sort-of work with pulling in Posts but you know what? The friggin’ More links didn’t work and the entire Posts got rendered to the screen.

   Even if you try to use Scott Reilly’s Customizable Post Listings plugin, you’ll find that Pages get pulled back by The Loop when you set the this feature to use a Front Page with a default template. I’ve fiddled with it and can’t seem to bring back the most recent Posts in a *reasonable* fashion.

2. Selecting a Static “Posts Page” to be your Front Page display is equivalent to using your index.php file (or just leaving this option set to “Your latest Posts”!). WTF? Maybe I’m missing something here. Some documentation on this would be great! Doesn’t even seem to consider stuff out of The Loop when rendering…
3. Setting both the Front Page & the Posts Page to be the same thing - Well… it says you shouldn’t do this… heh heh. I love doing this. I’d recommend you give it a go and see how exquisitely WordPress messes this up! Heh. Just select both things to be the same options and *BLAM* - major accident waiting to happen… hehe…

Okay, so maybe it might be because of the lack of documentation here. I’ll admit, maybe I’m missing something and perhaps someone might have a more elegant solution to this. Now, many of my ex-work colleagues know that I wasn’t particularly the best coder - I’ll admit that (which is why I went over to the “Dark Side” and became a Project Manager ). However, I do try things out loads; spend several hours looking things up to see if anyone’s got a sensible solution; get frustrated when I can’t find anything and then just do things in my own way…

The point is, I’ve got a solution. It works. I’m happy with it. Until someone else comes up with something better, then I’m sticking to it. Suggestions extremely appreciated on this one! (I dare you, I double dare you..!)

Anyway… are you ready for a “Semi-Static” homepage? Part static content with part dynamic posts? Or is that Semi-Dynamic with Partially Static content… who knows?

Ready to create some semi-static content?

Got your themes at the ready?

Sure?

Well… I’m not :P. Let’s have a look at it in action first to see what we’re trying to achieve before we begin!

Right, first off - go to this newly created site that I’ve recently worked on about Meta-Medicine: http://www.metamedicine.se/ and have a good look at the homepage.

Let’s stop a minute and have a good, hard, look at the homepage. Anything strike you about it? Probably not…

There’s a couple of points to note on this site. Firstly, yes, it is in actuality a Blog. It doesn’t look like one but, like I say, I like to push the boundaries. Sod that “my blog should look like a blog” crap - I know CSS and I’m using it! And using it *WELL*. Here’s two fingers up at mediocrity… if you want that, go elsewhere. And if you’re on an old browser (like IE5.5… shoot yourself. Really. Do. Evolve or die…)

As usual, I digress…

If you notice, we’ve got a nice section on the top introducing the site with a “Related Posts” underneath. At the moment (as the site has literally only just gone live) we have a recent post with a nice “More” link, right? (Note: this is important - using a Static Page as the Front page will never get you that nice “more” link). Well, that top section is in reality static text. It will continue to display the same thing and never change until it’s updated. The bottom portion with the “Related Posts” underneath *will* change. It’s set to display 5 posts.

Do you realise how long it took me to work this out? Several hours worth of research into the limits of WordPress. I’ve been pulling my hair out over this one.. and trust me, with a shaved head, that’s some serious pulling! But now I can reveal to you, dear reader, a way of achieving this cool feature as used on the Meta-Medicine site.

I’ll tell you now, it’s not a particularly elegant solution but does the job! It’s not what I’d recommend - in fact, I’ve ideas of how it can be done. But that’ll be the subject of another plugin…*cough* er… post. Did I say plugin? Ignore me…

So… how is this wonderful effect achieved?

Simply.

If you read my previous posts, then you’ll probably already know about the Sniplet’s plugin by John Godley from Urban Giraffe. Now that’s a*BIG* clue.

Here’s a step by step guide. This assumes you have a little knowledge of HTML and PHP.

The assumption I’m making about WordPress and PHP and *YOU* here is: FOR CHRIST’S SAKE, DON’T TOUCH THE FREAKIN’ PHP TAGS! (many apologies for my coarse language to those of you who are worshippers of PHP).

Got it? Good.

As always, I would recommend you back-up your theme; backup your site; get household *and* personal insurance and cover yourself, family and extended family before attempting to do any of this. Copy and paste any file you will work on into a notepad file and save it off! (It’s for your own good. And you know it!).

So… here we go:

1. Download the Sniplets plugin from Urban Giraffe.
2. Log into your Admin area and install and activate it as a plugin in your WordPress site.
3. Click on the Manage tab.
4. Click on the Sniplets tab.
5. Add a new Sniplet by adding a name (call it “homepage” - it is important to make a note of it’s name whatever you call it!).
6. Add the contents of whatever you want to have as Static content on your homepage to the “contents” area.
7. Click on the “Add Sniplet” button.And you’re done creating a sniplet!Now onto creating the homepage…The following section can either be done in your favourite editor if you like to edit your WP php files manually, or by using the method described below (using the Theme Editor).
8. Click on the Presentation tab.
9. Click on the Theme Editor tab.
10. On the right hand side, find your “index.php” file. (In Kubrick, this is listed as “Main Index Template” - this may vary depending on the theme you’ve got installed).
11. Insert the following code into your template *where you need it*.

    Note: On the Kubrick theme I put this just under the opening div tag containing the “narrowcolumn” class.

    <?php
    if(is_home() && function_exists(’the_sniplet’)){
    the_sniplet(’homepage’);
    }
    ?>

12. Hit the “Update” button.
13. And that’s it! All done.

Explaining the Sniplet code

The is_home() says to WordPress that this should only be displayed on the homepage.

The && means “AND the next bit must be true as well“.

function_exists(’the_sniplet’) says to WordPress: “hey guys.. does anyone know about Sniplets around here?” and if WordPress has heard of “the_sniplet” then the_sniplet(’homepage’); function gets called to say that it’s needed on the homepage.

the_sniplet(’homepage’); then checks if it knows anything about the “homepage”. Since we’ve created a sniplet called “homepage” we’re in luck and it gets displayed on the screen.

The little function_exists function is also good because even if you switch off Sniplets, you won’t get that nasty error appearing all over your theme.

So what now?

Well, hopefully that’s 1) useful to you and 2) made you think about other ways in which you can utilise plugins to do different things on your site.

If you find a better solution to this “semi-static homepage” problem or even try this technique out for yourself on your own WordPress blog, then it would be great to know how you get on with it.

Let me know how you get on!

Tags: blogs, dynamic, help, home, homepage, page, partially dynamic, partially static, plugin, plugins, semi-dynamic, semi-static, static, StomperNet, WordPress, wordpress templates, wordpress theme

---

Posted on Wednesday, September 12th, 2007.
Categories: Internet Marketing, SEO, StomperNet, Tips, Website Design, WordPress, WordPress Themes.
Follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

---