Grow your CSS skills. Land your dream job.

Unique WordPress pages

  • # July 19, 2008 at 7:29 pm

    Hi All

    First thanks to Chris for the great series of WordPress screencasts recently – a big inspiration to us all.

    My question is how to approach coding different page layouts across a WordPress site. I can see from the themes three types of pages: index, page and single, but what if you want something that doesn’t fall into one of those types.

    An example of what I am talking about is http://www.woothemes.com/demo/proudfolio/. What I think I am seeing is the home page, portfolio and about pages are all unique and then there is the blog. I don’t see how these differing layouts map to just the three types of index, page and single. Presumably they don’t, so …

    My next question is how do you integrate an additional page layout into a WordPress theme (additional to index, page and single). I can envisage coding the new page in php but where in WordPress do you say I want to use this new php page for a particular WordPress page?

    Any pointers would be a great help.

    Cheers
    Tim

    # July 20, 2008 at 5:53 pm

    Hi,
    Simply duplicate the page.php and add this to the very top of the new page.

    <?php
    /*
    Template Name: your page name
    */
    ?>

    When you write a new page in wordpress go to ‘page templates’ at the bottom and you’ll see the name of your new page.
    You can structure and style the new page template however you wish.

    I replace the opening body tag on my page.php with this to give the page a unique body id based on the page title for styling. i.e. Portfolio.

    <?php if (is_home()) { ?>
    <body id="blog">
    <?php } else { ?>
    <body id="<?php echo $post->post_name; ?>">
    <?php } ?>

    Works like a charm.

    Hope that helps

    Tob :)

    # July 21, 2008 at 2:14 am

    How cool is that. Cheers Toby.

    Does anyone else do this differently?

    pab
    # July 21, 2008 at 3:04 am

    When you write a new page in wordpress go to ‘page templates’ at the bottom

    I can’t find this

    # July 21, 2008 at 6:44 am

    The ‘Page Templates’ option is at the bottom of the Page editor. If I remember rightly it won’t appear until you’ve created a more than one page.

    Another good tip is if you want to build a CMS type site using WordPress with a front page instead of the default blog setup.

    Create a new page and call it, maybe "Home". Fill in your content blah blah. Save it.
    Then create a new page and call it, ooh… "Blog". Leave it blank and save it.

    Go to Settings>Reading. You’ll see an option for Front page displays.
    Choose "Static Page" and then by Front Page select "Home" from the dropdown.
    Underneath by "Posts page" select "Blog" from the dropdown.

    What happens is "Home" becomes your default opening page and "Blog" will display your posts. The "Blog" page will default to using the index.php inside your theme even though it’s a so called page. Pretty clever huh.

    When you use this for your opening body tag. Put in "Home" in the second line. Like so.

    <?php if (is_home()) { ?>
    <body id="home">
    <?php } else { ?>
    <body id="<?php echo $post->post_name; ?>">
    <?php } ?>

    Your front page will have a body id of "home". (is_home()) relates to the page you selected as your front page.

    When you go to the Blog page the body id will be "blog". The cool thing is so will single.php, search.php, archives.php in fact any page relating to a post in any way will have a body id of ‘blog’.

    Create some more pages like Contact, Portfolio, Design and when you navigate to them you’ll see each has a body id based on its title.

    By the way I got this little PHP nugget from Elliot Jay Stocks the man who brought you "Starkers". Credit where credits due.

    Tob :)

    pab
    # July 21, 2008 at 12:55 pm

    cool figured it out,

    Thanks for posting this Tob
    :D

    pab
    # July 21, 2008 at 5:27 pm
    "Digitalbrit" wrote:
    How cool is that. Cheers Toby.

    Does anyone else do this differently?

    I’ve only been messing around with wp for a couple of weeks now and the one way I did it was to create and my own includes and feed them to the page I wanted to alter.

    worked great.

    the one drawback is you have to edit the page using the theme editor, it’s ok for someone who knows what they’re doing but not for a client who just wants a simple wisiwig to update their pages

    # July 22, 2008 at 2:20 am

    Tob, this is making sense now. Thanks for taking the time and trouble to answer this fully – its really appreciated and given me heaps to play with now.

    Pab, yeah I was going down the includes route but was having difficulty figuring out how to detect the page type. I basically missed the point that you can have different templates which you link at page definition time. Doh!

    Cheers
    Tim

    # July 22, 2008 at 12:16 pm

    Here’s a quick update. I may have got ahead of myself!

    You do actually have to expand the body replacement PHP to cover all your bases. You can pretty much do what you want with it by adding different tags to the code. As it happens the above code won’t differentiate between front page and blog as I discovered while doing a theme at the moment. I’d added some as static ids in my other site.
    But here’s the answer.

    Code:
    < ?php if (is_front_page()) { ?> //This is the front page

    < ?php } elseif (is_home()) { ?> // This is the blog or index.php

    < ?php } elseif (is_single()) { ?> //This is single posts

    < ?php } elseif (is_archive()) { ?> //This is any type of archive page!

    < ?php } else { ?>
    http://codex.wordpress.org/Conditional_Tags. You can even get down to an individual post!

    It’s working as expected in my theme. Meaning you can add a dynamic body id to pretty much anything for styling.
    Hope I haven’t confused anyone to much!! :?

    Crisis averted!!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".