This is where things get a bit tricky - for me, not you. Now that you have a fully functional website running on your computer, how you set it up is entirely up to you. What kind of website do you want? Basically there are two types of websites that we’re dealing with here. You could be making a blog, where you’ll post some sort of regular content, or you could be making an info-site, where you’ll simply describe a product, company, or yourself. Sure there are plenty of other websites, like e-commerce, social networking, content sharing, or web apps. However, those are all way more complicated affairs that you can’t really accomplish with a simple Wordpress site, so we’ll stick with what is ultimately 75% of websites out there.
See my ongoing design journals for more of my thoughts about what a website is.
The problem is that I can’t just tell you to “go here” and “do this” this time around because it might not apply to everybody out there. Here’s what I’ll do, though. I’m going to build out a complete website, using the Wordpress platform we set up in the last few tutorials. You can follow along with me if you want, just to get a feel for how everything works, or you can pick and choose what you want to use for your site. I’ll try to cover as many Wordpress things as I can get to, so we can really get our hands dirty and built exactly the website Gotham needs, as well as the one Gotham wants! First, though, it’s best to get a game plan together.
Part 5: Get a Game Plan Together
Just for the sake of this tutorial, I’ll come up with a random website idea and go through the process of getting it set up. Let’s make a website for . . . let’s see . . . oh, how about my girlfriend Alyson? Let’s pretend that she’s been asking me to make her a website for like a year and I’m just getting around to it. I mean, that’s just a bit of background to give the site I’m making some purpose.
Anyway, before we get started, we need to come up with a list of requirements for the new site. Technically we should have done this before we set up IIS or Wordpress, but whatever. The point is just to have a clear idea of what we need Wordpress to do for us. Sit down with your client (in this case it’s probably you) and get a list of what they want. Let’s just say that Alyson told me what she wanted in a website like a year ago and I made a mental note of it to make it happen some day. It’s good to have a sort of mission statement kind of thing so your website has a real purpose. Here’s what I’m working with:
Alyson Thiel is an independent artist who wants to promote her work and have a platform for sharing ideas and pieces with other artists.
It’s that easy. It’s not a thesis or anything. Just be clear about generally what kind of content you’re making, and whether it’s a more static info-site or a regular blog type affair. Technically Alyson just wants an info-site and a portfolio for posting all of her arts, but I’ll throw a blog in there too for the sake of tutorialization. Next you should get a list of a few things the site needs to get done. This includes any pages you want to have and any specific functions or visual things you want to see. As far as I’ve been able to remember after like a year of putting off thinking about it - er, for the sake of this tutorial, I mean - this is what I know:
- She wants it to look pretty. This is actually pretty average for what you’ll hear from a client as far as art direction goes.
- She wants a home page with a fancy cycling banner that shows off her work.
- She wants a biography page with a - well - biography on it, I guess.
- She wants a CV page to post her CV on
- She wants a “work” page which has image galleries for her art, split into different categories or whatever
- I’ll include a “blog” page which will be basically a blog, including comments and all that.
Another step you want to take is to get the actual content you want to show on each page. I’ll let Alyson write her own biography and CV, and we’re working on getting digital versions of her arts, but I can just use placeholder stuff for now.
Okay, so you have all that stuff together? You have a clear concept and you’re ready to put it together? Then let’s start tackling these things.
Part 5 A: Set that Thang Up
I know I said you can just follow along if you want to and whatever, but you should stick with me through this part, because this is universally important stuff. Actually, the next part is pretty important, too. On second thought, forget I ever said you could go on your own. What was I thinking?
When you loginto your dashboard, you probably see this “Welcome to your blah whatever” message. You can ignore that, really. I’ll take you through each page in the “Settings” section, and explain what they do.
There are a lot of options in the General Settings section. If you don’t need a tagline (like me), you can make it blank. Leave the URLs as they are for now, but know that you’ll have to change these when you deploy the site. Changing the “New User Default Role” will change what non-you people will be able to do when they register with your site, so it should probably be left as “Subscriber” unless you want people to be able to contribute stuff (note that is for posts, not comments - people will still be able to post comments). Pick your timezone carefully, and then set the Date and Time formatting as you like.
In Writing, you can change some settings for your posts. You can also add a bookmarklet and set up “Post via e-mail.” Don’t worry about the bookmarklet or the email thing for now, because those aren’t really usable until you deploy the site to a real web space.
The Reading page lets you control some settings for your blog and whatnot. You can also tell Wordpress to have a static front page instead of a blog. We’ll return here when we’re messing with pages, in the next part of this tutorial.
The Discussion Settings can get pretty complicated. For the most part the default settings are fine, but if you want any specific options for comments on your posts, you can probably find those options here. By default any commenters have to submit their name and email address, and their comments have to be approved by an admin (you) before they can be seen. This will help stop idiots and spam, but it can be kind of hassle for both you and your commenters. I’ll show you how to install a CAPTCHA plugin later (it’s pretty simple), so you might be able to turn all that off. One setting I’m changing is that I’m turning off “Avatar Display” down at the bottom of this page. I don’t see any need to show little icons (which are usually just blank) for every comment.
In Media you can control settings for images in posts. These defaults are all perfectly fine, and you should only mess with this if you have specific problems with images at some point.
The privacy setting should still be set to “Ask search engines not to index this site” which is how you want it while it’s still in the development environment. Still, it’s good to know where this setting lives, so you can turn it on when you’ve deployed the site.
In the Permalinks section, you can control how the URLs for your pages and posts will look. It’s a good idea to switch to something besides the default, because if you include the date and post name in the URL it will be much better for search engines and whatnot. I like using “Day and name.”
You should also take a look at the “Users” section of the Dashboard. In “Your Profile” you can fill out your personal information, which will be attached to each post you make on the site. Personally I don’t care about this for the admin account. I will create a separate account for Alyson so she can post things to the site, and she can adjust the personal info for herself. You can go ahead and make the admin you and then you can just make posts right from the admin account, or you can create a new account (“Users” > “Add New”) for yourself and make posts with that. It’s up to you. Just know that any posts you make are tied to the account you were logged in with when you made the post.
Another thing I like to do is just get rid of all the “Sample” garbage that Wordpress has when you first set it up. Go to the “Pages” section (click “Pages” in the dashboard menu), mouse over the “Sample Page” page and select “Trash.” I’ll show you how to make a new page later, so don’t worry about losing anything.
Do the same thing with the “Posts” section, removing the “Hello World!” post from the list. This will also remove any comments that are on the post. One thing about Wordpress is that these Sample items aren’t actually gone, they’re just in the trash, so you could get them back if you wanted. It’s good to know in the future if you ever accidentally delete something you need.
We also need to set up a couple more folders so we’ll be able to upload images to our Wordpress blog. This is a really important step that I totally meant to wait until now to tell you. First go to the directory where you installed Wordpress and find the folder called “wp-content.” Then go to the root of your hard drive (C:) and create a folder called “tmp.”
Now do this for each of those folders: right click the folder, select “Properties” and go to the “Security” tab. Press “Edit” and select “Users.” Check the box under “Allow” for “Full Control.” All the checkboxes should be checked now for “Users” on both the “wp-content” and the “tmp” folders. This will ensure that Wordpress can write files to those locations.
Now we have a clean slate that we can move forward with. Let’s make it look nice, though, shall we? Now we'll take a trip through the “Appearance” section of the Dashboard.
Part 5 B: Theme Heat
The first page of the Appearance section will show you what themes you have available. The default Wordpress theme is called Twenty Eleven, and it’s okay, but we want something a little less default. You might notice you have another theme installed, called Twenty Ten (this is true as I write this, but in the future they’ll probably change the default themes at some point). Twenty ten is just like Twenty Eleven, but it’s one less.
Wordpress has a built-in system for installing new themes, which is in the “Install Themes” tab of the Themes page of the Appearance section of the Dashboard. It’s a pain to install themes that way, actually, so you should go to
wordpress.org/extend/themes/ to browse them there. As I write this, there are 1,516 different free themes for Wordpress. That’s cool because there are plenty of options, but it’s difficult because that can be intimidating (plus let's be honest, a lot of them are garbage). Luckily, they have a handy Tag Filter you can use to bring the results down to a more manageable size. You can also just browse the latest submitted themes.
I want something that’s mainly white, so I searched for “white” and “light.” I also added “Flexible Width” (which I recommend that you do, too) and “Custom Background” to the options. That narrowed the selection down to 20 options. If you know you want a two- or three-column layout, or you know you want a specific feature, you can limit it further. I want to find something that’s pretty open so I can still use a lot of Wordpress features. Also, as per the client requirements, it has to be pretty. That actually rules out quite a few themes.
Click on a thumbnail to see a preview of the theme in action (you can even click on links and stuff in the preview). I like this theme called “Platform.” It’s very clean, and very simple. Most themes will work just the same, so you should be able to pick any theme you want and be able to do the same sorts of things with it.
Click on the name of a theme you like, and then hit the “Download” button to get a zip file with your new theme in it.
Inside the zip file should be a folder called whatever your new theme is called. Just copy that folder to [whatever directory Wordpress is in]/wp-content/themes/ That’s all you have to do to install a new theme! That’s one of the reasons it’s cool to set Wordpress up on your computer first, because installing themes and plugins is super easy.
Anyway, now if you go back to your Themes page, you should see your new theme under “Available Themes.” Click the little “Activate” link underneath it to, well, activate it.
Uh oh. I activated that “Platform” theme, and was greeted with a ton of errors. The site is covered with them too. What did I touch?
I didn’t plan on breaking Wordpress in this tutorial, but I’m actually glad I did. A similar thing might very well happen to you at some point, and the best thing to keep in mind is to not panic. It’s probably not your fault if the site gets broken, especially if you just installed a new theme or plugin. Chances are it was that theme or plugin what done it. The fact is that most of the themes and plugins for Wordpress aren’t extremely well made. For example, the person who made this “Platform” theme seems to have gotten pretty lazy with how they’re using classes in some of their files - and they haven’t tested the theme with either PHP 5 or with the strict error reporting settings we’re using - so it makes PHP have a bit of a crisis. If you see this sort of thing with the theme you picked, you could try to debug the code and figure out what’s wrong with it, but it’s probably best to just find a new theme to try. Welcome to the blunderful world of open source software.
My site wasn’t totally broken by this new theme, but yours very well could be by a theme you tried to install, so here’s what you do if errors are making it so you can’t get into the Dashboard at all.
Head back to your themes folder ([whatever]/wp-content/themes) and find the folder for the theme that ruined everything. Rename (or just delete) it.
Now you should be able to get into the Themes page, and you’ll see this message. It can’t find the theme files, because you renamed the folder they’re in, so it just reverts to good old Twenty Eleven.
Anyway, this Lugada theme looks okay, too. Let’s give it a shot. Same as before, I’ll download it and stick it in my Themes folder.
Success! Okay, so it’s installed and running. Now we can customize it. Most themes allow some level of customization, so you can tweak images or colors to your liking. Actually, if you know CSS (the language designers use to style websites) you can tweak absolutely every aspect of a theme, because themes are almost entirely CSS.
Since this is a pretty minimal theme, there isn’t much to customize. I can put in a Twitter ID or Facebook URL (not super useful), and I can add up to 5 images for a sliding banner thingie. I doubt that’s going to suffice for what Alyson wants, but I’ll take a look later when I upload some images.
Most themes will let you upload an image for the site header. Usually they will specify what size the header should be. In this case, it’s 300 x 70 pixels.
Alyson wanted a hand-written header, so I had her write her name out and then I scanned that into the computer. I had to crop it down to be the right size in Photoshop. You’re on your own for making a logo. This is a website tutorial, not a logo tutorial.
In the Editor (Appearance - Editor) you can actually manipulate the stylesheets for the theme. If you don’t know anything about CSS, you probably don’t want to dig around this too much. Luckily, I know a lot about CSS, so I went in and tweaked some of the colors to match what Alyson wanted. I’ll have to cover some basic CSS in an addendum or something, because it’s just too much for this little Tutorial to bear.
Most themes allow customizable widgets, another powerful Wordpress tool. In the Widgets page you can drag and drop what widgets you want into the various sections that your theme provides. The theme I’m using has a “Main Sidebar” section as well as two little spots in the footer. Most of the widgets are self-explanatory. Play around with these and find what works best for what you’re looking to accomplish with your site.
Now your site should have a bit more character to it. It’s a bit barren, sure, but it should be starting to look cool.
Now we’re really getting a site together. You can spend a lot of time tweaking the theme and other settings, that’s for sure. This is where it’s handy to have it running right there on your own little Internet, because it will go super fast and you can mess with all of the files yourself.
Next we’ll look at creating pages and blog posts, and we’ll do some more serious hands-on manipulation of the page layout. It’s a time consuming process, and there are quite a few steps involved, but nobody said this was going to be easy. Well, okay, so I might have said that, but I didn’t say it would be quick, did I? Well, we’re almost at the finish line, so hang in there.
