Moonplayer is an ambitious project that promises to offer free streaming music by means of Youtube videos! It works great, and we’ve had the privilege of working on both the design and frontend development of the site. We focused on a UI that would allow users to easily control their experience without having to leave the page or stop the music.

Along with Matt Mock and Dan Lecocq, we tried to keep the design clean and give all of the elements plenty of room to breathe while still packing in the many features the website offers. The result is an ever-growing seamless music streaming experience that costs nothing.

Check it out here!

Last month, I helped my good friend Roxy Roknian and her fellow blogger Caroline Shadood design a logo for the blog at broadist.com! Broadist is an up-and-coming fashion blog that’s gaining steam! I worked with Roxy and Caroline to find the perfect minimalist logo to suit their needs.

Recently I helped the talented music photographer Katie Summer create her photography website and logo! The site includes a jquery image viewer, blog, and info page. The site was designed to mirror her personality and artistic style!

www.moonplayer.com

I’m learning a lot of exciting things about jQuery in the process, and I plan on posting some new tutorials soon! Until then!

Another problem that arose in my early days of building websites was the problem of making multiple parts of the same page editable. If you create an “About Me” page for your client, you can allow them to edit the the main page content by going to the page editor and selecting the “About Me” page. But what if they also want some additional content in a sidebar or in a separate section of the page? Again, querying the WordPress data solves this problem for you! Let’s look at an example.

We’re going to make an “About Me” page for your an imaginary client and allow them to change several sections of the page by changing post content. So to start, we’re going to make the About Me page template. To start, we’ll make the page template header. It’s very simple, all we need to do is make a new file called about-template.php add a PHP comment at the top of the page:

<?php /* Template Name: About Me */ ?>

That’s all you need for WordPress to recognize the file as a page template. Now we’ll use the php call for the WordPress header and some divs to contain our content:

<?php /* Template Name: About Example */ ?>
<?php get_header(); ?>
<div id="wrapper">
        <div id="what_we_do">
        <h3><!-- Title Goes Here --></h3>
        <!-- Content Goes Here -->
    </div>
    <div id="team">
        <h3><!-- Title Goes Here --></h3>
            <div class="team_member">
                <h5><!-- Title Goes Here --></h5>
                <!-- Content Goes Here -->
            </div>
    </div>
        <div id="services">
            <h3><!-- Title Goes Here --></h3>

            <!-- Content Goes Here -->
        </div>
</div>
<?php get_footer(); ?>

Now we’ve got a very basic structural layout for our content. Here comes the important part: we’re going to query specific posts to get our content and plug it into the layout. We’ll create a post called “What We Do” and place our content inside for the “What We Do” section of the about page. Next, we’ll create a category called “Team Members” and create a few team member posts. Just for this example we’ll make two different Team Members: John Doe and Jane Doe and make sure they’re in the category called “Team Members”. Finally, we’ll create the “Services” post and add our Services content. With all of that in place, we’ll query the posts with the query_posts() function and plug the content into the correct divs.

In order to get the content we need, we’re going to need the some of the post ID numbers. In order to find this, click on “Posts” in the backend of WordPress and hover over the edit link for the post in question. Look at the link url in the bottom of your browser and you’ll see that the url ends something like this:

post.php?post=341&action=edit

The number following “post=” is the id number. So now let’s update our code to pull the correct content for our About page! We’ll be using the query_posts() function for this, so let’s talk a bit about how that works. First you should look at the WordPress function reference for query_posts(). Using query_posts we can specify a specific post to pull content by writing ‘p=’ and then the id number in the function arguments. Like this: query_posts(‘p=40′) for a post with an id of 40. We can also specify a specific category to pull posts from using ‘cat=’ and the category id. To start let’s pull the post content for the “What We Do” and “Services” sections:

<?php /* Template Name: About Example */ ?>
<?php get_header(); ?>
<div id="wrapper">
    <?php query_posts('p=1'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="what_we_do">
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>

    <?php endwhile; ?>
    <?php endif; ?>
    <?php wp_reset_query(); ?>
    <div id="team">
        <h3>Team</h3>
        <?php query_posts('cat=1'); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="team_member">
                <h5>Team Member Name</h5>
                <?php the_content(); ?>
            </div>
        <?php endwhile; ?>

        <?php endif; ?>
        <?php wp_reset_query(); ?>
    </div>
    <?php query_posts('p=2'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="services">
            <h3><?php the_title(); ?></h3>

            <?php the_content(); ?>
        </div>
    <?php endwhile; ?>
    <?php endif; ?>
    <?php wp_reset_query(); ?>
</div>
<?php get_footer(); ?>

So what’s going on here? We query the posts for each different section, and then run the loop. The loop is the part that looks like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Now that we’ve started the loop, we can use all of WordPress’ familiar functions such as the_content() and the_title. The wp_reset_query() function simply resets our query so that if you wanted to use the WordPress loop later in the page, it would behave as it normally does. I’ve put each php function in its own set of PHP tags. You don’t have to do this, but I find it keeps thins a little more orderly! Notice that for the “Team” section, we started the loop after the opening Team section div. This is because for every team member post in the Team category, WordPress will run the code in the loop. We want all of the team members’ profiles to be contained within the “team” div, so we’re starting the loop within the “team” div. I’ve created a little test page so you can so what this code looks like. I made some dummy posts and added this basic styling for the team member profiles:

.team_member {
width: 800px;
margin: 20px auto;
}

Here’s the result.

This may seem like a lot of code, but there are some advantages to this method! First of all, if your client wants to change the content of the post, they can do so without consequence. And since the post is queried by it’s ID number, your client can change the name of the post without screwing anything up! For the “Team” section, your client can add new posts to the “Team” category and it will show up in the “Team” section, complete with custom styling.

I hope this tutorial has been helpful, and gets you a step closer to making websites that are easy to edit for any client!

Next week: Part 2: Generating custom, multi-level nav menus! Stay Tuned!

In collaboration with Technicolor Grayscale and Sean Herman, we created for Phoebe a WordPress site that would her to create and edit her own jQuery photo galleries. Each gallery Phoebe adds shows up automatically in the navigation bar and when clicked loads the gallery dynamically using AJAX. We used jQuery for the navigation and the AJAX to create a clean and simple portfolio page for Phoebe.