Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et dolor eu orci consequat tristique. Ut in justo et purus consequat laoreet. Fusce rhoncus est quis odio consectetur aliquet. Donec a metus lectus. Fusce facilisis gravida hendrerit. Sed vel nisi elit, eget imperdiet tellus. Nullam et tortor sed sem iaculis mollis ac at enim.
No CommentsLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et dolor eu orci consequat tristique. Ut in justo et purus consequat laoreet. Fusce rhoncus est quis odio consectetur aliquet. Donec a metus lectus. Fusce facilisis gravida hendrerit. Sed vel nisi elit, eget imperdiet tellus. Nullam et tortor sed sem iaculis mollis ac at enim.
No CommentsLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et dolor eu orci consequat tristique. Ut in justo et purus consequat laoreet. Fusce rhoncus est quis odio consectetur aliquet. Donec a metus lectus. Fusce facilisis gravida hendrerit. Sed vel nisi elit, eget imperdiet tellus. Nullam et tortor sed sem iaculis mollis ac at enim. Phasellus euismod, turpis non cursus auctor, mauris magna euismod mauris, ut vestibulum nunc turpis sit amet tortor. Curabitur odio nulla, posuere ac lobortis sed, vestibulum eget velit. Proin faucibus hendrerit erat ornare condimentum. Cras urna justo, imperdiet et pellentesque vitae, luctus vitae ante. In sagittis ullamcorper tincidunt. Aenean nec sem eget tortor feugiat pharetra. Fusce eu diam id mauris congue porttitor. Nunc arcu eros, posuere a venenatis ac, semper quis risus. Pellentesque ornare urna pellentesque risus dapibus volutpat feugiat tortor dapibus. Nunc tellus mauris, consectetur sed congue et, ultrices malesuada ipsum.
No CommentsLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et dolor eu orci consequat tristique. Ut in justo et purus consequat laoreet. Fusce rhoncus est quis odio consectetur aliquet. Donec a metus lectus. Fusce facilisis gravida hendrerit. Sed vel nisi elit, eget imperdiet tellus. Nullam et tortor sed sem iaculis mollis ac at enim. Phasellus euismod, turpis non cursus auctor, mauris magna euismod mauris, ut vestibulum nunc turpis sit amet tortor. Curabitur odio nulla, posuere ac lobortis sed, vestibulum eget velit. Proin faucibus hendrerit erat ornare condimentum. Cras urna justo, imperdiet et pellentesque vitae, luctus vitae ante. In sagittis ullamcorper tincidunt. Aenean nec sem eget tortor feugiat pharetra. Fusce eu diam id mauris congue porttitor. Nunc arcu eros, posuere a venenatis ac, semper quis risus. Pellentesque ornare urna pellentesque risus dapibus volutpat feugiat tortor dapibus. Nunc tellus mauris, consectetur sed congue et, ultrices malesuada ipsum.
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 Comments
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.
No Comments