The sidebar is all sorts of useful. There’s no limit on the number of different sorts of things that could go in a sidebar. Your RSS button? Definitely. Ads? For sure! A video? Heck, why not?

You can even have multiple sidebars… one on each side of your content, or two right next to each other, on the same side of your content. Cool, isn’t it?

Some things are pretty easy. Your RSS button is likely an image, a link, and maybe some text or an email sign-up form. Ads aren’t much different. For videos, you just have to insert the code YouTube (or whatever video site you’re using) gives you for embedding. With basic knowledge about HTML, you can certainly figure out how to do these things.

But what if you want to do something more involved… like list your most recent posts in your sidebar, or put WordPress widgets in your sidebar, or have multiple sidebars, or even have different sidebars on different pages of your website? That involves a little more than just knowing how to use HTML tags and nest them properly. For that, we have to get into PHP a bit.

What have you been up to lately?

Something that’s super useful to your readers (and can help your recent posts get more traffic, which is always good!) is to have a short list of your most recent posts in your sidebar. Usually this list includes links to the five most recent posts. In theory, this is pretty easy to do. You just have to call the get_posts(); PHP function (you remember what PHP is, right?), pass in the appropriate parameters, and voila, there you go!

But this ain’t no computer science class, and I’m not some snobby professor who expects you to instantaneously understand every piece of code I throw at you. Here, we’re all about understanding things… really, truly understanding them. So we’re going to go through this line by line.

First, the code:<h2>Recent Posts</h2>
<ul>
<?php $recent = get_posts('posts_per_page=5')?>
<?php foreach ($recent as $post) : ?>
<li><a href="<?php echo(get_permalink($post->ID)) ?>"><?php echo($post->post_title) ?></a></li>
<?php endforeach; ?>
</ul> That first line’s easy enough to understand, right? It’s just your title – “Recent Posts” that you put in a header tag. Really, you can name it whatever you’d like, but we’re going to name it “Recent Posts” for now.

Next, the opening <ul> tag. The function we use to display the list of posts outputs an array. We want to take this array, and turn it into a list… an unordered list, so we use the <ul> tag.

The next line isn’t HTML at all. But you recognize that style of code, right? The tags at the beginning and the end of the line tell you that it’s PHP. Then we assign whatever we get from the get_posts() function to a variable called $recent – you’ll see why in a moment, but first I want to explain this function to you.

The get_posts() function does exactly what it says it does. It gets your posts! But how many? And what if you want only the ones from a certain category, or ordered a specific way, or from a specific date…? Thats what parameters are for. Here, we’re just using one parameter – posts_per_page – to tell the function that we only want to display five posts. But there are lots more possible parameters you can use… check out these two pages to see a list of all the possible parameters that can be used with this function.

Now that we’ve got the information we need and have assigned it to a variable, we need to display it. In order to do this, we need to use a loop. Since the information is outputted in an array, we need to use a foreach loop. It’s not as hard as it looks. We’re pretty much saying we want to look at each thing in the $recent array, and we’re going to call it a $post. Then we do the stuff inside of the foreach loop… and continue to do it to each thing in the $recent array, until there aren’t any left.

So what is it that we’re doing inside of the foreach loop? Well, we’re displaying the recent posts, that’s all. Since we decided that this should be an unordered list (hence the <ul> tags) then each item in the list needs to be in <li> tags. Easy. Then we need to display the actual recent posts – each of which needs to consist of a link (because what’s the point of a list of your recent posts, if you can’t easily get to them?) and the title of the post. We start out as we would for any ordinary link – with an <a href=”">. Then we need the link itself inside those quotes.

The cool thing with these items in the $recent array is that each item has certain other values associated with them. So you can say $post->ID and it will give you the ID of the post, or $post->post_title to get the title. Awesome, right? So we use $post->ID in conjunction with the get_permalink() function (which takes in an ID of a post and returns the link for that post) to get the link. Remember to surround that with <?php and ?> tags to indicate that this is PHP code, and use the echo() function to display the output (otherwise it just sits there, and your browser doesn’t know what to do with it.)

After that, you need some text for the link, so it’s super easy to echo $post->post_title, which – you guessed it! – gives you the title of the post. Then just close your tags, end the loop… and voila! You have a list of your most recent posts!

More sidebar magic

Recent posts are awesome, and definitely good to have in your sidebar. But there’s more to the sidebar than just its content… what if you want to use the built in WordPress sidebar widgets, or have different sidebars on different pages of your website? You can be sure there’s much more fun to be had with the sidebars… next week!

For the last few weeks, we’ve been talking about the header of your website. So what’s next? Well, there’s the content section of you website, which changes on every page, and the sidebar, which can get complicated as well. So I thought this week, we’d take a little break and talk about the footer – the easiest section of your website.

Elements of Your Footer

The footer is the very, very, very last section of your website. It goes at the bottom, or foot of every page… hence the name. And it’s pretty much the same on every page, so just as we did for the header, we can use just one footer.php file and include it on every page in your website. Within that file, you’re probably going to want to put all the footer elements in a <div>, like this:<div id="footer">
(footer stuff)
</div>

So what goes in the footer? Well, some people put a smaller version of their navigation in the footer, displayed horizontally just like in the nav bar. This is super easy to do – you can do it exactly the same way as we did it in the header (but use a different id… remember, you should never use the same id twice on a page!).

Another thing that a lot of people put in the header is their blog’s copyright. Another easy thing to do. Just put something like this in your footer:<p>Copyright &copy; <?php echo date('Y'); ?> · blue sun studio, inc.· All rights reserved (Look! That’s what we have at the bottom of our website!) &copy; displays the © symbol, and if you remember our lessons on PHP, then this should look familiar to you <?php echo date(‘Y’); ?> Easy, yes?

Remember to Close The Door On Your Way Out…

Those are pretty much all the important elements of a footer. But there’s one more thing that’s very important…

I can almost guarantee that you will open tags in the header.php file… but you won’t close them. Take, for example, the <body> tag. You don’t see a </body> tag anywhere, do you? Nope. So you need to remember to close that, and any other tags you may have opened but not closed in the header, in your footer.php file. The closing body tag should be the very, very last thing in your footer file. Any other tags that need to be closed will depend on what you want to include in them (sometimes you want to have one big #content div that includes the footer, so you’d close it after the closing div tag for the footer. Other times you don’t want the footer to be a part of it, so you’ll close the #content div before you open the #footer div.)

Many of you will also have analytics code, for tracking the number of unique visits, pageviews, etc. that your site gets. That usually goes at the very end… just before the closing </body> tag.

Meet Me At The (Side)Bar…

And that’s all there is to the footer. No, seriously. It’s that easy.

But I’ll bet by now, you’re ready for a nice, cool drink… of fresh water, of course. (Or a Las Vegas Cowtail, perhaps?)

So next week, we’re going bar hopping! Wait. That doesn’t sound right… hold on…

We’re going sidebar hopping! Even more exciting!

By now, your header’s rockin’, I just know it. You know how to put a cool background on it, use one of WordPress’ built-in functions to put all your pages in the navigation, make your list of pages display nicely as a horizontal navigation, and use CSS to add cool, classy effects to your navigation when anyone hovers or selects one of the pages.

But there are still a few more important things to talk about in your header. Though these last few tips don’t have much to do with how your header looks, they’re just as important as putting a background on you header or making your navigation bar look nice.

Time To Go Home

Pop quiz: which page on your website are people going to go to most? The answer’s easy, and although every website is different, the answer is the same for 99% of you: your homepage is the page that people will visit the most. So, as the owner of the website, you want to make it super-easy for people to get there. Some people put a link in the navigation. While this helps, there’s an even better solution: your header itself. In fact, it’s expected that clicking on the logo of your website, or your header, will get people back to the homepage. Otherwise people will spend a lot of time clicking there, and get frustrated when they find out it isn’t even a link… or it goes somewhere unexpected.

Ideally, we want the entire header to be a link… except for the navigation, of course. It would be pretty silly to have your entire navigation link to the homepage, when you really want it to link to each of the individual pages on your website. Usually, the area that you want to be clickable is going to be a big rectangle (technically it’s possible to make almost any shape of area clickable, using a combination of <map> and <area> tags… but it’s very rare to see that used, and involves a lot more work than your typical rectangle, so we’re not going to go into that today).

Our rectangle needs to have a width and a height (otherwise, how will your browser know what area is supposed to be clickable?). This is easy to do, using the height and width properties in CSS, like this:#header h1 a {
height: 200px;
width: 900px;
} However… if you do that and nothing else, your area still isn’t going to be a big old link like we want it to be. Why? Well, we can think of it as a big block of area. But right now, we’re not telling our browser that… so we need to add one more property to our CSS – display:block;. #header h1 a {
height: 200px;
width: 900px;
display: block;
} This (obviously) tells our link to display as a block! Woo! How easy is that?

See No Website… Hear No Website?

Another thing that might not immediately come to mind when you’re developing your website, but that is also very important, is accessibility. Ideally, you want everyone to be able to use your website, even if they’re blind, or deaf, or otherwise impaired such that they cannot enjoy your website to its fullest extent. In addition, some people choose to keep JavaScript or CSS disabled – while they won’t be able to view your website as it was meant to be enjoyed, you still want them to be able to use your website.

One thing that we do, that you might have seen before, is put ‘alt’ attributes on images, so there’s text associated with each image for screen readers to read. But when we created our header, we didn’t use an <img src=”" alt=”" /> tag to create our image… instead we put it as a background on one of our header <div>s. This means we can’t use the ‘alt’ attribute. So what do we do?

Photo courtesy of Phu Son Nguyen

For most of us, we’re not using actual text in our header image… the blog title (and any other relevant text) is probably part of the image itself. So what we can do is add an <h1> element (that means header 1 – since the biggest and most important header on your website is the header that we’ve been discussing these last few weeks, and everything else is sub-headers) and put our blog title there. But… ew. You do that, and the text shows up right on top of your pretty header image. Doesn’t look so great, does it? Okay, so something needs to change.

Luckily, we have the text-indent property in CSS. We can put this property on the header’s <h1>, and set it to -9999px… that’s so far negative, there’s not a chance in heck it’ll show up on your actual website. It might seem like there’s no point in putting up a title that’s not going to show up… but anyone with CSS disabled will be able to see it, and things like screen readers and the spiders and bots from places like Google, Yahoo, or Bing will be able to see and understand this, even though the image means little to them. A good thing for your website’s search ranking, and a very, very good thing for accessibility.

That’s All, Folks!

Can you believe it? That wraps up everything I wanted to tell you about the header! Of course, if you have any additional questions, you can always ask in the comments section or even send me an email. Next week, we go to the very end of your website… the footer. But don’t worry, that doesn’t mean we’ll never talk about everything in between… all in due time, my friends. All in due time.

Prettify Your World! Or At Least Your Navigation…

There are all sorts of different properties that you can use to style your navigation – both on the <ul> (if you want to style the navigation as a whole), or on the <li> if you want styles on each of the individual items in the navigation. (Remember last week, how we used the cookie crumbs to see where we were within the HTML, to style it in CSS.) For example, if you want all of the text in your navigation to be black, then you could do #navigation ul {
color: #000000;
} But if you wanted space between each of the items in your navigation, you would put a padding attribute on the <li>s, since it affects each individual list item, rather than the entire block of navigation, like this: #navigation ul li {
padding: 5px 10px 5px 0px;
} There are all sorts of different CSS attributes that you can use in your navigation… as always, if you have any questions about any of them, just ask!

Another cool thing that you see on a lot of navigations is how something will change when you hover over a page, or when that page is selected. We don’t do that here on Sirius, but if you go visit Life’s Little Inspirations or Saya No Uchi and hover your mouse over any of the pages in their navigation bars, you’ll see what I mean. In addition, we have the cool feature here on Sirius that when you’re on a page (click on our About page, you’ll see what I mean), that page is highlighted in some way in the navigation bar.

Anyone Else Have That Hoverround Song In Their Heads?

It’s cool and all, but how do you do it? It’s easier than it looks. First of all, realize that all of your navigation items must be links. After all, isn’t that the entire purpose of your navigation? You want to enable your users to get to the different parts of your website… so of course, each item in the navigation must be a link. So it ends up looking something like this:<div id="navigation">
<ul>
<li>
<a href="http://yourpage.com">Page</a>
</li>
</ul>
</div> Of course, with more <li>s in there, and each with an <a href=”"> inside of it, but you get the drift.

So you have all those links. Because this is the way that HTML was made, the <a>s are what you hover your mouse over. (You know how when you hover your mouse over any normal link, and half the time it changes color? This is the same principle.) So you want to put the hover property on the link. How do you do this? Like this:#navigation ul li a:hover {
(whatever styles you want to change when you hover over the item in the navigation)
} You can put whatever styles you want there… make it change color, add a border to it, change the background… the possibilities are endless.

I Choose You, Pikachu!

The really, super cool thing about this is... if you want to add styles for the "selected" page (like when we went and looked at Sirius' About page, and saw that "About" was highlighted in the navigation bar)... it's almost exactly the same as the hovering that we just did. Seriously. Only one little change. Awesome, isn't it?

Instead of putting your styles on #navigation ul li a:hover {} you instead put them on #navigation ul li.current_page_item a {} And then you put whatever styles you want on it, just as you did with the hover.

So, What Have We Learned Today?

(I mean, aside from the fact that Allison consistently stays up working into the wee hours of the morning, and grew up in the age of Pokemon.)

We've learned that CSS makes our lives a heck of a lot easier, and lets us do all sorts of fun things to make our website just as gorgeous as we are! Yes, it's wonderful. And, as always, there's much more to come...

Last week, we discussed the super-cool wp_list_pages($args) function, and how it can make creating your navigation on your website super easy. If you want your navigation in your sidebar, for example, or anywhere else as a vertical list, then this already works perfectly. But what if you want it as a part of your header, like we do, in a horizontal list? Don’t worry, CSS is here to the rescue!

display: inline

First things first, you need a way to identify your list. While you want your navigation list to have a certain style, you’re most likely not going to want every single list on your website to have that same style. It’d be a bit weird to have horizontal lists when you want to list something in a blog post, don’t you think? So we surround the list with a <div> element, and put an id on that <div>. Let’s call it “navigation”. (Remember that we use <div>s – not tables! – to divide up the sections of our page. The navigation is just one little section of the page… and we did the same for the header, so you have a larger <div> that encompasses your navigation, and everything else in the header, as well.)

Now that we have a way to identify our navigation list, we can use CSS to make it look exactly how we want it to.

So in order to make our navigation horizontal, all we have to do is add this attribute to the element in the CSS:display:inline; That will make the list show up all in a line, rather than each above the next. But where do we put it?

Cookie Crumbs

Should we put it on the #navigation? Nope. You see, it means nothing to tell your <div> (which is the element that the #navigation id is on) to display inline. Because a <div> doesn’t have anything that it can display inline. It’s just a way to divvy up our page, after all.

No… we have to look inside the <div>. So what’s next? Our <ul> element. Is that where we want to put the display:inline;? Again, no. That would just tell the list as a whole to display in a line, which does just about as much good as telling the <div> to do that. In other words, it doesn’t do a thing for us. What we really want is to tell each of the items in a list to display in a line, right?

So… you guessed it, we want to put the display:inline; attribute on the <li> elements! We’ve got a bunch of them, and we want them to all stand nicely in a line, not piling on top of one another’s head like we normally would.

But there’s no id or class on the <li> elements in our code. How on earth are we supposed to do anything in CSS without them? It’s easier than you think, I promise. All you have to do is this: #navigation ul li { display: inline; } It’s like a path of cookie crumbs… from your id or class, you just step in through the levels until you get to the element that you want to style.

That’s all you have to do to get a horizontal navigation. Easy as can be.

Party Time!

There’s so much more I can teach you, just about navigation alone! But… well… Deb and Wendi are probably already frowning at me for writing a post while I’m supposed to be on vacation… (*innocent look*)… and it’s Wendi’s birthday (*even more of an innocent look*) so as much fun as it is to talk about code, we really should be partying, right?

So instead I’ll just break out the balloons and confetti, and save the rest of all that I’d love to tell you about navigation until next week!

GPS (Blog) Navigation

In order to have something to navigate through, you need to have different pages on your website, right? So you go into the wp-admin section of your WordPress website, like you would when you write a blog post. Create a new page… (not post! There’s a difference… posts are what dynamically go on your blog, whereas pages are static – like your About page, or Contact page, that are always there and pretty much stay the same.)

Once you’ve created several pages, you’ll want them in your navigation, right? So how do you do this? Well, if you wanted, you could hand code the link to each page into the navigation section of your website. However, this would mean that whenever you add a new page to your website, you will need to remember to update it in your code. Which just makes more work for you. Silly, right? Especially when we have… *superhero music*… the glory of PHP and WordPress!

Ahem. Got a little overexcited there.

But you should be excited! You see, WordPress has created a PHP function (yep, they wrote the function for you! Aren’t they wonderful?) that takes all of the pages in your website, and outputs them into a neat little list, HTML and all. This function is called wp_list_pages($args), and takes in an array of arguments ($args is the parameter) that customize your list of pages. All of these arguments are explained in detail in the WordPress Codex (the place where all of the WordPress functions are documented and explained)… but if you have questions about any of them, you’re always free to ask me in the comments, or even contact us if you’re too shy to ask publicly.

We don’t bite. Promise.

Making a List, Checking it Twice

As I said before, the wp_list_pages($args) function gives us back a list of the pages on your blog. But what does that mean, in HTML terms? It means that the functions gives you back something like this:<li><a href="http://siriusgraphix.com/services">Services</a></li>
<li><a href="http://siriusgraphix.com/about">About</a></li>
<li><a href="http://siriusgraphix.com/contact">Contact</a></li>
<li><a href="http://siriusgraphix.com/archive">Archive</a></li> Seems good, right? Each <li></li> is a list item. (And each <a href=”"></a> is a link – the url between the quotes after the href is the url that the link points to, and the text between the <a> tags is the text that displays when your browser parses the link like this: <a href=”http://siriusgraphix.com/”>Sirius Graphix</a> displays as Sirius Graphix.)

That all seems fine and dandy. However… we may have our list items, but our list is not complete. Not yet, anyways. You see, there are two different kinds of lists. You have ordered lists that are numbered, like this:

1. One
2. Two
3. Three

and you have unordered lists, that just use some sort of bullet point without indicating any sort of order, like this:

• Deb
• Wendi
• Rose
• Allison
• Son

Because there are two different kinds of lists, you have to differentiate them in your HTML code. If you want an ordered list, then surround your list items with <ol></ol>:<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol> Similarly, if you want an unordered list, then surround your list items with <ul></ul>:<ul>
<li>Deb</li>
<li>Wendi</li>
<li>Rose</li>
<li>Allison</li>
<li>Son</li>
</ul> Easy, right? Sure it is!

So. Since the wp_list_pages($args) function only returns the list items, we need to define what sort of list it is. If you wanted, you could very well make it either an ordered or unordered list – it’s up to you! But 99.99% of the time, you’re going to want to use an unordered list… it’s easy enough to get rid of the bullet points if you don’t want them, but it’s kind of silly to number your navigation when those numbers don’t really mean anything, and just clutter up your navigation.

Since almost everyone uses unordered lists for their navigation, it seems like it would make sense for wp_list_pages($args) to just return the entire list, <ul> tags and all, right? However, it’s actually better that they don’t. What if you wanted to add a link to an external page into your navigation… like Life’s Little Inspirations or Saya No Uchi? You could just do this:<ul>
<?php wp_list_pages(); ?>
<li><a href="http://lifeslittleinspirations.com/">Life's Little Inspirations</a></li>
<li><a href="http://sayanouchi.com/">Saya No Uchi</a></li>
<ul>

Abracadabra!

This is a nice beginning, but there’s still a lot more to talk about regarding the navigation section of your header, and how to use CSS to make it look great. After all, wp_list_pages($args) just outputs a list… a vertical list of items. But if you want your navigation to be horizontal like how we have it… you’re going to have to do a little CSS magic.

So come back next week, and don’t forget to pack your magic wands…

What goes into a good header? A good design, for one thing. A great logo, some nice fonts… a header that sets the tone for the rest of your website. But Deb’s the one to talk to if you’re interested in design. That’s not what I’m here for. The other important part of your header is the code – what makes your header actually work. And if you want to talk code… you know I’m your gal.

Head… Header… There’s a Difference, You Know

We’ve already discussed what goes in the <head> section of your website. And you know by now, that the <head> is not the same thing as the header. However, when you’re putting together your php files for your website, 99.99% of the time you’ll find the <head> of the website inside of the header.php file. It makes sense, right? The header.php file displays what’s at the top of every webpage, the <head> section is at the top of every webpage… so you might as well throw them together.

So you’ve got the doctype declaration up top, then the entire <head> section… and after that </head> closing tag, the <body> section of your website begins. This is where your header code starts.

Body First

So what comprises a header? Well, before it even starts, you have the opening <body> tag. Everything you see on your website is going to be inside of the body tag. So if there are CSS styles that you want on the entire website, then you can set them in your style.css file on the body tag, like this:body { background-color: #c0c0c0; } This just sets the background color of the body tag to #c0c0c0 (that’s the hexadecimal code for grey – more often than not, you will see hexadecimal codes used to refer to different colors on websites). Similar to how it is in PHP, you always need that semicolon at the end of each attribute, as well as the colon after the attribute name. Here the attribute name is ‘background-color’, and the attribute value is ‘#c0c0c0′. And since the <body> tag encompasses everything in your website, then the entire background will be set to gray. Think of it like your first coat of paint – you can add more paint on top of it, but the bottom layer will always be that color.

Backgrounds Are Important Too, You Know

Once you’re inside your <body> tag, what’s next? Well, let’s take a look at the header here on Sirius Graphix. If you look up top, you see that the first thing you see is the logo. There are a few things to take note of, regarding our logo. First of all, it’s really damn gorgeous. *nods* Yep. Heh… but we’re supposed to be talking about code here, aren’t we, instead of Deb’s beautiful designs. *shameless grin*

First thing to note is that the logo is a link. That’s right, the entire logo. You can click anywhere on it, and it’ll take you to Sirius Graphix’s homepage. (Wait! Come back! There’s still more to talk about!) Second thing to look at is the image itself – no matter how big you make your browser, even if it spans the entire Vegas strip, the image will still go across the entire page – without getting all stretched out of shape. (Er, not that I’ve ever tried this. But it sounds nice. And hypothetically, it should work…)

But how do you get the image there in the first place? More often than not, especially if you have a fancy header like ours, you’re going to want to use a <div> element, and put an id on it. (Need a quick refresher course? Go back and check out my post all about ids and classes.) Let’s call this id “header”. So it ends up looking like this:<body>
<div id="header"></div>
</body> Now that’s great and all, but how do you use it to put in a header image? Why, CSS, of course. Yup, we use a background attribute again. But this time we’re referencing the id, not the tag name – it would be silly to reference ‘div’, because we’re going to end up with so many <div> elements in our code that our CSS isn’t going to have the faintest idea which one we meant, and therefore put the style on all of them. Which is certainly not something we want, at least not in this case. Nope, instead we use the id name, like this: #header { background: transparent url(images/header.jpg) no-repeat 0 0; } Hm. That looks kind of similar to the background that we put on the body… but there are a lot of differences.

First off, it just says ‘background’, not ‘background-color’. This is because we’re setting more than just the color. Where it says ‘transparent’… that’s the color. We could very well have put #c0c0c0 in there, or whatever color we’d like. But if we want the possibility of the layers of paint beneath the background to shine through (which certainly does happen, sometimes), then it’s better to just make it ‘transparent’. And sometimes you do want a different color on the background, and want to set it there instead of writing ‘transparent’… and that’s fine too.

Then it says url(images/header.jpg). It’s still part of the ‘background’ attribute, because we haven’t seen a semicolon yet. This tells your browser where to find the image that you want to use for your background. Usually in most WordPress themes, there’s going to be a folder inside of your theme called ‘images’, which is where every image you use in your theme should go. That way you can always use the path ‘images/imageName’ to tell the browser where your image is. (And don’t forget the extension! ‘.jpg’, ‘.png’, ‘.gif’… there are different situations for each, but you’ll probably see at least ‘.jpg’ and ‘.png’ images in your theme.)

Next, you tell the browser how that image should repeat. I used ‘no-repeat’, since I don’t want a tile that says “Sirius Graphix” repeating itself across the page. (I only want that logo image once, you see.) But if you do want it to repeat, you can use ‘repeat-x’, ‘repeat-y’, or ‘repeat’. Remember in high school math class, where the x-axis was the horizontal one, and the y-axis was the vertical one? It’s the same here. If you want an image to repeat horizontally you say ‘repeat-x’, and if you want it to repeat vertically then you set it to ‘repeat-y’. And if you want it to repeat both horizontally and vertically, then you just say ‘repeat’.

The last part of the background has to do with positioning. For my background, you see that I wrote ’0 0′. Think about graphs once again, and you remember that (0, 0) was the origin. This is the same, except 0 0 is the top left-hand corner of your div. (For you math nerds, that would put us in the fourth quadrant, if I remember correctly.) Sometimes you’ll see values like ‘center center’, or ‘left top’… these do the same thing, except aren’t quite as exact. If you needed your background to be a little lower than how it started out, for example, then you could write ’0 10px’ (Don’t forget the px! Otherwise it won’t work right.), or if you wanted it slightly to the right, then do (5px 0). Or any combination of the two.

When you’re setting the background attribute in CSS, remember that it always must go in this order: color, image url, repeat, position. If you mix things up, it’s very possible that your browser will get confused.

Little By Little

I think that’s enough for one day, wouldn’t you agree? It doesn’t seem like much – after all, we only really talked about backgrounds. But it’s quite important, and very useful. I use backgrounds all the time, and sometimes even for uses that you might not even think to use them for! They’re very, very handy.

So now that I’ve given you a little taste of what goes into a header – an appetizer, if you will – next week, we start in on the main course. After all, you don’t really think that I’m so mean that I would tell you about how our entire header is a link, or how it spans the entire page no matter how big, and not tell you how to do it yourself, do you?

No, of course not. But you’re still going to have to come back next week if you want to find out.

All of that is important, very much so. You couldn’t develop a website without it. However, what I have not yet explained is the actual body of the website – the part of the code that tells the browser what it’s supposed to show people who visit your website. Everything else is important, true, but this is the most important part of all.

And, well… to have a great website, you need a great body. Er… <body>. So in website terms… what makes up a good body?

Header

Note that the header is completely different from the head of your website. The head goes at the very top of your code (right after the doctype declaration), and includes stuff like links to your CSS and JavaScript files, metadata, and other information about your website. None of which is actually displayed.

The header, on the other hand, is displayed. It’s what you see at the very top of just about every website out there. Here on Sirius Graphix, our header consists of our logo, our navigation bar, and that neat gold slider. It’s exactly the same on every single page within our website.

Because the header is the same on every page in our website (and this holds true for most websites out there), we can use a single header.php file (go look! More likely than not, there’s already a header.php file in your theme) and just include it on every page we make in the website. Convenient, isn’t it?

Footer

As the name suggests, the footer goes at the foot – or at the bottom – of your website. As with the header, most footers are exactly the same on all pages – they usually include copyright information, sometimes an abridged version of the navigation, and can include other information such as who developed your website. (You had us do it, right? We’re real good at these sorts of things. Just ask!) And, as with the header, since it’s the same on every page in your website, you can just use one footer.php file, and include it on every page. Easy peasy.

Sidebar

The sidebar goes – you guessed it – at the side of your website. Now here’s where it gets a tiny bit more complicated. But don’t be scared. We can handle this.

The easiest scenario is when you have one sidebar that stays exactly the same on all pages. In this case, all you have to do is include a single sidebar.php file, just like with the header and footer. (Actually, that’s a lie. The very easiest scenario is when you don’t have a sidebar at all. But in that case, this section about sidebars doesn’t even matter, right?)

But then there are the cases when you have different sidebars depending on what page you’re on, or two sidebars next to each other, or one sidebar on either side of the content… this is where it gets a little more involved. In some of these cases, you’re even going to have to have multiple files for the sidebar.

But not to fear! I am here… and I am here for you. In upcoming weeks as we go through the body section of WordPress themes, I will explain this, all of this, and by the end of it you’ll be able to create sidebars like a pro.

Content

Unlike the header, footer, and even the sidebar, your content section is going to be different on every page of your website. I mean it. Every single page of your website is going to have different content. (Because why on earth would you want two pages to look exactly alike? That’s just silly. Not to mention redundant and kind of pointless.)

So does this mean you have to have a different file for every single page on your website, since they all have different content? (If you have a blog, this can number into the hundreds, or even thousands.)

No, not at all.

*big sigh of relief*

You see, although the content on every page is going to be different, many of the pages have the same format. Take your blog posts, for example. Generally, blog posts consist of a title, the date it was posted, the author’s name, the actual post itself (consisting of words and pictures, usually), metadata, comments, and a comment form. And maybe some social media buttons and links to similar posts.

Every website is different, but within a website, every single blog post is going to consist of the same elements. So really all we have to do is make one .php file (usually single.php in your WordPress themes) that sets up the format for the blog post pages… and voila, all that’s left to do is insert the content for that particular blog post! Which is super duper easy. You won’t even break a sweat doing it. And… *drum roll, please*… you use PHP to insert the content, so you don’t even have to know which post the user is looking at! Your server does all the work for you. Ain’t it great?

Then there are other pages, like your About page (super duper easy), Archives page (easy), Contact page (a little harder, but plugins can help with this!), Shop page (also something plugins can make much easier… woo!), etc., etc…. depending on what’s in your pages, you can use the basic page.php template (like for the About page), or you can create additional templates that fit the format of your other pages. For example, here on Sirius we have one for our Archives page and another for our Contact page, since their styles are fairly different from our basic pages.

So there you have it, everything that makes up a WordPress theme!

Well… sort of. The rough outline, at least.

Next week, we really start discussing what makes up a website, as we look at all that comprises the header (not head! We already did that!) section of your website.

But before we move on to the next part of your theme – the actual HTML in the body that displays what you see on your website – there are a few last things to wrap up regarding PHP.

Operators

There’s one last thing that we haven’t discussed much in PHP, that you’re guaranteed to see in almost any PHP code out there. Operators. It might seem like we’re taking a step back into middle school math, but this will be painless. I promise.

First, we have the arithmetic operators: +, -, /, *, %. These do exactly what you’d expect: add, subtract, divide, multiply, and take the modulus (the remainder of one number divided by another. 5 % 2 is 1). You can also negate a value by putting – in front of it. Easy.

Then, there are the assignment operators. = is obvious, you’re just setting one value equal to another, like this: $a = 5. Then there’s += which means that you add the value to the variable. So $a += 2 would be 7, because we already set $a to 5. That works for numbers, but what about strings? Here you use .= which tells you to concatenate one string onto the end of other. Pretty much just sticking them together. So if we started with $b = ‘Hello ‘; and then did $b .= ‘world!’; $b would end up as ‘Hello world!’. You do something similar if you want to stick a variable in the middle of a string. You could just do $c = $b . ” What’s up?”; and it would show up as “Hello world! What’s up?” (Notice that I used double quotes to surround the string there. Since we had an apostrophe in “what’s”, I didn’t want it to be read as a closing single quote, which would screw things up. Luckily, in PHP you can just use double quotes instead, and avoid that problem.)

Next are the comparison operators. We already know that = sets a variable equal to a value. But what if we want to test to see if two things are equal? We definitely don’t want to set the variable equal to the value we’re testing for. That would be bad. So instead we use == or ===. $a == $b will be true if $a is equal to $b. $a === $b is the same, but also adds the constraint that $a and $b have to be the same type. (But why? Well, what if you wanted to test to see if $a is equal to the boolean value true? If $a is any non-zero, non-null value, then when you translate it to boolean it shows up as true. But that’s not what we want. So instead we’d use === to say that it’s only true if $a is the boolean value true, and if it’s not boolean, then it’ll show up as false.) Then we have != which tests to see if two values are not equal, and !== to see if two values are either not equal or not of the same type. The opposite of == and ===, if you will. The other four comparison operators should be familiar from your old math classes: <, >, <=, >= simply test to see if one value is less than, greater than, less than or equal to, or greater than or equal to another.

Then there are the incrementing and decrementing operators. ++ increments (adds 1 to) a variable. – - decrements (subtracts 1 from) a variable. Put it beforehand if you want to increment/decrement before the value is returned (if you start with $a = 1, echo ++$a; will print out ’2′). Put it afterward if you want to increment/decrement after the value is returned (if you start with $a = 1, echo $a++; will print out ’1′, and then if you echo $a; after that, it will print out ’2′).

Next we have logical operators. We’ve already talked about && and ||… ($a && $b) means that both $a and $b have to be true in order for the entire expression to be true, and ($a || $b) means that either $a or $b or both have to be true for the expression to be true. (You can also use ‘and’ instead of ‘&&’, and ‘or’ instead of ‘||’.) If you want either $a or $b to have to be true, but NOT both to have to be true, then you can use $a xor $b. Lastly we have !, which means not. (!$a) means that $a has to be false for the expression to be true. Make sense?

Teacher, Teacher, I Have A Question

Now that we’ve explained the basis of PHP for you, where can you go to find more information?

Well, you can always come back here, of course. For now I’m moving on to talk about HTML, CSS, and JavaScript, but you can be sure there will be more posts about PHP in the future as well.

PHP.net is an excellent resource. Any time you ever have to look up a function that you (or your web developer) didn’t create on your own, chances are you’ll find the documentation for it here. And it goes the other way around too – whenever you need to figure out how to do something (for example, what if you want to display today’s date? or change a string to all lowercase?) you can do a search for it, and 90% of the time you’ll find a pre-made function that does exactly what you need, on PHP.net. And while you’re there, check out the comments on every page – there you’ll find discussion and examples about how other programmers have used these functions.

w3schools.com is another great resource. While PHP.net is all about documentation, w3schools.com tends more towards tutorials and examples how to use things.

If you want to purchase a book about PHP, Head First PHP & MySQL is an excellent resource. I love the Head First series for learning any sort of programming language – they explain things in ways that are very easy to understand, and even have games at the end of every chapter to help you remember what you learned. I have a couple of the Head First books from back when I was first learning, and I can definitely vouch for how helpful and easy to use they are.

I Am Here For You!

If there’s anything else – anything at all – you want to know about PHP, or coding in general, just ask! Even if it’s something that can be found in any of those references, I’m always happy to help. Whether it’s something confusing from the code in your theme, or questions about different web technologies, or anything else coding- or tech-related, I’m here for you. Really. I want to help you guys. And maybe you’ll even get a blog post written specifically to answer your question!

I’m such a tease. For the last two weeks, I’ve been tempting you with a game of hangman, promising you real PHP code that actually works… none of that silly pseudo-code business. Can you blame me? I’ve got to keep you all coming back somehow…

Well. Today, I tease no more, my friends. Not only do I have real code for you in today’s blog post, I actually have code that you can download. For free. With tons of comments throughout that explain everything. Yes, I’m awesome like that.

And, even better, you can actually run this code on your own server (or hop on over to mine), and play an real working game (or several) of hangman. (No, really! Click the link, it’s awesome. And then come back and read the rest of the post.)

THE CODE: the abridged version

If you download the code itself, you’ll see there are a few things I don’t talk about today, like sessions and form HTML. These are way, way beyond the scope of today’s post, although I may get to them someday. But I’ve tried to leave comments within the code that will explain everything so it’s not too difficult to understand.

For the purpose of today’s post, this is the code we’re looking at, which is really just an excerpt of the code you can download:

$word = 'sushi';
if ($guessLength < strlen($word) && $hangman < 6) {
$message = "The game's not over yet...";
$match = false;
$guess = [user's guess];
$positions = array();
if (in_array($guess, $alreadyGuessed)) {
$message = "You already guessed '" . $guess . "'!";
$isGuessed = true;
}
if (!$isGuessed && $guess != null) {
$alreadyGuessed[] = $guess;
for ($j = 0; $j < strlen($word); $j++) {
if (strcmp(substr($word, $j, 1), $guess) == 0) {
$match = true;
$positions[] = $j;
}
}
if ($match == true) {
foreach ($positions as $k => $position) {
if (strcmp($display[$position], '_') == 0) {
$display[$position] = $guess;
$guessLength++;
}
}
} else {
$hangman++;
}
} }
echo $hangman . ' bad guesses.';
foreach ($display as $l => $letter) {
echo $letter . ' ';
}
echo $message; Like always, let’s go through it, line by line.

Initial Variables

$word = ‘sushi’; This one’s easy. (Although in the actual game code, it randomly chooses from a list of words instead.) All you’re doing is setting your $word variable equal to the value, ‘sushi’. Sushi has to go in quotes (technically you can use either single quotes: ‘ ‘ or double quotes: ” “) because it’s a string – a bunch of characters all put together.

In the actual code, there are a few other variables like $hangman, $guessLength, $alreadyGuessed, $hangmanImage, and $display that are also set, using sessions. For the purpose of today, you don’t have to know how it’s done, just know that they’re there.

The Outer If-Statement

Next, we open the if-statement. (Yes, it was a while loop in last week’s pseudo-code. While hypothetically that works great, since in a true human game it’s continuous, it doesn’t work quite so nicely in the computer world. So we use an if-statement instead.) Since it’s an if-statement, we need a condition to test, right? Here, our condition is actually two conditions, that both must be true. The first one, $guessLength < strlen($word), says that we're only going to keep playing the game so long as the number of letters that we've guessed right is less than the number of letters in the word. Because if you think about it, there's no point in continuing to play the game if you've already guessed the entire word, right?

The second condition in the if-statement, $hangman < 6, tells us that we're only going to keep going if there are less than 6 parts in the hangman. (Head, body, two arms, two legs.) If the hangman is complete, meaning there are already 6 parts there, then the player has lost the game and we don't want to continue playing.

You see the opening curly brace right after the conditions, but where’s the closing one? Remember – just like in HTML, your PHP code is like an onion. So each layer has to completely enclose the layers within it, and be completely enclosed by the layers outside of it. So the closing curly brace for our if-statement is at the end – after all the other inner loops have closed. The indentation makes this simple – you can easily see the closing brace because it’s on the same indentation level as the opening one.

Even More If-Statements

Just inside of the outer if-statement, you see a few more statements before your for-loop. The first is a variable that’s set to text which we’ll print out later. Then two variables: $match which is set to the boolean value false, and $guess which is set to the single letter that the user has guessed. Super easy. Making sense so far?

Before you step inside the for-loop, you also create an array called $positions… but don’t put anything in it quite yet. But we will, soon. Don’t worry.

Then a couple of if-statements. By now, you should be able to make some sense of them. The first one is simply making sure that the letter isn’t one you’ve already guessed, and printing out a message if you have. And the second one is saying that if you haven’t guessed the letter and your guess isn’t blank, then keep going with the code inside. You put the guess into the array of letters you’ve already guessed, so you can’t choose it again… and then you get to your first for-loop.

Moving On, The For Loop

Next comes your for-loop. Remember last week, when I explained the code you see here? Well, this week you see it in action. We’re starting at zero ($j = 0;), looping for the length of the word ($j < strlen($word);) and incrementing by one each time you go through the loop.

Then there’s an if-statement. It’s the fourth one you’ve seen in today’s code, so you’re sure to be cool with it by now. And I know you’ve seen that strcmp() function before. So what’s that substr() function do? It takes the sub-string of the string $word, starting at position $j in the string and taking the next 1 letter. So since our word is ‘sushi’, and if we’ve looped so $j = 1, substr($word, $j, 1) will be ‘u’. (“But why? Isn’t the first letter in ‘sushi’ ‘s’?” Yes, however remember that in programming, you always start at zero. So the letter at position 0 in ‘sushi’ is actually ‘s’, and the letter at position 1 is therefore ‘u’.)

So, if the substring is the same letter as the one the player guessed, then we’ll say that yes, there is a match – we’ll set $match = true;. In addition, we set $positions[] = $j;. But wait, what does that mean? Like the name suggests, the $positions array is an array that tells us which positions in the word have been guessed correctly. So if our word was ‘sushi’, and the player guessed ‘u’, then we would add $j (which at that point equals 1) to the array.

And we keep looping through the for-loop until we’ve checked your guess against every letter in the word.

Even Better, A For-Each Loop

Another if-statement. Yes, I know, y’all are experts at if-statements by now. I’m so proud of you. So we’ll skip over that, and look at that foreach loop. All it’s saying is that for each object in the $positions array, we’re going to call the key $k, and the value $position. (Remember that they’re paired up – every key matches up with a value. Like how every SSN matches up with a person.) So that little block of code just says, if the position you’re looking at still shows up as _, meaning you haven’t guessed it yet, then put in the guessed letter. Otherwise, if there isn’t a match, then add a part to the hangman.

Hold On… That’s It?

Yep. That’s all. As you can see, all that’s left after that are echo statements (and another sneaky but simple foreach). See? Coding isn’t so hard now, is it?