Why bother? WordPress is not only a blogging platform but also a powerful Content Management System (CMS). With it, you can control your content and add posts via the web or even a mobile device. WordPress also gives you access to hundreds of useful plugins, including Search Engine Optimization and site statistics tools.

The purpose of this tutorial is just to get you started in customizing WordPress. Please keep in mind that this is a seven-step crash course, and is not exhaustive. You'll learn how to control WP's dynamic menus, sidebar, header and footer. This will be especially useful if you already have a site designed and just need to know how to integrate it into the WordPress platform.

Requirements for this tutorial:

• You must own a website with a hosting plan.
• You must be able to upload files to your site via FTP.
• You must have access to a database through your host.

Step 1: Get WordPress

Installation Options

• Download WordPress from wordpress.org and follow the easy installation instructions here
• If you host your website with bluehost.com, you can install WordPress in one click via the Control Panel.

Step 2: Establish Your Child Theme's Files

Now that you have WordPress installed with a default theme (probably twentyeleven), you can setup your child theme.

1. Create a new folder under /wp-content/themes/ For this tutorial, we’ll call it my-theme. This is the folder for your Child Theme.
2. Create a new stylesheet: /wp-content/themes/my-theme/style.css
3. Now we’ll need to copy some files over from our Parent Theme. Be sure to copy and not move these files. When creating a Child Theme you should NEVER need to edit any files under the Parent Theme.
   Copy these files:
   header.php
   footer.php
   index.php
   sidebar.php
   from: /wp-content/themes/twentyeleven
   to: /wp-content/themes/my-theme 

Understanding the Files

Before we move on to editing files, let's be sure you understand the purpose of each.

style.css
This is the main stylesheet for your Theme. This will override the stylesheet of the Parent Theme, and it is the basis of your site customization.

header.php and footer.php
These will act as the shell for every page on your site. As the name implies, header.php contains the opening HTML, HEAD, and BODY tags, and any content that should load at the top of your site, such as your logo, navigation menu, and the opening of your main container DIV. footer.php contains everything that should load at the bottom (and possibly on the side) of your site, as well as the closing BODY and HTML tags.

index.php
This is the generic default template WordPress will use when no other template is specified. On your blog home page, by default, WordPress lists your latest posts via index.php.

sidebar.php
This is the template for the WordPress sidebar.

Once you understand the basics, you'll be able to customize more specific template files, such as page.php, search.php, archive.php, and more. In all cases, I recommend first copying the files over from your parent theme, and then editing them.

Step 3: Setup Your Stylesheet

Before moving forward, it's best to have an established design for your site. I'd suggest building your stylesheet and at least one HTML file, considering how you want your navigation, sidebar, header and footer to look. For this tutorial, I'll use a very basic design that you should not use for your site.

Open /wp-content/themes/my-theme/style.css and add the following setup info to the top of the file:

/*
Theme Name:     My First WordPress Theme
Theme URI:      http://www.mydomain.com/wp-content/themes/my-theme
Description:    This is my first WordPress Theme. It's a child theme of the Twenty Eleven theme
Author:         Your name or WordPress ID
Author URI:     http://www.mydomain.com/
Template:       twentyeleven
Version:        0.1.0
*/

This will initialize our Child Theme and make it available for selection in the WordPress backend.

For this tutorial, we'll import the stylesheet of our Parent Theme, twentyeleven. This will ensure that any blog styles we don't implement will be covered. In the interest of making your site completely unique, though, I recommend taking this line out once you're comfortable. For now, add this line just below the setup info:

@import url("../twentyeleven/style.css");

If you've created your own stylesheet, go ahead and paste it below this line. Otherwise, for the purposes of this tutorial, you can use this:

body {
    padding:0;
    margin:0;
    background-color: #000;
    color:#000;
    font-family: "Helvetica";
    font-size: 12px;
}
 
#my-header {
    background-color: #287aa0;
    width:1004px;
    height:100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 10px 0 10px;
    color:#FFF;
}
    #my-header h2 {
        color:#FFF;
    }
#main {
    background-color: #FFF;
    width:1024px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
    nav {
	float: right;
    }
    nav li {
	display: inline;
    }
    #my-sidebar {
        width:200px;
        min-height:100%;
        float: left;
        background-color: #CCC;
        padding: 5px;
        overflow: hidden;
    }
    #my-content {
        width: 804px;
        float: left;
        padding: 5px;
        overflow: hidden;
    }
footer {
    width:1024px;
}

Save the stylesheet.

Step 4: Setup Your Header

Now open your header.php file.

Leave everything above the opening <body> tag alone for now.  Below it, you should put the top half of your site. That is, everything up to and including the opening <div> tag for your main content. If you're using my tutorial examples, use this:

 
<header id="my-header">
<h1 id="site-title">
        <span>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
        </span>
    </h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</header>
<div id="main">
<nav></nav>
<div id="my-sidebar"><?php get_sidebar(); ?></div>
<div id="my-content">
 

Notice the PHP code inside the header; it is key site information: the URL to the home page, the site title, and the site description. There's also the sidebar code. These are variables set in your WordPress installation, and are available throughout the site. Get to know them:

 
// outputs your site's main URL
echo esc_url( home_url( '/' ) );
 
// outputs your site's title
bloginfo( 'name' );
 
// outputs your site's description
bloginfo( 'description' );
 
// outputs the contents of the main sidebar, including any widgets
get_sidebar();
 

Also notice that the <nav> element is empty. We're going to fill it in by dynamically pulling in the WordPress Menu. But first we have to set it up!

Login to your WordPress backend at yoursite.com/wp-admin

Go to Appearance > Menus, enter a menu name, create it, then add some menu items. You can use custom links or pages categories if you've created any.

Now, to pull those menu items into your site, put this PHP code between the opening and closing <nav> tags:

 
<?php
$menus = wp_get_nav_menus();
$menu_items = wp_get_nav_menu_items($menus[0]);
$menu_items_count = count($menu_items);
foreach ($menu_items as $menu_item) {
  if ($menu_item->menu_item_parent == 0) {
    print'
<li><a href="'.$menu_item->url.'"">'.$menu_item->title.'</a></li>
 
';
  }
}
?>
 

Step 5: Setup Your Footer

If you haven't worked with dynamic headers and footers before, you might be wondering why some of the <div> tags in the header aren't closed. Every template page in WordPress loads header.php, then its content, then footer.php -- so it's in footer.php is where those tags are closed. And, of course, where your footer element will go.

If you're using my examples, all you need to add to footer.php is the closing <nav> tag, right at the top of the file. If you want to put the sidebar in my example on the right of the page rather than the left, you'd take it out of the header, put it in the footer, and adjust the floats in the CSS

Step 6: Setup Your Sidebar

Open sidebar.php and remove the <div> with the ID of "secondary" -- be sure to remove the closing tag from the bottom of the page as well. This will free up the contents of the sidebar to be controled by the container we created in the stylesheet. Alternatively, you could add styles for #secondary to your stylesheet, but there's really no need. Remember, the original sidebar.php file still lives under the twentyeleven folder if you ever need to start over.

Step 7: Setup index.php

Normally, there isn't much you'll need to do with index.php. But since we've added the sidebar to our header, which means it will load globally throughout the site, we need to take it out of index.php. So open up the file and remove this code from the second to last line.

 
<?php get_sidebar(); ?>
 

Done!

We've only covered the basics here, but hopefully you've gotten a sense of the possibilities of WordPress. When you want to customize more template pages, such as category.php, page.php, archive.php and search.php, you can copy those files from twentyeleven into your theme folder and get coding.

Do you give a shit?

Do they?

If I am not immediately behind you, please, do not hold the door for me. I can probably manage on my own. The last thing I feel like doing is sprinting up to the door, especially if the only reward is not having to open it myself. And you shouldn't have to stand there like an idiot, wasting your time, lending me your momentum. Just go. Via con dios.

Sometimes, though, you should definitely hold the door.

The gender-neutral situation in which the door should always be held is when someone is immediately behind you. You really have no choice unless you truly don't care. And if that's the case, I'm cool with it. Because how many times have we all held the door for some turd who refused to thank us? You always run that risk when you choose to hold the door for someone. Especially if you're letting them through ahead of you, those sons of bitches had better look up from their cell phones and thank you. If they don't, I'm pretty sure it's legal to rip the door from its hinges and pummel the person with it.

The male-specific instance, obviously, is when you're with a woman. This woman could be your grandmother, your aunt, a woman with whom you have no relation, your girlfirend, your mistress, or your wife. Any woman. You really don't even have to be with her. However, if even she doesn't thank you, pummeling is still an option. Especially if it's your grandmother.

Women, if you're there, this concerns you as well.

Hey.

Hey girl.

If you're with a man, especially if he is your husband, boyfriend, or friend-zoned twit, you need to realize that he is probably going to want to hold the door for you. It isn't because he doesn't think you can do it. He knows you can, baby, but he just wants to do it for you. Let's not turn this into an equal rights thing, okay muffin head? We men get so few chances in life to show you that we care. There are so many automatic doors out there and, sweetie, revolving doors are tricky, but we should probably go through separately. You first. I insist. But when we're approaching any regular door, a door that one person can open for another, honey face, get the fuck out of the way. Just. Just please move aside and let us open the ridiculous door for you. It may seem unintuitive and illogical, but, please. Do it for us, you gorgeous little ass hole. We need this.

// every second your audio element is playing
$(audioElement).on('timeupdate', function() {				
    var vol = 1,
    interval = 200; // 200ms interval
    if (Math.floor(audioElement.currentTime) == 15) {
        if (audioElement.volume == 1) {
            var intervalID = setInterval(function() {
	        // Reduce volume by 0.05 as long as it is above 0
	        // This works as long as you start with a multiple of 0.05!
	        if (vol > 0) {
	            vol -= 0.05;
	            // limit to 2 decimal places
                    // also converts to string, works ok
                    audioElement.volume = vol.toFixed(2);
	        } else {
	            // Stop the setInterval when 0 is reached
	            clearInterval(intervalID);
	        }
            }, interval);
        }
    }
});

So, 15 seconds into the audio, this will start. It will decrease the volume by 0.05 every 200 milliseconds until volume reaches 0. At the start we set volume to 1, which is 100% volume. If your user can change the volume, this will be tricky. If you start at 1, it might bump up the volume before fading out. In that case, you'll want to consider getting the current volume, then rounding it to a number that's evenly dividable by 0.05 before kicking off the interval.

Note: It seems like some people find this page when trying to figure out how to fade images in and out in HTML5. If that's you, listen. HTML5 does not create animations. Javascript does. When you hear people talking about HTML5 like it's the new Flash, they are talking about HTML5 being manipulated by Javascript. (Either that or they just don't know what they're talking about.) If you want an easy way to fade images in and out, try jQuery. Once you include jQuery in your site, try its .fadeOut() method.

 
<form id="registerForm" class="ajaxForm" action="/register" method="post" onsubmit="event.returnValue = false; return false;" accept-charset="utf-8">
<input type="hidden" name="_method" value="POST" />
<input type="text" name="data[User][username]" maxlength="100" />
<input type="text" name="data[User][first_name]" maxlength="100" />
<input type="text" name="data[User][last_name]" maxlength="100" />
<input type="text" name="data[User][email]" maxlength="100" />
<input type="password" name="data[User][password]" />
<input type="password" name="data[User][cpassword]" />
<input type="submit" value="Submit" /></form>
<div id="registerForm_result"></div>
 

I used to bind the ID of form like this in jQuery, and write out a text string to represent the form data I wanted sent to the handler. That's because I didn't know about jQuery's serialize function. The function takes the form data and "creates a text string in standard URL-encoded notation." This almost eliminates the need to make your bind function unique to each form. There are a couple of other tricks. Take a look at the jQuery first:

$('.ajaxForm').on('submit', function(e) {
	var formId = $(this).attr('id'),
	doAction = $(this).attr('action');
	$.post(doAction, $(this).serialize(),
		function(data) {
			$('#'+formId+'_result').html(data);
	});
	e.preventDefault();
});

Let me highlight the aspects that make this reusable:

$('.ajaxForm').on('submit', function(e) {

We are calling the form by the class name, not the ID. Any form given the class name "ajaxForm" will be bound to this.

 
var formId = $(this).attr('id'),
doAction = $(this).attr('action');
$.post(doAction, $(this).serialize(),
	function(data) {
		$('#'+formId+'_result').html(data);
	});
	e.preventDefault();
});

First, we take the ID and action of the form being called.
Next, we post the serialized form data to the handler specified in the form's action attribute.
On success, the handler should output a message to indicate all is well, or an error indicating otherwise. Remember that div at the bottom of the registration form? This is where the returned message will go. The ID of the form is "registerForm" and the ID of the DIV is "registerForm_result" -- so all we have to do is append '_result' to the formID and jQuery will know where to send the message.

As for the handler, it will depend on what language you're using. Note that in this example, I put the form data into an array. So, in a PHP example, you'd want to get all the values of

$_REQUEST['data']['User']

or get the username via

$_REQUEST['data']['User']['username']

-- you could make a reusable handler, but you'll probably just want to send the data to an individual controller method via the action attribute.

This is a good way to find faster songs for working out or slower songs for relaxing. I used it for running. That is, using BPM to control my SPM (steps per minute). SPM can be matched up with a specific pace. So when you run to the beat of a song, you're running at that pace. (See important note below.)

If you're interested, the table below is a pace to SPM conversion chart (found here). (You'll need to know your stride length to convert SPM to pace. To calculate your stride length, walk a known distance while counting your steps. Then divide the distance you've walked (in feet) by the number of steps you took.)

Important note: The Internet has brought to my attention that elite runners run at 180 SPM, regardless of pace, and vary their stride length, not their SPM to go faster or slower. Read more here. Although the method described here seems to work OK for me, I am not an elite runner, and I'm far from being an expert.

Anyway, after BeaTunes updated my music library with BPM, and I found out which paces matched up with which BPMs by my stride rate (3'3''), I was ready to make a playlist. Here's a screenshot of it. Look at the two columns on the far right. Next to the BPM, I put the corresponding pace in the Comments field.

This playlist is an hour long, and I created it for a run up to 10k. I like to increase my speed in increments while I run, as you can see. I tried it out on a 5.3-mile run, tracking my pace with RunKeeper on my phone, and found that it wasn't perfect but worked pretty well:

You can see more details on my RunKeeper page. That first mile definitely shouldn't have been faster than a 9:50 pace. I'm not sure what happened there, but you can see the rest of the run was pretty consistent. Compared to my other runs, it was extremely consistent. Mile 5 should have been closer to a 9-minute pace, but I can probably fix that by tweaking the playlist a bit.

I'm pretty happy with the whole thing, but I should point out the problems here. First, obviously, your speed should probably be controlled by changes in your stride length rather than your stride rate. And there are possibilities for error in every aspect. BeaTunes might not get the BPM of each song exactly right. Your SPM to pace conversion might be a bit off. You might not be able to run to a rhythm very precisely. There's also the maintenance issue: unless you don't mind using the same playlist every day, you'll have to put a good amount of labor into making new ones.

I found it nice to have the music there as a guide. Even if you don't want to run exactly to the beat of the song, it can give you an idea of how fast you should be going. When I wanted to speed up or slow down, I did, and had an idea of how far off the planned pace I was. If you give it a shot, let me know what you think.

In the summer of 2010, Digg tanked because it suddenly tried to become more focused on social, and the community hated it. Rose left Digg around this time. There was a mass user exodus from Digg to Reddit, and Digg has still never recovered.

So here's a second chance for Rose. But even if he succeeds in engaging people in Google+ (which seems impossible at this point), he'll be perpetuating what Whittaker says has quelled innovation at Google.

More info:

"Social became state-owned, a corporate mandate called Google+. It was an ominous name invoking the feeling that Google alone wasn’t enough. Search had to be social. Android had to be social. You Tube, once joyous in their independence, had to be … well, you get the point. Even worse was that innovation had to be social. Ideas that failed to put Google+ at the center of the universe were a distraction."

- James Whittaker, "Why I Left Google"
http://blogs.msdn.com/b/jw_on_tech/archive/2012/03/13/why-i-left-google.aspx

"Rose has an avid online following, stemming from his days as a host on TechTV and the long-running podcast 'Diggnation.' Though Oink -- which was a local recommendations app -- may not have succeeded, it was able to hit 150,000 downloads in its first month. That kind of ongoing fan engagement could be a boon to Google+, which has been criticized for low engagement and tricky user accounting."

- http://allthingsd.com/20120315/exclusive-kevin-rose-will-join-google/?mod=googlenews

I built this website with HTML5, CSS3, and jQuery. This was partly an experiment with some of those technologies (which were still kind of new to me at the time), partly my final project as an undergrad, and partly an attempt to put everything I do together in one package.

Go to phillycitizen.com

Even though my friend is not very interested in technology, he probably doesn't want to cut himself off entirely from hearing about it. At least, not voluntarily.

Eli Pariser has recently written a book and given a TED Talk about what he calls the "filter bubble"--the isolated state you're left in by algorithms that tailor Google results and the Facebook news feed to your interests. That friend of mine who isn't into technology, he probably won't see a link to an article in Wired magazine when I post it to Facebook.

Pariser points out that this is bad for society, bad for democracy, and keeps people sheltered from ideas that are outside their comfort zone, and, to a certain extent, it's true.

But then he goes on to say The Washington Post and the New York Times are "flirting with personalization," implying they are using these same kinds of algorithms to protect readers from stories they don't want to see, and that's just not true.

What he's referring to (and I believe it's with more specificity in the book) are things like "recommended links" on news websites. Newspapers sites typically use a Facebook plugin to show you which links from the site your friends have been sharing or liking. That's all. What they are definitely not doing is hiding articles from readers based on past preferences.

Displaying some recommended links is a far cry from the filters used by search, aggregation and social websites. I don't like the idea of someone, particularly a non-technical person, trying to shoehorn news websites into this archetype just because it's an archetype they've become fascinated with.

In the talk, Pariser refers to the traditional role of broadcasters and print editors as gatekeepers. He says that what's happening is a shift "from human gatekeepers to algorithmic ones," which is a profound and apt thought when we're talking about the whole Internet as a medium.

But it's a thought that, at least for the moment, only applies to social networking and search sites. Parser is a non-technical person who seems to have a weak understanding of how news publications operate and how they approach their mission, and I just don't think he's qualified to write books or give talks on this topic.