Hello! I’ve been busy working on a new project with Ingenious Designs called Moonplayer.com! It’s a music player that plays songs and music videos from YouTube by artists in your playlist. Very cool and worth checking out! You can find it at:
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!
No CommentsI used to have this problem a lot, and maybe you can relate: You’re working with a client and they want to be able to change the content of their site with ease. The only problem is, you don’t want them to ruin the styling in the process! Sometimes when clients start changing things around in the post editor, disaster ensues. So what do you do? Query the WordPress post data with PHP and style it just how you want it, that’s what!
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;
}
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!
No CommentsWell, I’ve been quite busy lately, but I have some exciting plans for new tutorials!
The next tutorial I have planned is a very in depth WordPress tutorial about Pulling Post Content into Custom Pages. This tutorial will help you organize your WordPress sites in ways that will not only make it easier to keep track of the content for your websites, but will also make editing content a snap for clients if you’re in the business of making WordPress pages as a web developer or designer. I will also touch on Creating Dynamically Generated Nav Menus (complete with dropdowns!) and will even incude some Basic jQuery Tutorials!
So, exciting stuff coming up! I haven’t finished these quite yet, but wanted to let you all know that these will be arriving soon, so please check back soon! In addition, I’m finishing up a couple of new projects, so some new and interesting projects will be joining the portfolio lineup soon
No Comments
We’re proud to announce that our most recent piece of work, the Spillt Motion Graphics website, has been nominated for a CSS Design Award and has been added to the Favourite Website Awards 2011 Public Shortlist! It was great creating this site for Spillt, an awesome motion graphics company based in Denver, and working with designer Sean Herman! Thanks to everyone who has visited, supported, or enjoyed the site. Check it out here.
Here’s to many more exciting websites to come in 2011!
No CommentsPart of what makes WordPress so useful is the myriad of features it supports, and the high level of customization that it offers. When first starting out, it can be daunting to try and explore all of the options available to you! So here are 5 techniques that I found useful when I first starting using WordPress to build websites.
No CommentsHere are 5 of the features that make TextMate one of the best options for developers today. After working with many different editors, I’ve found that TextMate saves the most time and has the most efficient workflow. Hopefully this article will help you save as much time as I have by tapping into the powerful tools offered by Textmate!
1 CommentI don’t know why, but I feel constantly compelled to redesign my website! I hope you like the results of my most recent update. I find the site has taken on a cleaner look that’s easier on the eyes. I hope you feel the same!
No CommentsIt’s hard to know where to begin when you’re buying your first book in an attempt to learn a new skill. Always make sure to buy the newest edition of any web design or development book you’re interested in, because times change and so do the best-practices for each language. There’s no such thing as a perfect book, so make sure to Google anything you don’t understand so you can find reference material to inform you. In many cases, this will allow you to get much more out of any book you read. There’s a wealth of great information out there, but it’s these 5 books that I found exceptional for beginners:
No CommentsI came across a pretty frustrating IE6 background bug a while ago and it took me a while to figure out the surprisingly simply solution! Well, technically this isn’t a bug. It’s technically a user-error, but the code (albeit incorrect) works in most modern browsers! Take a look at the following code:
body { background: url('images/bg.jpg')top left #fff no-repeat; }
If you try this code in Safari or Firefox, it will work perfectly. You will see the background image positioned at the top left with no-repeat and with a white background. However, IE6 will render no background! Strange, no? Quite strange. The problem is the lack of a whitespace character between the background url and the position declarations. I became so used to Firefox and Safari’s lax handling of this code that it took me forever to figure out that one little space was causing all of my problems! The following code fixes the problem:
body { background: url('images/bg.jpg') top left #fff no-repeat; }
Hopefully this post will save someone some frustration!
No CommentsThis is my first tutorial. Ever. So please let me know if there is anything that needs improving or if you have any questions, comments, or suggestions. That said, I hope this helps someone out!
I’ve found that it’s often easier to work on a webpage with body tag ID’s. Luckily, you can add these automatically to every page in WordPress! Now if you need to style your Blog page elements differently than your Contact page, you can simply add the #Blog selector to any rules that apply specifically to your Blog page. All we need to do is add some code to your WordPress theme’s index.php file. Here we go:
4 Comments