codeswan blog

Microformats – What are they, and why are they important to my website?

In a perfect world, search engines would have human-like intelligence. You could ask them a question, and they would actually provide results with the perfect answer. They could look at a website, and understand exactly how the images related to the words, or what every element on every webpage is.

Unfortunately, we don’t live in a perfect world. Search engines have to guess about a lot of things. After all, that’s why SEO is such a big business – because search engines need us humans to tell them what they’re looking at… and sometimes aren’t smart enough to tell if some of us sneakier humans are trying to trick them.

So we all add our metadata to the head of our websites, add keywords to our pages and posts, and all that. But that isn’t all you can do, you know.

Well, there are lots of other things you can do to give the search engines a better chance at finding your website. Not all of them are good. Some might get your website blacklisted forever.

I most definitely don’t suggest using those sorts of SEO tactics.

But lucky for you, there are these things called microformats that are completely on the up-and-up… they’re even recommended by Google.

The surprisingly human world of microformats

Essentially, microformats are simply attributes that you add to your existing HTML. Most of them are simply additional classes that you put in the elements surrounding whatever it is that you want to identify… like the ingredients in a recipe, or the location of an event.

Wikipedia has some pretty good articles explaining the different formats you can use, and Microformats.org has two lists about all their microformats specifications, if you want to read more about them.

Okay… so why should I care?

Not long ago, Google announced their new Recipe View… which – you guessed it – makes a big use of microformats to determine what sites have recipes on them.

So now, for food bloggers like me? Yeah… microformats have suddenly become very important. (So much so, that I developed a WordPress plugin and a web application that help other food bloggers format their recipes with microformats.)

But don’t think you’re off the hook if you don’t write about recipes. Google also currently uses microformats in their Reviews, People, Products, Events, and other searches… and future specialized searches they roll out will surely involve microformats as well.

But that’s not all! There’s also microdata (instead of microformats) if you use HTML5 on your website… so stay tuned, because there will surely be another post about that coming soon.

in Coding, HTML | 8 Comments

WordCamp LA 2010

On September 11, 2010, WordCamp LA happened at Loyola Marymount University, in Westchester, Los Angeles, CA. WordCamp is a conference that has presentations about all things WordPress.

Oh… and guess what? I was one of the presenters!

the audience
Photo Credit: Austin Passy

My presentation was about Web Development for Beginners: Decoding the Code Behind Your WordPress Theme… same sort of thing I talk about here on the blog.

me, presenting
Photo Credit: Bryan Villarin

Now, I’ve always hated public speaking. So I was nervous, of course. But I managed to make it through alive… even if I did begin to lose my voice just minutes into my talk. (Not my fault! Well, sort of. There was no microphone, and I’m a very quiet person anyways… it was inevitable that I’d lose my voice.)

after my presentation
Photo Credit: Bryan Villarin

But just in case… I bribed everyone with homemade peanut butter cookies.

cookes

And you know? It actually wasn’t so bad once I got started, and comfortable with the crowd. Who’d have thought I might actually enjoy speaking in front of a crowd?

If you didn’t get to see my presentation, you can download my slides or watch the video of my talk. (Although I’ll give you fair warning, the quality of the video isn’t very good at all.)

I had a lot of fun teaching people in person (instead of just through the website)… I do think I shall have to do this whole public speaking thing again sometime, don’t you?

in Coding, Conferences, CSS, HTML, JavaScript, PHP, Tutorial, Video | Leave a comment

HTML/PHP: Sidebars, and What Have YOU Done Lately?

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:

1
2
3
4
5
6
7
<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!

in Coding, HTML, PHP, Tutorial | 4 Comments

HTML: Footer

Footprint
Photo courtesy of Allison Day

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:

1
2
3
<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:

1
<p>Copyright &amp;copy; <?php echo date('Y'); ?> · Allison Day · All rights reserved</p>

&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.

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

We’re going sidebar hopping! Even more exciting!

in Coding, HTML, Tutorial | Leave a comment

HTML: Header Accessibility

Snow monkeys in Nagano, Japan - 'see no... website?'
Photo courtesy of Phu Son Nguyen

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:

1
2
3
4
#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;.

1
2
3
4
5
#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?

Snow monkeys in Nagano, Japan - 'speak no... website?'
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.

in Coding, HTML, Tutorial | Leave a comment

HTML/CSS: Hovering In Your Navigation

Now that you’ve got your navigation lining up all prettily, what’s next? Well, you could stop there, if you wanted. But there’s so much more you could do using the wonders of CSS, to make your navigation (and soon your entire blog!) even more beautiful.

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

1
2
3
#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:

1
2
3
#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 CodeSwan, but if you go visit NextDance and hover your mouse over any of the pages in the navigation bar, you’ll see what I mean.

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:

1
2
3
4
5
6
7
<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:

1
2
3
#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 NextDance’s Archives page, and saw that “Archives” 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

1
#navigation ul li a:hover {}

you instead put them on

1
#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…

in Coding, CSS, HTML, Tutorial | Leave a comment

HTML/CSS: Navigation: All Your Cookies In A Row

The cookies are in line, your navigation should be too!
Photo courtesy of Phu Son Nguyen

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:

1
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:

1
#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… I’m supposed to be on vacation… (*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 sunscreen and leis, and save the rest of all that I’d love to tell you about navigation until next week!

in Coding, CSS, HTML, Tutorial | Leave a comment

HTML: Navigation

Last week in my coding series, we discussed headers. More specifically, we discussed how to put a gorgeous logo onto your header, using the background attribute in CSS. It’s a wonderful start, but there’s far more to headers than that, you know. For example, navigation. Although some people put their navigation in the sidebar, the majority of websites have the main navigation as part of the header.

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 me if you’re too shy to ask publicly.

I 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:

1
2
3
4
<li><a href="http://sushiday.com/services">Store</a></li>
<li><a href="http://sushiday.com/about">About</a></li>
<li><a href="http://sushiday.com/contact">Contact</a></li>
<li><a href="http://sushiday.com/archives">Archives</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://codeswan.com/”>CodeSwan</a> displays as CodeSwan.)

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:

  • Red
  • Blue
  • Green
  • Yellow
  • Purple

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>:

1
2
3
4
5
<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>:

1
2
3
4
5
6
7
<ul>
    <li>Red</li>
    <li>Blue</li>
    <li>Green</li>
    <li>Yellow</li>
    <li>Purple</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 Sushi Day or Fridgg? You could just do this:

1
2
3
4
5
<ul>
    <?php wp_list_pages(); ?>
    <li><a href="http://sushiday.com/">Sushi Day</a></li>
    <li><a href="http://fridgg.com/">Fridgg</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…

in Coding, HTML, Tutorial | Leave a comment

HTML: An Intro To Headers

So you want to start putting together a website. Where do you start? Well, at the top, of course. The first thing anyone ever sees on your website is your header – so you want it to be great.

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 that’s not what I’m here for (believe me, you don’t want me designing your site!). 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:

1
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 CodeSwan. 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 Son’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 CodeSwan’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:

1
2
3
<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:

1
 #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 “CodeSwan” 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.

in Coding, HTML, Tutorial | Leave a comment

HTML: Head(er), Shoulders, Knees, and Toes…

For the last two months we’ve been talking about PHP. The month before that, we discussed tables, ids, classes, and other rules and concepts that are important for developing a website theme.

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 CodeSwan, my header consists of our logo and my navigation bar. It’s exactly the same on every single page within my 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. 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 CodeSwan I have one for my Archives page and another for my Contact page, since their styles are fairly different from my 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.

in Coding, HTML, Tutorial | Leave a comment