codeswan blog

Game Dev: Properties

tldr: they’re called properties

You know the most frustrating thing ever as a dev? (Even more frustrating than having to name things?)

Not knowing the right search terms.

I was trying to figure out how to have one of those little customizable fields in the Unity component editor. You know, the ones where you can enter a value specific to each object, and easily access it in your scripts.

Parameters? No.

Input fields? Nada.

Variables? Ughhhhh no.

All of the above come up with some entirely different search results than what I actually wanted.

Finally… properties!

Yes I feel dumb.

Anyways. All you have to do is create a public property – for example, public int points; … and voila! A customizable property that you can access from within the object.

And if you want to access it elsewhere? gameObject.GetComponent().propertyName; So easy.

And now my pickups have different point values associated with each one!

in Unity | Leave a comment

Game Dev: Box Collider problems

tldr: box collider != box collider 2d. *facepalm*

So I’m dipping a toe into gamedev. Actually I started about a year ago – learning Unity, doing alllll the tutorials, all that. And then I stopped for a while because life (and, you know, actual paying work) and now I’m back. And of course I’ve forgotten everything.

But I’ve learned, over the years, that the best way for me to learn something is to actually have a goal. Tutorials get old quick, especially when they aren’t immediately relevant. So I’m going to hack things together, figure it out as I go, and most definitely fuck a lot of shit up… but in the end, I’m making something I want, and that’s the best motivation of all.

So dirty it is.

The game I’m trying to make is something that I absolutely LOVED as a kid. I mean, we played a ton of computer games, but this is the only platformer I can remember playing all the way through over and over and over again. (Also see: Chip’s Challenge, and Minesweeper. How much you wanna bet Chip’s Challenge is gonna be the next game I try to remake?)

It’s a little shareware game called Pickle Wars. And before you give me some shit about it not being good because you fancy yourself a “real” gamer and blah blah blah… I don’t care, and I’m making it anyways. So there.

Anyways. So after doing some research (aka playing through and drawing out the levels so I can remake them), I started creating it in Unity.

Most of my tutorials up until now have been in the 3D space, so even though this is a 2D game, my automatic instinct was to use the Cube and Sphere 3D objects for everything.

And then this happened:

A post shared by Allison Day (@sushiday) on

So the robot boy asset that comes with Unity is a 2D asset. And little did I realize, the Box Collider 2D (on the robot) won’t collide with the normal 3D Box Collider (which is what the Cube assets for the floor automatically came with). Hence the robot falling through the floor.

Luckily this is a quick fix – just remove the Box Collider from the Floor Tile prefab I made, and replace it with Box Collider 2D. (And do the same for alllll the other prefabs.)

Will I run into other issues from doing it this way? Probably. But does that fix my issues for now? Yep!

Like I said, hacking things together, figuring it out as I go, and most definitely fucking shit up. The best way to learn!

in Unity | Leave a comment

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


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:

Recent Posts

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

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:

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:

Copyright &copy; · Allison Day · All rights reserved

&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:#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?

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

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

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

  • Store
  • About
  • Contact
  • Archives
  • 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=””>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. One
    2. Two
    3. Three

    Similarly, if you want an unordered list, then surround your list items with <ul></ul>:

    • Red
    • Blue
    • Green
    • Yellow
    • Purple

    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:

    • Sushi Day
    • Fridgg
      • 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