Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So with our homepage now in place, we are going to start building out some more sections of this site from within WordPress. So what we are looking at here is our static HTML and CSS design for what our product page is going to look like. So it's got the title of the product up here, a big image of the product, its price and product code and an Add To Cart button and some information about that product. So that's what we're trying to build. Now I want to do a little bit of introduction to how best we can store all this data from within WordPress in the smartest possible way.
So let me minimize this for a second and remind you that we have our WordPress theme open on the right in TextMate and our static HTML and CSS template open here on our left. We'll look at the HTML code for storeproduct.html, so this is the code that is creating that project. It's got the title of the product up here, it's got that information about the product here, the price and the product code, and the description of the product here. So we are going to need to do is make a custom page template and stuff but I want to talk about data storage first and a specific feature of WordPress called Custom Fields.
So when we're going to be creating these new product pages, they are literally going to be pages. I'm going to come up here to New Page and I am going to be title the page just like this. I'm going to call it the Mega Sprocketizer page. I'll probably make it not uppercase like that. We can always make things uppercase with CSS if we want to, but if we wanted to make it lowercase then in the future it will be a lot easier if it's already in that format. We could come out to our TextMate project and grab all the stuff that isn't the title, if I want to.
Come over here and paste that into the product. We wouldn't paste in the visual editor like that. We would click HTML and then paste stuff in here, so that retains all these HTML tags that we already have going. And we could publish that and that would be fine and that would work, but think about what we got going on here. Everything is kind of just in here, the price, the product code, the dimensions, it's all kind of stuck in this template. Let's say two months down the road they decide you know we're not going to display pricing anymore. We just don't think that's appropriate for the Widget Corp Corporation.
We want to remove those, and let's say we got a thousand products. We got to come in here manually to each one of these and delete this line and resave it a thousand times. And it's just not a good way to handle this type of thing. We have a much smarter product than that. We're using WordPress and storing data like this all kind of just clumped up into this content area. It just isn't a good idea. So we're not going to do that. We are going to publish this page as is. For now we'll make it a child page of our Store, see how you can do that, you can give it a parent.
Then just kind of hit Publish and it will be a child of the store page, there you can see in the URL. We are going to store each bit of that information separately and that's what custom fields are all about, and that's what I want to introduce you to. So you can see right below this content area is this area called Custom Fields below and we are going to store all those little bits of data as custom fields. So one of them is going to be Price so let me grab this. I'm going to call the custom field, Price. I can call it whatever I want in the Name field over here, paste in the price, and just click Add Custom Field.
You'll see it flash yellow, kind of telling you that it saved in there. I'm going to grab the product code. We call this one product_code. Save that. I'll grab the dimensions, 3' x 3'. It's like the world's largest widget. And then the information about the product we'll just store as the actual content. It's just one bit together.
And we'll save that. So that's how custom fields works and that you can save these individual bits of data like that. Then when we go and create our custom template, which we're going to be doing next, we can grab out these little bits of data and use them in special places in the template. That way later if we've made that same decision where we were not going to be displaying the price anymore, we can go into that template and just delete the little area where it outputs the price and it's just all taken care of, prices removed for all thousand of those products because there was a template change not an actual content change.
That's the idea behind custom fields. Now if we're going to make another product, click New Page again and we'll call it Supers Sprocket 2000, and we'll have that same content in there, just same kind of content. Now you'll see this is, the one little change is, because we already have created price and product code and we've already have custom fields. Now they show up in this drop-down box and we can collect them. If you want to make a brand new one you can always do that. You can always invent them anytime you want, but it's just trying to help us out so that we can be consistent there, and then make a different price like $200, and just go through an add those.
So that's the smart way to store data like this and it's really what makes a content management system a content management system, so that is how custom fields work within WordPress.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101136 Viewers
61 Video lessons · 87901 Viewers
71 Video lessons · 71778 Viewers
56 Video lessons · 103648 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.