How to Design the Look of Your Website with WordPress
From the book
From the book
From the book
Changing Up the Look and Feel
The look and feel of the website is controlled by something called a theme. Themes allow WordPress to separate the visual appeal of a site from the actual content—like a “skin” that goes over the frame of the house.
Because themes are modular, anyone with knowledge of cascading style sheets (CSS) and PHP: Hypertext Processor (a scripting language) can design one. And with them, you can have multiple looks for your website in just a few clicks.
Getting a Theme for Your Website
There are several different ways for you to get a theme: The WordPress site hosts a great number of free themes for you to download and install on your site. Most of this can be done from right inside of your WordPress admin page, and the installation can be done in a matter of seconds. There are also membership-based theme sites that allow you to download themes and install them on your site. Third, there are websites dedicated to selling pre-designed themes that you can “cut” to fit your needs, making them a cheap alternative to getting a more professional, custom-designed theme. Finally, there are actual services on the Internet that will create a customized design (or a design that you make in Photoshop) and turn it into a theme that you can use.
Buying a Template Versus Making Your Own
If you are launching your website for the very first time, and are trying to keep your costs down, I think that a template is an incredible way to get something that looks good for very little cost. Do understand that, because you are purchasing (or getting for free) a template, there is a possibility that some-one else is also using that theme on their site. So, some people are hesitant to use theme-based designs they can download. This, I don’t understand.
The Pants Analogy
If I am going out to a party on a Saturday night, and I want to look my best, chances are I am going to go to the store and buy a pair of new pants. Being thrifty, there’s an even bigger chance that I am going to go to a big box store in order to get the pants. Because of this, there’s a good chance that the style of pants I buy will be the same as another customer. But, I don’t consider going to a custom designer and saying, “I will be attending a party; please make me a pair of pants.” Advantage: template.
The Cost Concern
If you are reading this book, there is a chance that you’re a photographer dipping your toe in the world of the Internet. As with any venture, it’s important to be able to see how much return on investment we’ll have on something before we spend any more money on technology. You could (and I doubt this) find that having a website isn’t to your liking. Would you rather find this out after spending several thousand dollars? Or would you like to get into the game and start earning something while spending very little? Advantage: template.
Design Your Own Later
Applying a template is pretty straightforward and modular enough that if you want to change it, you can do so in a few clicks. Later, if you find that you’d like to design your own using Photoshop, there are tons of services out there that will take your Photoshop designs and convert them to a template. All you have to do then is upload, activate, and you’re up and running.
A Word of Caution on Free Templates
Like anything, keep in mind that you get what you pay for. Going to the WordPress website for free templates will more than likely give you a template that doesn’t look much better than the standard default. On some occasions, free templates have also been known to introduce viruses, so be careful. Sometimes, it’s good to just spend a little to get a lot. So, let’s get started!
FREE TEMPLATES AT WORDPRESS.ORG
If you want to take a look at some of the free templates that are available to you, visit http://www.wordpress.org and click on Extend in the menu bar across the top. You’ll see they have a free Themes directory with thousands of themes for you to browse.
STEP ONE:
On the main Free Themes Directory page, click on the Check Out Our New Filter and Tag Interface link near the top. You can narrow down your choices by selecting features from a series of checkboxes, based on what you’re looking for. The templates are broken down conveniently by Colors, Features, and Subject, among other options. Here, I chose Dark for Colors and Two-Columns.
)
STEP TWO:
Clicking on the Find Themes button will show you thumbnails for all the templates that match your criteria. Scroll down below the checkboxes to see them. Clicking on a theme’s thumbnail will bring up a preview window showing you the style sheet for that theme (so you can see what the headers, lists, forms, etc., will look like).
)
STEP THREE:
Another great feature of WordPress is that you can search for these same themes right from inside of the admin page of your website. Log in to your admin page, click on the Appearance button on the left side of Dashboard, and choose Themes. Click on the Install Themes tab to see the feature checkboxes.
)
STEP FOUR:
In this case, I searched for a theme called Kanata to try out. You’ll see that the theme appears with an Install link, and another link to preview what it will look like.
)
STEP FIVE:
Clicking on the Preview link will give you a Shadowbox, with a sample of what the theme will look like on your site. This one looks good to me, so I’m going to install it.
)
STEP SIX:
Close the preview, and click on the Install link. An installation dialog will pop up, so click the Install Now button. It will go through the install process, downloading your template and placing it in the wp-content\themes folder of your site. (Note: See Chapter 11 for more on working with your site’s folders.)
)
STEP SEVEN:
Once you click the Install Now button, you’ll be taken to a screen that tracks the progress of the installation. When the install is successfully completed, you can choose to preview the theme, activate it on your website, or return to the theme installer.
)
STEP EIGHT:
Clicking the Activate link will turn the theme on, and take you to the Manage Themes tab on the Themes page. This tab will change, letting you know that your new theme, Kanata, is active and is now the current theme on your site. WordPress keeps any older themes in a list under the active theme (labeled Available Themes), in the event you want to revert back to a previous theme later.
)
STEP NINE:
Open a new browser window, and go to your website. You’ll see that the site’s look and feel has changed, but all of the structural content stayed the same. Congratulations, you have a new look to your website!
)
STEP 10:
Did you notice that there’s a tagline under your website name that says, “Just another WordPress site”? Let’s remove that. Go back to your admin page, click on the Settings button on the left, and select General. You’ll see that text in the Tagline field. Just delete the words from that field, and click the Save Changes button at the bottom left.
)
STEP 11:
Now, preview the page again. You’ll notice that the tagline is gone. And, again, you can see that while the website looks different, all of the structure has remained the same, including page structure, posts, and plug-ins. For example, if you click on an image in a post, it will still appear in a Shadowbox window. Not bad at all!
)
I’m going to revert back to my original template, because we’re going to use another one from a paid site. So, go back to your admin page to the Themes page (under Appearance), click on the Activate link beneath the original template, then click on the Delete link beneath the template we’re not using. Get into the habit of doing this, so your back end stays as organized as possible.
if you want to choose a different design theme than what comes with WordPress, there are many online theme design companies, and my book will walk you through how to find, install and configure these kinds of themes.