today we’re fortunate to be sharing what has to be one of my favorite biz ladies post we’ve ever run. amanda from the stylish copywriter and Better Than Chocolate Web Design is sharing her complete primer for building a website in only one weekend using wordpress. amanda will be breaking down the process step by step and, as a user and huge fan of wordpress, i’m really excited to see all of this information written out so clearly and simply for everyone to use. it’s rare that someone sits down and shares all of this detailed information so freely, so i’m incredibly thankful and grateful for amanda taking the time to do this. this is a MUST READ if you’re considering opening a shop/site/blog and need to get started without spending a lot of money. in the article amanda will cover:
- buying and setting up a domain
- how to install wordpress
- customizing your site with themes (including her favorites)
- adding a logo to your site
- customizing your site’s sidebars
- adding calls to your social networking pages (facebook, twitter, etc.)
- adding content to your site
CLICK HERE for the full post and to start setting up your website after the jump!
Get a website in a weekend – with WordPress!
Web designers are expensive. And that puts you, the owner of a lovely little fledgling business (or perhaps even a bigger one), in a bit of a pickle. You know you need a website, but you don’t exactly have $1000 (let alone $5000, which is what it can cost for a super fancy site) lying around to pay someone to make one for you. And as much as you may think of yourself as a DIYer, the idea of attempting it on your own can be a little scary.
But take heart! Believe it or not, there’s another way to get a website up and running, and it doesn’t have to take forever, cost an arm and a leg, or look hideous. In this Biz Ladies article, I’m going to give you a cheap and speedy roadmap for getting a good-looking website up and running in one weekend – no weird programming, coding, or technical stuff required. All you need is a few hours and an internet connection. Read on to learn how to create some website magic!
Meet your new best friend: WordPress!
If you’ve spent any time online in the past few years, you may have heard the term “WordPress” thrown around (fast fact: Design*Sponge runs on WordPress!). But you may not know exactly what it is, which is completely understandable, because it’s all a little confusing. In a nutshell, WordPress is a content management system that takes care of the behind-the-scenes technical stuff you need to run a website. The other thing it does is act as a simple interface that lets you update content on your site. WordPress offers a great way for non-technical people to establish an online presence, because it’s incredibly easy to use. And the bonus is that it’s free!
Now, let’s clear up a couple of things that you may be wondering about. The first slightly confusing thing about WordPress is that there are two versions of it: one is the “hosted” version (http://www.WordPress.com), and the other is the “self-hosted” version (http://www.WordPress.org). What this means is that you can choose whether you want to have a blog that lives on the WordPress.com website (think “http://yoursite.WordPress.com“), or you can have one that lives on your very own spiffy domain (think “http://www.yoursite.com“). Today we’ll be learning how to create a site that will live on your own domain. Doing it this way makes you look professional, and it also gives you more control over your site, now and in the future.
The second slightly confusing thing you may have heard about WordPress is that “it’s just for blogs”. Happily, that’s just not true. (For example, the site for my web design company, Better Than Chocolate, runs on WordPress – and it’s totally blogless). In fact, you can use WordPress to create almost any kind of site, and it’s GREAT for making informational or “brochure” websites (which is the kind of site that most Biz Ladies need for their businesses).
Of course, you can still add a blog to your site if you like. That’s the beauty of WordPress: what you do is totally up to you.
So without further ado, let’s dive in! You’re 5 steps away from having a website of your very own!
1. Buying your domain and your web hosting space
To create a WordPress-based site, all you need is 1) a domain (otherwise known as the address you type in when trying to visit a site, like designsponge) and 2) a web hosting account with a company that offers one-click WordPress installation. There are lots of web hosting companies that offer this, so it’s up to you which one you choose, but I’m partial to Green Geeks*. I like them because they’re environmentally conscious (300% green, to be exact!), because you get a free domain when you sign up with them, and because they make everything super simple for a non-techie who’s eager to get a site online. If you want to go with another web host, that’s fine too – just be aware that you may have to buy your domain separately, and make sure that they offer a service called “Fantastico” (this is the tool that facilitates the one-click WordPress installation).
Note: the Green Geeks link above is an affiliate link. This means that if you click it and sign up with Green Geeks, I will receive a commission for referring you.
2. Installing WordPress
Don’t let the word “installing” scare you. Fantastico makes it incredibly easy to get set up with WordPress. Once you’ve signed up with Green Geeks or another web host of your choosing, just follow these steps to do it:
- Log in to your web host’s client area or control panel (usually it’s called “CPanel”) using the username and password that your web host emailed to you when you signed up with them.
- Find the “Fantastico” or “Fantastico Deluxe” icon and click it.
- Under “blogs” in the left-hand column, click the “WordPress” link.
- Click the “New Installation” link. A new page will load with some weird-looking text and boxes. Don’t let them intimidate you. I promise this is easy. :)
- Leave the first two boxes as-is.
- Under “Admin access data”, choose a username and password for yourself. You’ll use these to log in to your site when you want to add content and make changes. Be sure to pick a tricky password, and write it down for future reference.
- Under “Base configuration”, enter the nickname you want to use for yourself on your site (for example, if your name is Sarah Smith, you’ll probably want to choose “Sarah”).
- Enter the email address you want to receive website-related notifications at. This needs to be a valid email address (choose one that you check often).
- Enter the name you want to give to your website. The name should be an accurate representation of your business (e.g. “Sarah’s Home-Baked Cookies”).
- Enter a site description that describes what your business does and that includes some keywords that people might use when searching for a service like yours on the internet (e.g. “Melt-in-your-mouth cookies delivered right to your door across New Hampshire”).
- Click the “Install WordPress” button.
- You’ll be taken to a page that has will say something like the following:
- Install WordPress (2/3)
- The MySQL database and MySQL user xxxx_wrdp1 will be created and used for this installation.
- You chose to install in the main directory of the domain yourdomain.com.
- The access URL will be: http://yourdomain.com/.
- Click on Finish installation to continue.
- Click the “Finish installation” button, and you’ll be taken to a confirmation page.
Now try visiting your domain by typing it into your browser’s address bar. If you followed all the steps correctly, you should see your website, complete with your title and description somewhere near the top of the screen.
Now let’s move on to the fun stuff!
3. Sprucing up your site to make it look the way you want it to
Unless you really like white and blue, you’re probably thinking that your site is looking pretty plain at the moment. Chances are, it’s not exactly what you had in mind for your online presence – so let’s talk about how we can make it look a heck of a lot better.
WordPress makes it VERY easy to do this with “themes”. WordPress themes are like a new outfit for your website. When you switch your theme, the colors, graphics, and layout on your site change almost instantly. Many themes are free, and there are thousands of them available. On top of this, you can change themes as often as you want, totally transforming the look of your website in about three seconds.
To choose a theme for your site, the first thing you need to do is log into WordPress. The place to go to do this is http://www.yourdomain.com/wp-admin (just replace “yourdomain” with the domain you picked when you signed up with your web host). Enter the username and password that you chose when you installed WordPress via Fantastico, and click the “Log in” button.
The page that will load on your screen is called the WordPress “dashboard”. This is your home base for managing your website’s content and its look and feel. Right now, we’re interested in making the site look better, so look for the “Appearance” header in the left-hand menu and click it. A sub-menu will appear underneath it. Look for “Themes”, and click that. At the top of the page that loads, click the “Add New” button, and you’ll be taken to a page that lets you search for a theme by color, number of columns, width, features, and subject. You can also search for a theme by name (in case you’ve heard of a good one that you want to try).
Go ahead and start searching for a theme that fits what you’re looking for. Just keep in mind that the more search parameters you enter (i.e. the more boxes you tick on this page), the fewer results will come up (and sometimes you’ll get none at all). That’s why it’s also fun to click the “Featured”, “Newest”, and “Recently Updated” links along the top of the page. You may find an amazing theme that way. Or, Google “best free WordPress themes” for even more ideas.
Recommended themes to check out:
To help you get started, let’s look at some recommendations for free themes that are simple to customize. The reason that easily customizable themes are so great for business websites is that they let you tailor your site to your branding. That means you have some control over colors, and if you have one, you can include your logo in the site header.
Theme #1 to check out: Guerilla v2
To grab this theme for your site, start by pasting this link into your web browser’s address bar and hitting enter: http://www.giantthemes.com/download/1. Now, follow these steps:
- When prompted, save the file to your computer.
- Log into WordPress, go to the Themes area, and click the “Add New” button at the top of the screen.
- Click the “Upload” link near the top of the page.
- Use the “Browse” button to find the file you just downloaded on your computer, double click the file name, and then click the “Install Now” button.
- Go back to the Themes page, look for the “Guerilla v2″ square, and click the “Preview” link underneath it. This will give you an idea of what your site is going to look like once it’s “wearing” this theme.
- If you like the way it looks and want to switch to the theme in question, click the “Activate” link underneath its listing on your Themes page.
- Check out your site’s new look!
You can customize this theme to make it look more like what you want, so let’s play around with some of the options. You should now see “Guerrilla Options” listed under “Appearance” in your left-hand menu. Click this link, and you’ll be taken to a page that lets you choose from “Default”, “Light Grunge”, and “Dark Grunge” looks for your site. These are different colorschemes (all of which are quite nice, if you ask me). :)
Theme #2 to check out: Bueno
To grab this theme for your site, paste this link into your web browser’s address bar and hit enter: http://www.woothemes.com/free-themes/Bueno
Now follow the steps for installing the Guerrilla v2 theme, above.
When you’re ready to customize the theme, look for “Bueno” in your left-hand menu and click it. You’ll be taken to a page where you can upload a logo, choose from a number of colorschemes, add a favicon (the tiny square icon that you see next to the address bar in your browser), and more.
Theme to check out #3: Thrilling Theme
To grab this theme for your site, paste this link into your web browser’s address bar and hit enter: http://www.thrillingheroics.com/download/thrillingtheme
Now follow the steps for installing the Guerrilla v2 theme, above.
To customize this theme, look for a new item called “Thrilling Theme Options” that has appeared in your left-hand menu and click it. On this page, you can choose your theme stylesheet (i.e. your colorscheme), among other things.
Adding your logo to your site
If you have a logo for your business, you’ll definitely want to put it on your website. Many free WordPress themes let you do this (including the three that I listed above). Here are the instructions for how to do it:
- Log into your web host’s CPanel. Things are going to look a little weird and scary again, but don’t worry. You’re in good hands. :)
- Look for the item called “File Manager” and click it.
- A window will pop up, prompting you to choose one of 4 items. Choose the second one (Web Root) and click the “go” button.
- Click the “new folder” button that appears near the top left of the page.
- A pop-up will appear. In the first box, enter the word “images”.
- Leave everything else as-is and click the “Create New Folder” button.
- The pop-up will close, and you’ll see a listing of the files and folders that are associated with your website. Look for the folder called “images” (that’s the one you just created), and double-click it.
- Now click the “upload” icon near the top left of the screen.
- Click the first “Browse” button and find your logo file on your computer (it should be a .GIF, .JPEG, or .PNG). Double-click the file name.
- Wait for the upload to finish (keep an eye on the blue progress bar), and when it says it’s complete, close the browser window.
- You have now uploaded your image to the following location: http://www.yourdomainname.com/images/yourimagename.jpg (your file extension might be .gif, .jpeg, or .png, depending on what kind of image file you uploaded).
Make note of this location, go back to WordPress, and open up the options page for your specific theme. Each of the themes I mentioned has a box where you can enter the URL for your logo. Simply paste it in here, save your options, and your logo will appear on your site.
Customizing your sidebars
Unless you pick a one-column WordPress theme, your site will have at least one sidebar. A sidebar is the portion of the site that’s narrower than the main content area. It’s a good place to put information that will help promote your business and enhance your visitors’ experience on the site. In WordPress, the things you will put in your sidebar are called “widgets”.
Let’s talk a bit about what widgets you should include in your sidebar and how to add them. If you log into WordPress, click “Appearance” in the left-hand menu, and then click “Widgets” underneath that, you’ll be taken to the page that lets you control your sidebars and widgets. There are a few pre-programmed widgets listed in the main area of the screen, and if you want to have any of these in your sidebar, you can just drag them over to the right-hand side of the screen. You can also reorder your widgets by dragging them up or down within the sidebar area on the right side of the page. When you add or reorder widgets and save your changes, the changes will automatically be reflected on your website.
Below is a basic list of the widgets that you’ll probably want to include on your site, along with instructions on how to add them to your sidebar(s):
A “search” bar (so that people can find what they’re looking for on your site): This is one of the default widgets available in WordPress. Just drag it over from the main area of the Widgets screen to the sidebar that you want it to appear in.
A text widget that tells people your address (if you’re a brick and mortar business): Drag the “text” widget into your desired sidebar area, enter a title (such as “Where to find us” or “We are located at:”), and in the box below that, type your address, phone number, and other good stuff. Then click the “Save” link.
Links to your business’ Twitter, Facebook, LinkedIn, and Foursquare profiles or pages (and potentially, other social media sites): There are a number of ways to give your visitors easy access to your various social media profiles via your sidebar, but one of the easiest is to use a WordPress plugin like Social Homes.
Plugins are things that extend the functionality of your WordPress site. When you install a plugin, oftentimes it will automatically give you a widget that you can add to your sidebar. This is the case with Social Homes.
To install Social Homes, follow these steps:
- Log into WordPress and click on “Plugins” in the left-hand menu.
- On the next page, click the “Add new” button at the top of the page.
- Type “Social Homes” in the search bar and click the “Search Plugins” button.
- Look for Social Homes in the list of search results (it should appear at the top of the list), and click on the “Install” link next to it (at the far right of the page).
- A pop-up window will appear. Click the orange “Install Now” button.
- The pop-up window will close, and you’ll see a message confirming that Social Homes has been installed. Click the “Activate Plugin” link.
- Now click on “Widgets” in the left-hand menu (under “Appearance”).
- You should see that a widget called “Social Homes” is now listed in the main part of your screen. Drag it over to the sidebar that you want to put it in.
- Now fill in the Social Homes form, adding the URLs for your social media profiles. You can also change the title from “Social Homes” to something else, such as “Follow us” or “Find us on…”
- When you’re finished, click the blue “Save” button. Your social media links should now appear in your sidebar.
4. Adding content to your site
Obviously, no site would be complete without content, so now’s the time to add some to yours. For a non-blog website, you’ll primarily be making use of WordPress “pages”. (A blog site would primarily use WordPress “posts”). Before you start entering text for your pages, you should take some time to map out your content plan for your site. What pages do you want the site to have? How do you want to break down your information to make it easily found and understood by your target customer? For example, you’ll probably want to have an “About” page, and then maybe a “Services” page and a “Contact” page.
For every page that you want to have on your site, you’ll be creating a corresponding “page” in WordPress (easy enough!). When you’re ready to go, log in to WordPress and click “Pages” in the left-hand menu. Now click the “Add new” button at the top of the page. On the next page, you can enter a title for your page and your body text. If you want to finish working on it another time, you can click the “Save draft” button and come back to it later. Once you’re happy with how your page reads, click the blue “Publish” button, and a link to the page will appear on your site, in your navigation menu.
To create all your other pages, all you have to do is repeat this process. If you want to edit them later, you can do so easily through the Pages section in WordPress (just click the “Edit” link next to the page you want to edit).
Note: don’t forget to set up a front page for your site. Your front page should be a welcome page that succinctly tells visitors what your website is about. Give this page a title of “Welcome” or something similar.
Now we need to tell WordPress which page should be the first page that people will land on when they visit your site. To do this:
- Log into WordPress and click “Settings” in the left-hand menu.
- Click “Reading” underneath that.
- Where it says “Front page displays”, choose “A static page”, and with the drop-down menu, pick the page that you want to be your front page.
- Click the blue “Save Changes” button.
And now for one last very important step: WordPress has a hard-to-find setting that, when left unchanged, will seriously limit your site’s visibility on the web (definitely NOT a good thing!). To make sure that your site will be found by the search engines, you need to do the following:
- Log into WordPress and click “Settings” in the left-hand menu.
- Click “Privacy” underneath that.
- Make sure the top option is selected (“I would like my blog to be visible to everyone, including search engines (like Google, Bing, Technorati) and archivers”), and click “Save Changes”.
5. If you like, add a blog to your site
If you’ve made it this far, you’ve now got a fully functional website up and running, all on your own. That’s pretty huge! But maybe you want to take it one step further and throw a blog into the mix. After all, when it’s done right, blogging can really help you gain traction with your audience and customers, not to mention that it’s a great way to build your brand online.
Adding a blog to your new WordPress site is a piece of cake. Just follow these steps to do it:
- Log in to WordPress and click “Pages” in the left-hand menu.
- Create a new page with the title “Blog” (the body of the page can be empty) and publish it.
- Now click “Settings” in the left-hand menu.
- Click “Permalinks” underneath that, and select the “Month and name” option.
- Click the blue “Save Changes” button.
- Click “Settings” in the left-hand menu.
- Click “Reading” underneath that.
- Make sure that your front page is set to be “A static page” and that your “Front page” is the one you want it to be. Now, next to wear it says “Posts page”, choose “Blog” from the drop-down menu.
- Click the blue “Save Changes” button
- Start blogging! To write a post, just click “Posts” in the left-hand menu in WordPress, and then click “Add new”. Writing a post is exactly like entering content into a WordPress page, except that your content will appear on the blog section of your site. When you’re ready to publish your post, click the blue “Publish” button.
- You should now be able to access your blog area at http://www.yourdomain.com/blog/. This page will list all your posts.
- So that’s it! If you’ve completed my five steps, you now have a snazzy, fully functional website that you can happily refer friends, family and business prospects to. Who would have thought that it would only take a few hours (and zero scary computer knowledge) to do it? :)
Better Than Chocolate creates sinfully gorgeous, satisfyingly fast WordPress-based sites for impatient entrepreneurs. Amanda from Better Than Chocolate has set up a special discount just for Design*Sponge readers at this top-secret page: http://www.betterthanchocolatewebdesign.com/hello-designsponge-readers/, so click on through if you’re interested!