Say no to sidebars! (customize your WordPress pages)

custom drink

Typically, I blog about educational technology that the average teacher can understand. This, however, is some heavy lifting.

Here is an advanced trick for WordPress users. This is how I removed the sidebar from one specific page (titled forum) on my wordpress site. After much searching, I found that I needed to implement conditional formatting using php.

Here’s my problem:
I wanted one single wordpress page to not have a sidebar. I wanted it to take up the entire width of the page. Makes sense for a forum, right? Not so easy…

In the wordpress dashboard, navigate to Appearance > Editor > page.php.
On page.php, I changed:

[sourcecode language=”plain” light=”true”]<?php get_sidebar();; ?>[/sourcecode]


[sourcecode language=”plain” light=”true”]<?php if(!is_page(‘Forum’)) get_sidebar();; ?>[/sourcecode]

Here’s what that means:
Typically, wp displays the sidebar. That’s what we usually want. In this case, the exclamation point means “if it is not”. So, the php translation is, “If it’s not the Forum page, then show the sidebar.”

Perfect, so far. However, there was a blank space where the sidebar used to be. Another problem. The forum should be wider. This won’t happen, though, because my stylesheet says the page can only be 510 pixels wide.

So, I went to my stylesheet and created a div titled #widecolumn with a width of 100%.

Back on page.php, I changed the original div titled #contentleft to:

[sourcecode language=”plain”]<?php if(!is_page(‘Forum’)) { ?>
<div id="contentleft">
<?php } else { ?>
<div id="widecolumn">
<?php } ?>[/sourcecode]

Again, with the php translation: “If it’s not the Forum page, use the div #contentleft (with a width of 510 px). If it is the Forum page, use the #widecolumn div that you just made (with a width of 100%).


Web design tips


Sean jumping off

Don’t do this.

Smashing Magazine gives you some easy ways to avoid bad designs. For example, make it easy (not hard) to search your page. Avoid the basic pitfall that make your web site fall to its death (see figure 1).

Do this.

Here are 40 web design services. Find a color scheme, screen capture your current page design… all sorts of cool links. And best of all, they are free resources.