Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Building a design in Photoshop
- Converting Photoshop design to HTML and CSS
- Setting up MAMP on Mac and WAMP on Windows
- Moving HTML and CSS into a WordPress theme
- Building navigation
- Using custom fields
- Creating a commenting system
Skill Level Intermediate
If you are a premium member of the lynda.com Online Training Library or if you're watching this tutorial on DVD-ROM, you have access to the exercise files used throughout this site. I have downloaded these exercise files. I have them on my Desktop, and I have the folder open here. There are a few things I want to go over with these exercise files. Now in Chapter 1, movie 5 here, there is a Photoshop file Widget Corp Homepage.psd. If I open up that, I have the finished Photoshop file that we ended up with in this course.
You can do whatever you want with this. If you want to use this as a starter template for your own project or tweak things around to your visual liking. Just feel free to do whatever you'd like with that. Now some of the aspects of that Photoshop file, the logo and some of the product images, they've come from iStockphoto. So we want to thank them for this image, which is our logo, and some product images, and this. So in Chapter 3, we start out creating the WordPress theme.
This folder here called BLANK-Theme, in chapter 03_04, is literally that. It's a blank stripped-down, bare-bones WordPress theme. So this isn't specific to this course. We do start with it, but it will be a great starting point for any theme. Then from 03_05 onwards, we provide that same theme, only it's now called WidgetCorpTheme-1. These files in here are the starting point for each of these movies, but they are a complete WordPress theme as well.
So if you're jumping in at one of these movies, you'll need to activate this theme as it's provided. So how you do that is here in MAMP, in our htdocs folder -- Now this htdocs folder is the root of our local WordPress installation. In PC, it would be the www folder. Let me go ahead and drag that into the themes folder, which is within the wp-content folder of our root here.
Then we can go into WordPress, into the admin area, and activate that theme. So let me do that. localhost is where we're working. Within that is this wp-admin folder. Under Appearance now, that theme is going to be available for us to activate. Now if you activate this right now, it might look a little half complete. Of course, that's because these files are not complete. These are just starter files for where we start in that movie.
If you want to jump all the way to the end and have the complete WordPress theme, come here to the Chapter 5 folder of the exercise files, in the Final folder. That'll be the folder for the completed WordPress theme. So, let me drag that over. Replace that. Now if I reload over here, that theme is still going to be available. We haven't activated it yet, because if we activate it now it's not going to look quite right. The theme is one part of this finished product.
The other part is all the database stuff, all of the pages that we've published and all the blog posts that we've published. You're not going to have that in your own local install of WordPress just yet. You can follow along with all the movies and publish it as we publish it, or to jump ahead, there is this file here that you can import that's going to give you all that stuff. So, that's that widgetcorp.xml file. I'm going to copy that on to our desktop. Now if you want to import it, go under Tools, to the Import option here.
The last link is for the WordPress. That's the one you want. You can Choose File, grab that XML file, and hit Upload file and import. We're going to choose our self a one user here. Check this checkbox. We want to make sure we get absolutely everything that's in this XML file. Hit Submit. It's going to go through its importing process. If we go under Pages, you'll see all these pages are going to pop-in here. You didn't have to hand-publish these. It just came with that import that we just did.
Another important aspect to make sure this theme is kind of going to look right is the fact that this product-images folder is here. That's provided in the Exercise Files in this Final folder. Make sure that's present in the root directory of locally working with WordPress. Now under Appearance, I'm going to Activate the new theme and go click our title here and take a look. This is where we end up. This is our final product of this whole course.
So there are a few things that look little different. You can adjust this in the settings, where it says Just Another WordPress Site. There is an option to change that. But otherwise, this is our final looking theme. If you are a monthly subscriber or annual subscriber to lynda.com, you don't have access to the Exercise Files, but you can follow along from scratch with your own assets. It's also important to note here that there are some free assets that come with this theme. You can download those as exercise files from the course page. Those being the Photoshop file here and the Blank starter theme.
So let's get started.