Six|One Blog | A design and communications discussion and playground | Page 2
Header Image

A design and communications discussion and playground

This is the blog

How To Create a Pseudo One Page site in Wordpress Pt 2

pseudoheader

Yesterday we set up the basics for our site. The techniques covered so far would be useful anytime using Wordpress for Content Management. Today’s tip is also useful in other scenarios. We are going to selectively remove the sidebar and clean up a bit of unneeded clutter.

Removing the Sidebar Option 1 (preference)

Now that we have our static front page set up, we want it to look as much like a typical frontpage as possible. That is going to mean removing our sidebar. We still want our sidebar to show up on blog pages, but it needs to go away here. Luckily, this is also a pretty easy fix.

Open up your page.php templage. Navigate to the bottom of the code and find <?php get_sidebar(); ?>. This is where the php is telling Wordpress to call the sidebar. We don’t want it here, but we do want it sometimes, so we use conditional tags.

Delete the sidebar call and insert this:

<?php
if ( is_home() || is_page(4) ) {
} else {
get_sidebar();
}
?>
</div>

<?php

if ( is_home() || is_page(x) ) {

} else {

get_sidebar();}?>

Replace the “x” in “page(x)” with the page number of your static page. Basically we are telling wordpress that if the page being called is Home or the chosen page(s) do nothing, but otherwise call and insert the sidebar.

Pretty nifty, huh?

Removing the Sidebar Option 2

There is a second option, which can be good practice for another useful technique: Custom Templates. It’s not quite as elegant but it’s a totally legitimate way to get it done.

Generally for minor edits, I will work in the theme editor inside of Wordpress. It’s just fast and easy. For this however, you will need to download your page template file.

Open the file in your favorite editor, rename it from page.php to foo.php (or whatever you like) and save your new file. At the top of the code insert the following.

<?php

/*

Template Name: Foo

*/

?>

Add your own template name so Wordpress knows what to call it. Next, scroll to the bottom again and just delete the sidebar. That’s it! Save and upload back to your template directory. Open the page editor and now on the right there will be a drop-down to choose your page template. Choose your new template and presto, no sidebar!

Picture 14

One more minor fix

Picture 9

If you’ve been peeking at your work, you may have noticed that Wordpress still wants to stick a heading and content on your static page. That’s all well and good, but for our purposes that needs to go. Since this is a single page site, I will be totally killing the content, however if you decide to add more pages, you might want to use a custom template for this ( aren’t you glad you read the last section?)

Quick and painlessly, open your page.php file and delete everything between <?php if (have_posts()) : ?> and <?php endif; ?>. What did we just do? We deleted The Loop, the beautiful code that makes your blog work. This is what tells Wordpress to look for posts, and if there are any, stick them right here. Deleting that gives us a nice clean canvas

Today we got everything prepped. We deleted the sidebars and we got rid of the Wordpress Loop on our pages. Tomorrow we will get to adding the fun stuff.


Posted in Tutorial | Tagged , , , , | 2 Comments

How To Create a Pseudo One Page site in Wordpress Pt 1

pseudoheader

For a recent project I really need to create a one page site for a new church “plant.” They really had minimal content and information, but needed a nice web presence. It also needed to be easily editable by them, and the church needed a blog.

I decided to give it a shot with Wordpress, and I’m pretty happy with how it all turned out. Here are the basic tools/techniques I used to pull it off.

1) First I needed a non-traditional blog site with a static front page. This is fixed easily enough in the Wordpress dashboard. Go to “Reading” and select a page to use as your static page. Below that, you will need to select a second page to use as your Blog home-page. I created a new page called “Blog” for my purposes, but use what works for you.

Picture 13

2) This creates a couple problems that are solved fairly easily. First, this places a second “Home” link in the navigation.

Picture 12

To fix this navigate to your Header.php file (and possibly your Footer.php if it also contains navigation). Look for this code:

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?><br />

Add in the condition &exclude=x where “x” equals the page number(s) that need to be excluded. So one excluded page would look like this:

<?php wp_list_pages(’sort_column=menu_order&depth=1&exclude=4&title_li=’); ?><br />

and multiple would look like this:

<?php wp_list_pages(’sort_column=menu_order&depth=1&exclude=1,4,11&title_li=’); ?><br />

At this point your navigation should look nice and pretty with only one “Home” link

Picture 11

FYI, to find the page number, just navigate to “Pages” and click to edit that page. At the end of the address in your browser bar you will see “post=x.” That is your page number.

Next: Removing the sidebar on selected pages.

Posted in Tutorial | Tagged , , | 2 Comments
« Newer PostsOlder Posts »