Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So our WordPress theme is almost done. There is just one more thing that we need to wrap up, and that's the homepage. That's what we're looking at now, and it looks just how we want it to look. It's just these two Featured Widgets down here are just static content and we want to replace that with dynamic content, now that the store has been fleshed out. So I will open up our WordPress theme. We have opened all of our WordPress theme files as a project in TextMate. And the file that we have working, that's our homepage, is this home.php file.
And you can see here is Featured Widgets and then there is an unordered list and here is the two widgets that we have featured as list items, but you can see that this content is just static. It's not dynamic as we want it to be. So what we're going to do is show one, the most recently published widget in the Sprockets category, and the most recently published widget in the Sprunkler category. That way it kind of changes a little bit. If they publish a new sprocket, this is just going to swap out immediately with the new one that they published.
And they can switch things around if they want by just adjusting the publication date of the widget's page, and the most recently published one will be here on the front. So we are going to use a query_posts function. You have seen it before in these previous videos, query_posts, and we want to pass it parameter, a parameter, a query string, telling it exactly what we want. So we want posts_per_page of 1, we just want 1, and we want the post_type to be a page, and the post_parent is the ID of the parent page of sprockets.
Now, if we forgot what that was we can just go back to our pages. Find the Sprockets page. You can see if you click on it in the URL, it says post =92. That's the number, that's the ID, and any product that we publish that's in the Sprockets category is a child page of Sprockets. And you can see that we have the Mega Sprocketizer is a child page of Sprockets. That's what we're after here, so the post_parent is 92 in this case. Now, we don't need to start a loop again, because we're only showing this one thing, so we'll just do the_post.
And instead of displaying the static title, we'll use the_title. And instead of displaying the static content here, we'll just say the_excerpt, which is kind of like the content only. It just only displays a little bit it, a few sentences of it. In case the description was super, super long. It's going to prevent that from coming up. Now, instead of the static URL resource here, we're going to grab that custom field. We're going to echo out the get_post_meta of the post ID.
We're passing it product_regular here, and just as a recap, if we go into that product and look at its custom fields, product_regular has this value of exactly where that image is located. So that's what's getting spit out here. And then true to ensure that it's just a single string. And then it's the Image of, we'll just use the title here again, so we have a proper alt tag, and then a link to the product itself.
So we can do that with the_permalink. Now let's get rid of this one for now and see if that's working properly. Go out to our homepage in a new tab. We have the Mega Sprocketizer. It looks just like how it looked before, only everything is being pulled in dynamically, and if we click VIEW PRODUCT we'll go right to that product, just how we want it to be. So we want to also display the most recent product in the Sprunkler category, so let's just duplicate that code and instead of it being 92 we'll make it 94, which is the ID of the Sprunkler page. We'll hit Save and we'll be able to see exactly what happens there.
The most recently published Sprunkler is right here, again, with the same dynamic content, and hit VIEW PRODUCT and I'll go right to that product page. So we've come a long way here, folks. Our theme is complete. We have a homepage that's dynamically showing widgets. We have a few pages you can click around and view. We have a store page where you can view categories of products as well as individual products. We have a blog page where you can see the most recent blog entries as well as individual blog entries with a comment system. Lots going on here.
So I think you have the tools you need to extend this theme as needed.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101993 Viewers
61 Video lessons · 88702 Viewers
71 Video lessons · 72528 Viewers
56 Video lessons · 104187 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.