How to Create Your Own Travel Blog

header-map

By

The ever growing population of my fellow travelers is not only desperate to find their adventure on some lonely backroad, but ever so eager to recant their tale.

Update

This article is a bit outdated. We no longer offer the Wandrly.me service, which has evolved into our amazingly popular MoseyHome blog service. Check it out!

And for the modern day bard, the blog has become the medium of choice.

For some, this serves as a digital postcard to keep friends and family “back home” up to speed, while or others it’s an artistic outlet for the newfound enlightenment they find on the road. Still for others, it’s as simple as keeping a journal, a travelogue largely for their own purposes. Some hope to find a following online, perhaps even make some extra cash to help support their adventures. Getting your own website is incredibly easy these days; getting it for free and customizing it the way you want to is not always. Enter this handbook, your one stop shop for the complete process of creating your very own blog.

Table of Contents

  1. Introduction
  2. The Ideal Travel Blog
  3. The Basics
  4. Diving In
  5. Meet WordPress
  6. Write Your First Post!
  7. About Search Engines
  8. Managing Pages
  9. Contact Forms
  10. Adding Photos & Galleries
  11. What’s a Blogroll?
  12. Plugins
  13. Change Your Site’s Theme
  14. Add New Users
  15. WordPress Settings
  16. Your Site on Mobile Devices
  17. Can I Make Money with This?
  18. Who’s Visiting Your Site?
  19. Facebook Integration
  20. Custom Domains
  21. Hosting Your Own WordPress Site
  22. Changing the Way Your Site Looks

Preliminary Info on What We’ll be Doing

We’re going to walk through the entire process necessary to get yourself up and blogging. We’ll touch on design, we’ll fiddle with code. You won’t, however, need to have any design or website development skills to complete this. You’ll learn directly from an experienced Web Designer—who’s been making a living creating websites for over a decade—how to organize ideas, setup a website for free, and how to customize it to suit your needs. We’ll also do a complete walk through of WordPress, the blogging platform that is arguably the most popular in the entire world.

We’ll show you how to do everything below 100% absolutely free, and at a level that even an absolute beginner to the world of online publishing can easily comprehend. However, we’ll also tell you about some great upgrade options that’ll cost you a few bucks but will set you up for success down the road, in case you decide that you’d really like to take your site to the next level (one where you could actually make some money from it, instead of just running it as a hobby). Many steps will have more advanced options as well, for those of you who really want to get into the nitty gritty of running your own website.

Defining our Ideal Travel Site

As I mentioned, I’ve been designing and developing websites for a very long time. I’ve also been creating sites to share my travels for years as well, and have therefore discovered what I think works best for my particular travel style and what I want to share with the world. But while the specifics in this handbook will guide you through what I love in my sites, they’ll also give you the knowledge to customize things to your own needs.

The first step in creating a website is to plan for what it’ll do. So then, what is the goal of the website we’re creating today? To allow us to blog about our travels on the web, of course! But there are a few specific and additional things we want to see the site capable of doing.

  1. Display the name of our website, a tagline, and an image representing what our site is all about.
  2. Have links to various pages on the site that aren’t specifically part of the blog.
  3. Show our latest blog posts on the homepage.
  4. Get people to sign up for our email newsletter.
  5. Encourage people to subscribe to us via RSS.
  6. Allow people to search our website.
  7. Display a map of places we’ve been, where we’re going.
  8. List the various social networks we participate on.
  9. Allow people to comment on our blog posts and share them on their own social networks.
  10. Explore some ways to generate revenue from the blog.
  11. Show our most popular posts so that folks visiting the site can see what others love about our site.
  12. Provide integration with everyone’s love/hate relationship, Facebook, so we can tell all our friends over there to check us out over here.

And we’ll do this all in a very minimal, elegant format.

Things You Need to Know

So firstly, for the true beginners out there, let’s talk about the three basic building blocks of any website: a domain name, a host, and the actual code/files that make up your site.

What’s a Domain Name?

It’s the address of your website. You know these ever so well: google.com, yahoo.com, facebook.com, wandrlymagazine.com. Domain names cost money. That is, if you want your very own, they do. Today we’re going to give you a free website at a URL like yourname.wandrly.me yourname.moseyhome.com. That will be absolutely free, but if you’re serious about wanting to blog for profit, or even if you’re not but want your site to be a little more easy to tell people (ie, you want yourname.com), then you’re going to need to purchase a domain name. They run around $10 – $20 a year depending on who provides them.

Okay, but what’s Hosting?

At it’s simplest, a hosting provider supplies you with the computer that stores your websites files. This is everything from the database where all of your blog posts are stored to the graphic files to the actual coding that makes your site work the way it does. If you think of the domain name as your website’s address, your host is the actual house where your site lives. Hosting on MoseyHome.com (where you’ll be building a site via this handbook) is only $9 / month (including high end hosting). You can also sign up for a “free for life” site at WordPress.org and continue following along with this handbook, though where Moseyhome.com is specifically aimed at travel bloggers and provides out of the box tools for displaying maps, focusing on travel and doing other cool stuff like collecting newsletter subscribers, WordPress.org is a more general service. Both run on the same platform, though, and we’ll even show you how to create a site on your very own server if you ever choose to do so.

So What About the Code and Graphics and Database and all That?

This is the bulk of the work that goes into creating a website. The good news? We’ve done nearly all of it for you. The heavy lifting anyway. We’ve created a design that caters to travelers, and which also works on both desktop and mobile devices like iPhone and Android (as well as iPads and other tablets). We’ve written the code in a way that makes Google want to list your site in its search results, and we stuck to best practices in the industry. In short, we’ve done all the hard work, and you’re primarily left with the fun stuff.

Let’s Get Started

The first thing you’ll want to do is head on over to MoseyHome.com, where you can sign up for a free account. Just click the Get a Blog link.

You’ll be asked to choose a username, which can be anything you’d like (provided it hasn’t already been taken), and an email address. The email address is used to send you notifications when someone comments on your blog, or allows you to recover your password if you forget it. Click Next and you’ll be taken to the next step, where you create your blog.

You’ll first be asked for a Site Domain which is the address of your website. Later we’ll show you how you can get any domain name you want, but for now you’ll be working with something.moseyhome.com. The Site Title is simply the name of your new site, and this can be changed at will later down the road. Privacy allows you to set whether you want search engines like Google to look over your site and include it in their search results. This can be changed later as well. Note that by checking “No”, you’re not hiding your site from people who know the address, but are just telling the search engines that you don’t want them to include your site in their results.

After clicking Sign Up you’ll be sent an email with a link that allows you to activate the site. Once you visit that link your site will be ready to go and you’ll be given your password. After you make a note of your password, click the View Your Site link and lets take a look at what we’ve got.

Hmmm, doesn’t look exactly like the site I promised. Don’t worry, we’re just getting started. In the following sections we’ll detail how to customize your site’s features, and in doing so will lay the groundwork for you to make future customizations that fit your particular needs.

Taking Control

Okay next we’re going to login to your site’s Content Management System (ie, WordPress), where you can begin making changes to the site. We’re going to work through the site from the top of the page down, and once we cover the basics of customizing your site, we’ll get into more detail about the various other capabilities the CMS has.

This is what you’ll see the first time you login:

That page has some great advice for getting started, and will persist every time you login until you click the Dismiss link. Feel free to go through all of that if you’d like, but we’ll move right into getting your site where we promised.

Editing Your Header’s Text

At the top of your site’s front end (the publicly visible site, not your WordPress admin area), you’ll see the Title you entered while creating the site and Just another MoseyHome Travel Blog site. Let’s look into how to change both of these.

  1. In the Navigation bar on the left of WordPress, click Settings and then General. This page has various basic settings we can manipulate for our site.
  2. Site Title and Tagline can be changed to edit those two pieces of text on the site.
  3. E-mail Address determines where the majority of notifications on your site will be sent. The primary use for this will be to send an email to you, the owner of the site, when someone leaves a comment on a blog post.
  4. Timezone should be set according to your particular location, though given that we’re travelers, this may be tricky to nail down. I typically set mine at Renée’s favorite time zone, Mountain Standard Time. To note, EST (Eastern Standard Time) is UTC -5. Eastern Daylight Savings Time is UTC -4. PST would therefore be UTC -8.
  5. The remaining options are rarely utilized on the theme available via moseyhome.com, so we’ll skip over these.
  6. Once you’ve made any changes you’d like, click Save Changes and refresh the homepage of your website. Voila! We’re all set with that section.

Creating Your Header Map

Of course, you don’t need to add a map to the top of your site, but I think it’s fun to show where we’ve been and maybe where we’re going, so we’ll discuss integrating a map here. You could alternatively add a photograph or just leave this area blank if you’d like. To leave it blank, just skip this section. We’ll discuss how to add a photo here in a moment, but for now let’s open Google Maps and create a map.

Creating a Custom Map in Google Maps

You’re probably familiar with Google Maps, but not everyone is aware that you can create custom maps with the service. Let’s look first at how to do that by going over the various options.

  1. Go to maps.google.com
  2. Click the My Places button
  3. Click Create Map
  4. Feel free to give the map a Title and Description, but these are optional.
  5. the icons for each of Google Map's custom map building toolsIn the map window there are three buttons, one that looks like a hand, one a location marker (sort of a bubble with an arrow pointing down) and one a zig zag line. These are the tools you have at your disposal to create maps. All of them have different uses and capabilities.
    • The hand icon provides normal Google Maps functionality, where you can drag the map around to change the area of the map you’re viewing.
    • The location marker icon allows you to add individual locations to your map. You could place one over a town you’ve visited, for example.
    • The zig zag line is how you draw lines, and provides the option to draw straight lines or routes that follow along roads.
  6. button for embedding a Google MapAfter you’ve created a map (we’ll go over all the options for doing so in a moment), you can click the chain link icon which gives you the ability to copy a link to the map page itself, or copy the Embed Code by selecting the code in the Paste HTML to embed in website field and pasting it into a website. We’ll cover exactly how to do this shortly as well.
Create Some Map Markers

Click back on the hand icon. When you do that, the cursor turns into a blue bubble that you can place anywhere on the map that you’d like. Once you do, a larger white bubble will open up with various options.

You can give the location a Title, which can be any text you’d like. You can click the image of the location marker icon near the top right corner of the bubble to change the color, the shape or choose from a variety of pre-built (and incredibly ugly) icons. If you’re feeling really adventurous you can even add your own icons (Google will require you to enter the URL of an image, which is actually possible in conjunction with your new WordPress site’s Media area, but we won’t get too detailed as to how to do that here).

In the description area you can enter in some text or click the Rich Text link and work with actual HTML, if your savvy like that. Some ideas for this area are brief descriptions of what your markers are for or links back to your blog posts about the area. When you’re done adding whatever content you’d like, click the Done button.

Create a Route

Click on the zig zag line button and choose Draw a line along roads. Click on the map where you want to start your route, and then move the cursor to wherever you’d like to end the map. You can click on the roads in increments to force the line to follow specific routes (otherwise, Google Maps will just try and draw the line along roads in the shortest distance possible). Once you have your line drawn, you can go back and click certain parts of it to drag them into new positions. When you’re done drawing the line, a similar white bubble will pop up and allow you to give the line a title, description and even change the color, width and opacity of the line.

Using this tool you could outline your entire journey to date, break up multiple legs of your trip or differentiate between various roadtrips you’ve taken.

Getting Our New Map into WordPress

Now that you’ve had time to play cartographer and have your perfect map created, lets grab the code and put it into WordPress.

  1. First, make sure you zoom the map out and center it roughly in the viewport as you’ll want to display it.
  2. Next, click the chain link icon to show the sharing options.
  3. Click the customize and preview embedded map link. If this isn’t displayed, and instead you’re seeing a this map cannot be embedded link, try saving the map and clicking My Places then finding your map in the list. This typically resolves the issue.
  4. A new window will open when you click the “customize and preview embedded map” link. You’ve got plenty of options here, but let’s go about it this way:
    • Choose Custom from the Map size list. The width doesn’t matter as we’re going to set this up later to work no matter what width our website is, but the height is important. 350 – 450 pixels is generally a pretty good size, but of course this will depend on the dimensions of your particular map and how much space you want to dedicate to this map on your site.
    • When you’ve set the height you want, copy the code below the example map.

Now let’s head back over to WordPress. Click on Appearance and then Widgets in the left navigation. Widgets are prebuilt pieces of functionality that you can often customize. You do so by dragging the gray boxes from the left into the larger boxes on the right. When you first visit this area, you’ll have six widgets being displayed in one of two boxes on the right, sidebar and header.

For the map, we’re working in the “header” area of the site, so click the word header to expand the box. Now, find the widget on the left titled Text” and drag it into the header box. When you get it into the right spot you’ll know it because a dashed black line will appear. When you release the box it will expand, giving you a few options. You can give the Text widget a Title, but the website is setup to not display this on the front end of the site.

To get your map into this Text widget (which can actually accept any HTML code), just paste the code we copied from Google Maps into the second, larger field.

Save the widget and take a look at the front end of your website.

partial screenshot of Widgets WordPress admin screen
The Widgets Panel in WordPress

Not exactly right, eh? We need to make a few simple customizations to Google’s default code. Let’s take a look at it back on the Widgets screen in WordPress.

Where the code currently reads width="425", change that to width="100%". Save again and take a look at your site’s homepage. Now the map will always be 100% of the width of the website, regardless of whether people are on a huge desktop monitor or an iPhone (that’s right, this site is pre-optimized to work wonderfully on iPhones!)

The next thing you’ll want to do is find this piece of code: <br /><small>View <a href="https://maps.google.com/maps/ms?msa=0&msid=200476956158768895184.0004c61ec517c8c647fc6&ie=UTF8&t=m&ll=39.639538,-94.042969&spn=23.633433,37.265625&z=4&source=embed" style="color:#0000FF;text-align:left">Example Map</a> in a larger map</small>
I typically delete that and everything after it, which is simply a link back to Google Maps. Why send users back to Google Maps when they can see and interact with our entire map right here on our site (and eventually go beyond that to read our posts).

Save the widget and check out your site’s homepage, the link will be gone and the map will be the entire width of your header. You can go back to Google Maps and fiddle with the zoom level and centering of the map if you don’t like how it’s being displayed, and of course, any updates you make to the map on Google Maps in the future (adding new routes, markers, etc.) will be automatically updated on the map on your website.

Add an Image to Your Site’s Header Instead of a Map

But what if you don’t really want a map up there? This is the beauty of widgets. You could alternatively add an image to this section, among other things. Let’s walk through how to do just that.

Before we can add an image, we need to upload it to the site. To do this:

  1. Click on Media and then Add New in the left navigation.
  2. Click Select Files and locate the image on your computer’s hard drive. Once you find it, click Open and the image will begin uploading to your WordPress’ site. Note that files must be 2MB or less to upload to your moseyhome.com site.
  3. Once the file has been uploaded, copy the contents of the File URL field. This is your image’s URL.

Now head back to the Widgets page (under the Appearance menu). Open up the Text widget in the header box on the right, where we’d added our map previously. Click the arrow next to header and the one next to “Text: Your Title” if you can’t see the full input fields.

Delete the code you used to enter your map and instead type in <img src="http://yoursite.moseyhome.com/yourfile.jpg" /> but replace http://yoursite.moseyhome.com/yourfile.jpg with the URL of your image. Click Save and refresh your site’s homepage to see the image.

Following this same thinking, you could get the embed video from a YouTube video and place it here, enter some additional text or any other HTML code you can dream up.

Navigation!

By default, the navigation area of your site has one link, to a Sample Page. Never fear though, as you have plenty of control over this area as well. You can create links to your email address, other pages on the site or other webpages altogether. Before we do this though, let’s talk a little bit about what a “page” is.

The web is made up of millions of websites, each of which is made up of one or more web pages. In WordPress though, we have a slightly different definition for what a Page is.

Note the capital “P”, which we’ll use to differentiate normal web pages from WordPress’ Pages. Let’s dive into the Pages section by clicking Pages in the left navigation of WordPress. You’ll be taken to a page that lists all of the Pages on your blog. At the moment, there’s only one: the Sample Page. Hover over the title with your mouse and you’ll see four additional links appear, one which can be used View the Page on the front end of your site, one to move it to the Trash (which is kind of like deleting it, except that Pages moved to the Trash can be recovered later if needed), one to perform some Quick Edits and another to fully dive into editing the page. Click the Edit link and lets look at what WordPress can do.

The page you’ll be taken to is the basic editor for both Pages and Posts in WordPress. It is where you control the vast majority of the content on your site. Let’s walk through the options here.

The Title, currently Sample Page is just that: the title of the Page. Feel free to edit it to whatever you’d like, maybe you’d like to have a Page about you and your traveling companions, or about the vehicle you drive in, or about canning peaches and how much you love it. Whatever you’re into.

In the Content Editor there will be some default text that WordPress creates for you, just to show you some of the possibilities. This section is where you’ll do the bulk of content editing. The Visual and HTML buttons at the top right of the editor allow you to switch between a more Microsoft Word, WYSIWYG style editing experience and one where you have more control over editing your Page’s code. The icon next to Upload/insert will give you the ability to upload images and other files, as well as insert them into your content. There’s also a toolbar that makes bolding, italicizing and other formatting options a snap. Feel free to play around here, but rest assured that we’ll get into everything that can be done here in more detail later in the handbook.

In fact, we’ll get into editing Pages and Posts in much greater detail, I just wanted to give you a peak at what WordPress can do and explain the differences between Pages and pages in general. Let’s get back to working with our navigation bar.

Editing your Primary Navigation

Click Appearance and then Menus in the left navigation. You’ll be taken to a WordPress screen that gives us complete control over both of the configurable menus on the site. We’ll be working first with the main navigation area on the main site, which is that grey bar just below our newly created map, with the search box in the right.

Back in WordPress, the Menus screen has two columns, you’ll want to start over at the top of the right column, where it says Menu Name, you can type anything you want into that field, but go ahead and just write Primary Nav and click Create Menu.

Once you do that, the left column will be activated. Take a look at the top box in that column, labeled Theme Locations. There are two dropdowns. As I’d mentioned, you have two configurable navigation areas on your site, the primary one we’ll be working with here, as well as a smaller navigation area in the footer of your site. By default, both of these areas will simply list all of the Pages that you create in WordPress. If you’ve got lots and lots of pages, though, this will cause your site to look a bit funky, and you may not want to list every page out in your site’s navigation anyway.

Using the top dropdown menu, labeled Primary, choose the our newly created (but as of yet empty) navigation menu, Primary Nav. The three boxes below the “Theme Locations” selector give us the ability to create our actual navigation items.

Using the Custom Links box, we can create any link we’d like, whether it’s a page on our own site or some other website. In the URL field, just enter a single backslash: /. That is essentially the same as http://yoursite.moseyhome.com. Think about web page address, such as http://google.com/webfonts. There are three parts to that address (also called a URL): the “http://” which tells the browser what type of web page it is, the “google.com” which is the domain name, and the “/webfonts” which is the actual page on that domain. If we’re just linking to pages on our own site, we can skip the “http://google.com” part altogether, leaving us with just the “/webfonts” part of the URL. So in our URL scheme, we’ve got something like “http://yoursite.moseyhome.com/a-web-page”. If you only include the name of the page, “/a-web-page”, then the link will point to that page on your site. But if you only include the “/” then we’ll be taken to the homepage. Therefore, in the Label field, type the word “Home” and click the Add to Menu button. You’ll see the Home item in the right column. Click Save Menu and view your site.

You’ve just created your very first navigation item, a link back to your homepage!

partial screenshot of a wandrly.me website with the navigation item Home.
Our home button, at long last!

Back in WordPress, let’s explore the other options for creating navigation items. Though the Custom Links area is really the only thing you’d ever need to create as many links as you’d like, there are some more powerful features available to us.

The Pages box allows you to link to a specific page on your site, and even if down the road you change the URL of that page, WordPress will be smart enough to update it for you over time. Let’s add our “Sample Page” back to the menu. Tick the checkbox next to the Sample Page and click Add to Menu. That page is added to the list on the right.

The Categories area works similarly, but what are Categories? Well, they’re ways of grouping blog posts on your site. So you may eventually create three categories that you think all of your posts will fall into, say “Places We’ve Been”, “The Kids” and “Our RV” where you sometimes write about your destinations, sometimes put up pictures of the kids and sometimes post videos of renovations you’ve made to your RV. By placing each post into the appropriate Category, you can allow your readers to only view the posts they’re interested in, or at least make it easier for them to sort through. You can then add a Category item to your navigation to make this entire process all that much simpler. The default Category is just called “Uncategorized”. For demonstration purposes, tick the box next to “Uncategorized” and then Add to Menu.

Now let’s look at our navigation list on the right. You can click on items to drag them around and reorder them. If you click “Uncategorized” and drag it above “Sample Page”, that will reorder the placement of those items on your website.

Additionally, you can nest items to create dropdown menus. While dragging a navigation item, you can move it slightly to the right to make it a sub-menu choice of the item above it. Menus can be nested three deep. Feel free to play around with this to get a feel for how it works, being sure to click Save Menu when you’re done.

As you create additional pages and categories and start to decide how you want to organize your website, you’ll revisit this area to create the navigation area you want.

partial screenshot demonstrating drag and drop functionality in the WordPress Menus screen
Drag and drop to reorder, or drag slightly to the right to create dropdowns!

Making Your Sidebar Useful

We’ve already touched on how Widgets work when creating the map at the top of our site. You have one additional “widgetized” area, and that’s the right column on your site, known as the sidebar. Let’s explore what’s there now and how we can customize it.

Looking at the front end of our website, we see an orange search box, and various areas below that labeled Recent Posts, Recent Comments, etc. These are all being powered via Widgets. Back in WordPress, click Appearance and then Widgets. In the right column, under the sidebar box, you’ll see corresponding Widgets listed there for each of those items. These are the defaults that come with every new WordPress installation, but they’re not all that useful. After all, we’ve already got a search box in our navigation, and the other items are what I consider “antiquated blog tools”. In other words, they’re the features that blogs originally came with when the idea first began, but they don’t get utilized by users very often and they’re not exactly going to help us fulfill our own goals. Let’s look at how we can replace them with some more useful features.

So to get started, just start dragging each of those items out of that sidebar box so we can start with a clean slate. Once that’s done, we’ll review how to add three different features to your site: a newsletter signup (so we can communicate with our users as effectively as possible), social networking links (so you can help spread the word about your travels), and a Popular Posts section, where we can show new users some of our best stuff right off the bat, to help draw them in and keep them coming back.

partial screenshot of WordPress' Widget area, demonstrating dragging a widget out of the sidebar box
Drag all of these away, they're no good to us!

Creating a Newsletter Signup Box

Here’s another example of where we’re going to leave WordPress and use a third party service to help us build our site. Simply put, having a large database of willing newsletter subscribers is a great thing! It gives you a way to proactively reach out to your readers, something you’ll be very interested in if you ever decide to try and make money from your blog.

Managing a list of newsletter subscribers, however, can become very cumbersome, particularly when your list gets into the hundreds or thousands. In fact, just running an email newsletter comes with a great responsibility: not being a SPAMmer. SPAM is that annoying pile of emails you get everyday that you don’t want, that you never asked for, that shouldn’t be in your inbox. Yes, it’s the Nicaraguan Prince who has a fortune waiting for you and links to the latest porn products, but it’s also coupons from Amazon or Target that you never specifically signed up to receive. At some point, they got your email address, and they want to market to you, so they do, as shady as the practice is.

I can’t repeat this enough, Do not be a SPAMMER! It’s actually legally required of you to remove anyone from your newsletter list when they ask you to. If you end up with hundreds of subscribers, that can become a cumbersome task. Additionally, sending out hundreds or thousands of emails can be a huge burden on your computer, often tying up your machine for hours and hours. Some email providers, like Gmail, limit the number of emails you can send in a 24 hour period. With all of these things in mind, let’s look at a service that handles all of these issues for us, and is free.

MailChimp is an exceptional newsletter service provider, and is completely free for subscriber lists under 2,000 people. If your list ever grows larger than that, you’ll need to fork over a reasonable amount of cash, but that means you’re doing something right and probably on your way to making some cash from your site anyway. For now though, it’s absolutely free! To get started with MailChimp, head on over to MailChimp.com and click the Sign Up Free button.

the Mailchimp mascot
We recommend Mailchimp for newsletter management.

They’ll ask you for a username, email address and password. Once you’ve given that info to them, they’ll send you an email and you can login to your account. We won’t be covering every detail of how to run a campaign via MailChimp in this handbook, it’s simply out of the scope of what we’re doing here. Luckily, they’ve got a great blog and a series of introductory articles to help you get started. What we want to do is get us setup to the point that we can get a form to add to our own website so we can start allowing folks to sign up for our newsletter.

Once you’re logged in to MailChimp, click Lists near the top of the site, then Create List on the left.

screenshot example of where to click in Mailchimp to create a new list
Create your list!

Give the list a name, complete the various other fields you see there and click Save. You’ll now see the new list created and listed in the right column. Click the big View button for this list. Find the For Your Website navigation item and choose Signup Form Embed Code from the dropdown.

Scroll down the page and you’ll see some code below copy/paste into your site. Copy it all. This is the code that will create your newsletter signup form and we’ll embed it back on the site, but first we need to clean it up a little bit.

Head back over to the Widgets page in WordPress and, by dragging a Text block into the sidebar box, let’s create a new spot for our newsletter signup.

Give the Text Widget a title. This could be as simple as “Newsletter Signup” but this is a chance to show your creativity and give people a reason to want to signup, right? Maybe something like “Us in Your Inbox!” or “Weekly Travel Tips” or “Want to Hit the Road?” or whatever your imagination can dream up.

Now, we’ll paste our MailChimp code into the larger field there. It looks something like this:

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://wandrlymagazine.us4.list-manage1.com/subscribe/post?u=7a757f4226a2b4a6c8bef29de&id=2ad5ef98a1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<label for="mce-EMAIL">Subscribe to our mailing list
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
	<div class="clear"><input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe" /></div>
</form>
</div>
<!--End mc_embed_signup-->

That’s a lot of code, and significantly more than we actually need. MailChimp does this to try and make it as easy as possible for people who don’t know HTML to get there signup form looking decent on their site. Luckily, I’ve done all of the hard work for you with this theme, so you can remove the extraneous stuff that will technically invalidate your site. This includes everything above the opening <div id="mc_embed_signup"> tag and below the closing </div> (the one immediately following the </form>) tag. So what we’re left with is something like this:

<div id="mc_embed_signup">
<form action="http://wandrlymagazine.us4.list-manage1.com/subscribe/post?u=7a757f4226a2b4a6c8bef29de&id=2ad5ef98a1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Subscribe to our mailing list
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe" /></div>
</form>
</div>

Let’s briefly review each of those elements and look at how we can improve each of them.

<div id="mc_embed_signup">

A “div” is simply a box who’s primary purpose is to divide content into different areas, and is typically used for the purpose of styling a website. Leave this as it is if you want your form to look like the one on our example site.

<form action="http://wandrlymagazine.us4.list-manage1.com/subscribe/post?u=7a757f4226a2b4a6c8bef29de&id=2ad5ef98a1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

This is the beginning of the code that handles the actual form. The “action” attribute tells the form what to do (and note that yours will be different than mine, don’t just copy what’s above, use the code you copied from MailChimp!) The “method” is how the form will send the information, both the “id” and “name” attributes are ways of naming the form, for styling and functionality purposes alike. The “class” is also a styling element that can be used in conjunction with CSS code to change the look of your form. The “target” attribute tells the form to open in a new window or tab, and the “novalidate” attribute tells the form that it doesn’t need to check that the email address is correct (this is a somewhat experimental feature that isn’t supported in all browsers at the moment). We don’t need to change anything in this line.

<label for="mce-EMAIL">Subscribe to our mailing list

This is the label that will appear immediately above the input field (where users enter their email address) on our form. Labels are important for screen readers (devices the visually impaired use to browse the web) and to ensure that your website validates. But they don’t have to be boring. You can change the “Subscribe to our mailing list” text to whatever you’d like, perhaps another incentive for folks to sign up like “Once a week emails, no SPAM” or “Coupons and free stuff” or “A Joke a Week” or whatever is relevant to the type of newsletter content you’ll be sending out.

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>

This line is the actual field where users will enter their email address, known as a text input. The “type” attribute states that this field should be used for email address inputs. The “value” can be used to prepopulate the field’s contents, though the “placeholder” attribute does this as well and better. If “value” is populated, the user must actually select and delete the value, if “placeholder” is selected, when the user begins typing the initial text disappears. You can go ahead and replace the “email address” text with whatever you’d like, but it’s probably best to make it clear they should enter their email here, unless you’ve done that with your label above.

<div class="clear"><input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe" /></div>

This is the piece of code used to create the button to submit the form, but it’s a bit outdated. Let’s completely replace it with:

<button type="submit" id="mc-embedded-subscribe">Let's Do This!</button>

This is a simple, straightforward way to create a button on a website form. The “type” attribute states that it will be used to submit the form and the “id” is for styling purposes. You can change the “Let’s Do This!” text to anything you want, and that text will appear on the button in it’s stead.

Once you’ve done that, Save the Widget and have a look at your site. Your brand new newsletter form is up, running and looking great.

Newsletter signups are one of the most effective way of communicating with your users. Sure, some will visit your site everyday to see if you’ve posted any new content. Others will subscribe to your RSS Feed. Some folks might follow you on Twitter or friend you on Facebook, if you have a presence there. But while social networks and RSS feeds are new technologies and visiting a website everyday requires effort, getting updates via email uses a well established delivery method that nearly everyone who’s online knows how to use. It also gives you the power to push out content to them when you want. Of course, if you do this too much or your content isn’t valuable, this can backfire, but when done correctly, newsletters are a great way to let people know what you’re up to and what you’d like them to do about it.

the finished result of our newsletter signup form efforts
The final result should look similar to this!

Clue People in to What Social Networks You Use

You’re well on your way to getting your blog running like a champ, but there are a ton of outlets available for publishing content and interacting with people on the web. Videos on YouTube, status updates on Facebook, Twitter tweets, Flickr photos, the list goes on and on. Before your head begins to explode, there’s good news! You don’t need to jump onto every social network to run a successful blog. If you don’t enjoy working with a particular social site, then don’t use it. If you have no desire to make videos, why try and start a YouTube account?

If you do want to tell people about what social networks you participate on, though, we have some built in functionality for that. Again, head over to the Widgets area of WordPress and create a new Text Widget just below the one we created for our newsletter code (you should be a pro at this by now!)

In the Title field write something clever like “Social Net Me!” or “Follow Us!” or “Lions, Tigers and Tweets, Oh My!”

In the code area paste the following:

<p class="i-fb icon"><a href="http://facebook.com/Wandrly">Facebook</a></p>
<p class="i-twitter icon"><a href="http://twitter.com/WandrlyMagazine">Twitter</a></p>
<p class="i-yt icon"><a href="http://youtube.com/clicknathan">YouTube</a></p>
<p class="i-flickr icon"><a href="http://flickr.com/clicknathan">Flickr</a></p>
<p class="i-gplus icon"><a href="https://plus.google.com/111983117259015694700/posts">Google+</a></p>
<p class="i-rss icon"><a href="/feed/">RSS Feed</a></p>
<p class="i-email icon"><a href="mailto:you@gmail.com">Email</a></p>

Each of those lines represents one of seven different popular features for sharing content on the web. Let’s see what we’re looking at here.

<p class="i-fb icon"><a href="http://facebook.com/Wandrly">Facebook</a></p>

The “p” tag just means a “paragraph” of text, even if it’s just one sentence, phrase or word. As noted above, the “class” is used for styling. In this case, the “i-fb” tells the site to show the Facebook icon, and the “icon” tells the site that this paragraph uses icons in general.

The “a” tag stands for “anchor” and essentially means you’re creating a link. The “href” tells the browser where the link should point. So in this case, we’re linking to the Wand’rly Facebook site.

screenshot of social links to Facebook, Twitter, etc. on a Wandrly.me blog, each with it's own little icon and a title reading Our Social Neighborhood
The Social Networking Widget in Action

You can look through each of these and delete the lines you don’t want to use (if you don’t use Google+, no reason to list it here) and change the “href” values to wherever your own social networks are found. The final two items have a few specific needs, though:

<p class="i-rss icon"><a href="/feed/">RSS Feed</a></p>

RSS Feeds provide users with a way of receiving content via a “Reader” that typically strips away the design and formatting of your site and just sends users the actual content (often images and text from a blog post, for example). They don’t need to come back to your site everyday to see if there’s new content, they just check their reader for new posts whenever they’d like. You don’t need to change anything with this line, it will automatically point to the RSS Feed on your site.

<p class="i-email icon"><a href="mailto:you@gmail.com">Email</a></p>

Note the “mailto:” portion of this link. This essentially says “don’t try and visit a web page, but open up an email client and send an email to this person if the browser is configured to do so”. Depending on who your email provider is, listing your email right on the website like this can result in more SPAM in your inbox, though Gmail users are typically pretty safe given all of Google’s strength fighting SPAM these days.

Displaying Your Most Popular Posts

Next we’ll get Popular Posts configured. Unfortunately, this functionality isn’t available in any widget right out of the box, so we’ll need to dive into WordPress Plugins. Plugins are additional pieces of functionality that can be activated outside of the basic stuff that comes with WordPress. With your free wandrly.me account, you’re limited to those Plugins listed when you visit that section of the site. This is because many plugins out there have been developed by people with less than stellar coding capabilities, or simply aren’t supported anymore. We do aim to provide access to the most useful, well built plugins available, though.

Visit the Plugins area by clicking that item in the left navigation. You’ll see a list of available plugins. Click Activate underneath the Jetpack by WordPress.com. A banner will appear asking you to “Connect to WordPress.com”. Click it.

partial screenshot of Plugins page, showing an Activated plugin and two inactive plugins
Hover over a plugin and click Activate to turn it on.

You’ll be taken to a new site which will ask you to login. If you happen to already have a WordPress.com account, just login. Otherwise, click the Need an Account? link. Complete the various fields on the first page and click Sign Up. WordPress.com will send you an email with an activation link. Click that and you’ll be taken to a screen that asks you to “Authorize Jetpack”. Do just that, and you’ll be redirected back into your own WordPress installation.

Now you’ll be presented with a whole host of new options for your site, all of which you’re welcome to tinker with in your own good time. For now though, let’s go back to the Plugins page, find the WordPress.com Popular Posts plugin and activate it.

Now let’s head on back to the Widgets screen and add the new widget to our sidebar. The first thing you’ll notice is that, thanks to Jetpack, you have a variety of additional widgets available, not just the new “Popular Posts” feature. You’re free to explore these on your own time, of course, but let’s look at setting up the “Popular Posts” widget.

To get started, you guessed it, drag it over to the sidebar box and place it at the bottom of the list. You can edit it’s Title, set the number of posts to show, how far back posts should be displayed (that is, maybe you only want to show the most popular posts from the last 30 days), whether or not to include Pages, and loads of more advanced features. Click Save and you’re on your way to displaying your most popular posts in your sidebar.

Of course, since we haven’t created any posts yet, nothing’s going to show up there. Don’t worry, after you start blogging a bit and people visit your site, this area will begin to update.

Create Your First Blog Post

Thus far we’ve dealt with a lot of the general setup of your website. That stuff can be fun, if you’re a tinkerer, but most of us just want to get in and start blogging! Well, we’ve finally come to that portion of the show…

If you’ve ever written a Word Document or even an email, you should be as “computer savvy” as you need to be to write a blog post. The more you do it, the better you’ll become. I’ll walk you through the mechanics of it all, but of course writing good content will be up to you and lots of practice.

To get started, let’s head to Posts and then Add New.

This is the WordPress editor. You may remember it from when we touched on it in the section about Pages above. They’re very similar, with a few minor differences given the specific needs of each type of content. Let’s continue.

Writing Your Post

The first field, which reads Enter Title Here until you click in it, is where you enter your Post’s title. This can be just about whatever you’d like it to be. Catchy post titles are recommended, but you’re the author, so go with what you feel is right.

The next box is the most robust and important feature on the page. We’ve dabbled with its capabilities already, but now we’re going to get very indepth. Hold on, there will be some techy jargon, but for the most part, this is all simple stuff.

Firstly, note the tabs near the top right labeled Visual and HTML. Visual mode provides a more Microsoft Word-like experience, where you can easily make text bold or italicized. You can create bulleted or numbered lists and watch them formatted in front of your eyes. There’s a button to create a blockquote, which can be used to quote text from another site or source, in the purest use of the feature, but could also be used to make particular text more prominent on your site, such as how magazine’s often create “pull quotes” to highlight upcoming or important pieces of content in an article.

screenshot of part of the Edit Post page, showing the content editorkitchen sink button, which sort of looks like various color swatches. This is a little known and powerful-enough-to-break things part of the editor. It provides advanced functionality, much of which you may want to learn to use. Let’s look through each element here.

the kitchen sink in WordPress Content Editor toolbar

The dropdown that reads Paragraph allows you to make different pieces of copy in your post different types of content. A normal block of text is typically a paragraph, and thus that is the default setting in the dropdown. You can also choose to mark a piece of text as an address, which affects the formatting (in our default WordPress Theme, it simply becomes italicized).

The preformatted option will change the font face of your content, as well as respect the spacing you add to the text. So where normal HTML ignores more than one space, if you use this preformatted option, and then enter in 172 spaces, they’ll all be present when looking at the front end of the site. This feature is often used for displaying snippets of code or reproducing text files online.

And truly lastly, we have all of our Headings. You can use these to denote specific sections of a document within other sections. Many people use them simply to change the font size of particular pieces of text. The problem with this is that when you use these buttons, you’re actually changing the code behind the post as well. When Google comes to check your site out and determine how it’s constructed, if it sees that you’re using your code incorrectly, it begins to ignore all of your code. So all of the handcrafted coding I’ve taken (or whichever theme you’re using) to make sure your site is search engine friendly, begins to get thrown out the door. Not to mention, your high school English teacher would have a fit if she knew you weren’t following the standardized rules of creating a proper document!

So if you’d like to follow the rules, remember these simple rules:

Heading 1 should rarely, if ever, be used. The main title of your Post is the Heading 1, so you’re all set there.

As you go, each heading should be nested below the number below it. So the first sub-heading you’d use would be Heading 2. If you wanted to break that section up further, you could use Heading 3 to do so, and so on and so forth. Remember, when you write, especially if you ever plan to try and monetize your blog, write like a professional!

Moving on, there’s an underline button, which I tend to stay away from because on the Web, folks relate underlined text to links, so not being able to click on it may be confusing to a user. There’s a justify text alignment button, which will make your text line up both on the right side as well as the left of the available paragraph space.

There’s a dropdown button with various options to change the color of text in your Post.

Paste as Plain Text is useful when you’ve written a post in Microsoft Word or another text editor with rich formatting. Often when you copy and paste text from an outside editor, it will attempt to retain the original formatting, which is all stored as some type of code, and not necessarily HTML. This can end up leaving your post looking garbled or even breaking your site’s layout altogether. Use this button to just paste the text without any formatting. Unfortunately, you’ll also lose all of the formatting you may have wanted to retain, such as bold text. You can use the Paste from Word button to try and retain that formatting, though it’s not always 100%. If you’re having issues with your text doing funky things and you can’t figure out what’s going on, try selecting it and then clicking the Remove Formatting button, which looks like an eraser. I strongly recommend simply writing your posts in WordPress itself, though, to avoid these types of headaches.

The Omega button brings up a window that allows you to insert special characters which aren’t always so easy to create with a keyboard, like » or or é.

Finally, there are buttons to indent or outdent text, undo and redo buttons, and even a Help button if you want to learn even more tricks of the trade.

You may be able to go a long, long while using just Visual mode. At some point though, you’re going to want to dive into the HTML editor. This might be to add some code you received from another website, or it may just be out of curiosity as to how everything works from a behind-the-scenes standpoint.

The main thing to remember is that working with HTML code is not as intense as it seems, particularly when dealing with just paragraphs and bold or italicized text and hyperlinks. If you ever do mess anything up, the good news is that WordPress stores multiple revisions of your content automatically. Just click Screen Options near the top right of the page, and check the box for Revisions. Now you can scroll down the page to see a list of revisions WordPress has kept for you, and find one from before you did whatever it is you did. Voila, instant forgiveness.

Categorizing Your Posts

The concept of grouping your posts together by categories or ideas is a popular one on many blogs. The reality of it is that most readers don’t make a whole lot of use from these categories, unless you use them effectively. We’re going to review how to put your posts into categories, how to tag your posts, and most importantly, how to actually make them effective on your site.

For the purposes of this post, we’ll say we want to categorize our posts into three groups: On the Road, RV Restoration, and The Kids. In this fictional schema of categorization, we’re imagining that everything we write about is either about the places, people and experiences we find while on the road, pictures and how tos about the ongoing RV restoration we’re undertaking, and then pictures and posts of our kids, you know, for the folks back home.

An example of the Categories panel
the WordPress Categories panel, showing a checkbox list of all available categories on a particular blog
The primary Title and Content editor in WordPress' Post Editor

But why would we want to categorize posts?

Well, the most obvious reason is for the peace of mind those suffering from a mild case of OCD might require. But their is a practical reason to do this for our readers as well: while strangers may be very interested in your adventures and watching you slowly restore your RV, they may not—no offense—give a bull’s left horn about your kids. I know, it’s breaking news and all, but nobody cares about your kids, or my kids, or anyone’s offspring except the ones they’re responsible for feeding or directly related to. That being the case, they may not want to keep coming back to your site or subscribe to an RSS Feed that’s 90% pictures of little Timmy and only 10% stuff they’re interested in. It’s okay, we’re planning for that.

Firstly, to create our Categories, let’s go to the Posts then Categories section of WordPress. You can create Categories directly in the Post editor, but we’ll review this page just to be thorough. Creating a Category is really a one step process. Type the name of the category in the first Name field, and click Add a New Category. You’re done. There are additional options, which are explained on-screen, but this is creating a new category at its most basic. Let’s say we’ve created our three, categories, now we’ll head back to the Post editor.

When creating a post, there is a box in the right column where you can tick off as many categories as you’d like, whichever ones you think the post fits into. Simple as that.

But those are broad categories, and sometimes we may want to relate multiple posts to one another on a more specific or less longterm manor. For that, we have Tags. To understand the difference between tags, consider this analogy.

You run a pet store. You sell fish, birds and cats. You always sell those three types of pets. Sometimes you sell goldfish and other times you only sell betas, sometimes you sell parakeets and sometimes parrots, and sometimes you sell calicos and other times only Siamese cats. The type of fish, birds or cats you sell can change. It isn’t constant and static over the life of your business, but instead changes as the needs of your customers and your own situation changes. Tags are the individual, always changing varieties of pets you’re selling, the goldfish or the betas, the parakeets or the parrots. Categories are the fish, birds and cats, the overarching types of pets you’ll always sell.

I like to use tags to define places I’ve been, so for a post about hiking near Boulder Colorado, I may enter the tags: Rocky Mountains, Colorado, Boulder and hiking. Over time, I may write about hiking in the Appalachians and the Himalayas as well. If people love to read about my hiking adventures, they can click that tag and be taken to a page displaying all of my posts about hiking.

I may also write various posts about a coffee shop, some random experience, and the RV park I stayed at in Boulder. If one of my readers is in Boulder and looking for ideas on what to do or where to stay, they could click the Boulder tag and read everything I’ve written about that particular city. I could create a category for hiking and Boulder, of course, but I may never end up back at Boulder again, or not go hiking for a year, in which case I’ve got a dedicated category hanging around for something that rarely if ever happens.

Finally, tags can help with search engine optimization. I might write a post about my 1979 Volkswagen Bus, but throughout the entire post I may simply refer to it as “the Bus”, never mentioning Volkswagen or the year. Google isn’t necessarily smart enough to know that by “Bus” I mean the more technical term “Volkswagen Transporter”…so I could add the tags VW Bus and 1979 Volkswagen Bus to help clue them in on what I’m specifically referring to. Which makes for a wonderful segue into our next endeavor with creating our first blog post…

Make it Easy for Your Readers

Now that we’ve created our categories, lets put them to good use by adding them to our site’s main navigation. Head back over to the Appearances section in your WordPress site’s left navigation, then back into Menus. Look for the box in the left column of that page’s content, labeled Categories. If you don’t see all of your categories listed there, click the View All tab. Tick them all off and click Add to Menu.

You can now organize them in the box on the right as we’d discussed previously. Click Save Menu when you’ve got yourself set up the way you want.

The main navigation on your site now has quick and handy links for your readers to to sort your posts as they desire.

screenshot of our homepage, now with a Categories dropdown menu
Our homepage, now with a dropdown for our categories.

Optimizing Your Posts for Search Engines

I have two simple features built in to every Page and Post editor screen. They are two very easy to use tools that, along with some free advice I’m about to give you, have the potential to significantly up your traffic. Take a look at the Custom Fields section just below the Post editor.

There are two simple fields: Title Tag and Meta Description.

The Title Tag is what controls the text that appears at the top of almost every browser window, Google Chrome the notable exception. While your post itself can have a Title (ie, the title you enter at the top of the Post editor), the actual Title of the HTML page is what is defined here. By default, if you don’t enter anything into this field, it will be whatever the Title of your Post is. But you can use this to tell Google what the page is really about, even if the Post’s title doesn’t define that.

For example, you may write a post about how to safely change the tires on a 1997 Winnebago. To keep it interesting, you may title the Post, “How I Nearly Lost my Fingers Changing Winny’s Tires, and Why it’ll Never Happen Again!” You then proceed to write your Post.

That title may be nice and interesting to folks who read your stuff. But to Google, it doesn’t clearly state the purpose of the entry. So in the Title Tag field, you may simply write “How to Safely Change the Tires on a 1997 Winnebago”. This is more likely something that random users around the web will search for, and is what Google will show in the actual list of search results at google.com. So you both gain the advantage of better potential search engine placement, but also of an actual human seeing the title and thinking it’s what they’re looking for.

Which leads us to an important point when thinking about search engine optimization: the end goal is always to impress human readers, not just search engine “bots” that crawl your site looking for content. You always want to write, whether it’s the content of the post itself or your Title tags or any text that will be visible to a human, with humans in mind. Keep it light and fun, serious and knowledgeable, brief and whimsical or in-depth and technical, but whatever you do, keep it applicable to the actual real life people who will be reading it one day. Attempting to trick search engines by stuffing your content with keywords not only will leave you crying when they one day, and they always eventually do, figure out that you’re trying to scam them (at which point they drop your site from their results altogether) but it won’t keep actual readers coming back to the site for content that sounds like a robot puked up a search query all over their screen.

With that in mind, you have the Meta Description tag at your disposal as well. Search engines do not use this when determining where your site should fall in the list of results for a particular search query. That means it’s completely pointless to stuff it full of keywords. This is strictly used as the little snippet of text you’ll see on search results just below the typically colored blue title. Many times the search engines will simply create this from your content, but at other times they’ll respect what you’ve entered in the Meta Description and display that instead. That is your first and foremost marketing message – tell the user why your site is going to rock their socks off. Keep it relevant to the actual post. In our example above, we might use this area to inform the user that the page contains “A 13 step, fool proof way to change your Winnebago’s tire safely and in less than 20 minutes.”

The meta description is typically limited to around 165 or so characters, though you can enter in as much text as you want, that is normally the limit of what Google will show.

a screenshot illustrating where in a search result on Google the Title Tag and Meta Description appear

A Quick Rundown of How the Search Engines Work

Anyone who tells you they know exactly how search engines work is full of it. This is a closely guarded secret by the people at Google, because if everyone knew exactly how they worked, it would be both easier for website owners to pull a fast one on them and for competitors to replicate the method. That said, there are a few tried and true, legit, tactics that work in the search engine optimization world.

Excellent, I mean Truly Excellent Content

And lots of it. Even if your content isn’t written like a professional journalist, the more you write about what you know, the more you create content relevant to a particular topic (and this could be as broad as “travel” or as narrow as “Roadtrips for beer festivals in a Ford Econoline Van”), the more search engines will want to index your stuff. They like sites with tons of good content, which are updated regularly. There is absolutely no exception for having a plethora of great stuff on your site. Nothing else matters if this isn’t in place.

How Your Site is Built

Your site’s code is important since how well your information is organized, how it’s presented and how quickly your pages download are all factors in where you’ll end up in the list of search results. If you use wandrly.me with the default theme, you don’t have to worry about this one stitch, though.

Links Back to Your Site

The final major factor here comes with how many people link back to your site. Think of every link on the Internet as a vote. Every time someone links back to your site, they’ve told Google “hey, I vote for these guys”.

But all votes are not equal on the web. The more popular a site is, the more important its vote is. So if you get linked to from the homepage of the New York Times, that will count infinitely more towards your site’s perceived worth by search engines than, say, if your Grandma links to you from her cooking blog.

And some votes don’t count at all. Links from Twitter, most blog comment areas and even Facebook all utilize a standard called “No Follow”, which essentially means they’re coded in a way that tells the search engines, “don’t count this as a vote.” I’m getting into this level of detail because a lot of people hear about “backlinks” and think, “cool, I’ll just go post a bunch of bogus comments and forum threads and get a bunch of links back to my site.” You may, assuming the owner of the other sites doesn’t delete them if they’re useless or invaluable, but you’ll only have wasted your time, there’s, and contributed to the always-present problem of SPAM on the Web. Don’t be a spammer, get real links. Ask people to review your site. Link to others first, in a meaningful, relevant way to what you’re talking about on your blog already. Establish actual connections, email people, inspire them to link to you. This is the hardest part of building up your placement in search engines, until you get big, and then you barely ever have to lift a finger. But you’re not going to get big by annoying other webmasters and ruining the Internet. Okay, end of rant.

Working with and Organizing Pages

Now we’ll look at Pages in a little more depth than we previously did. Go to Pages select an existing Page from the list, or click Add New if you want to create another one.

The editor here is familiar, we’ve gone through it twice now. There are a few differences between Posts and Pages when it comes to the editor, though.

What’s the Big Idea with Calling Web Addresses “URLs”?

First, let’s discuss two more pieces of terminology that we’ve mentioned before but haven’t completely defined. You’ve probably heard the term “Website Address”. Basically, this is the name of your site, such as http://yoursite.wandrly.me, or the name of a page on your site, perhaps http://yoursite.wandrly.me/about. A more technical term for a page is universal resource locator, almost always abbreviated as URL. Remember that, as you’ll hear it quite a bit now that you’re a blogger who’s likely going to be diving into the inner trappings of Internet terminology geekdom. It should also be noted that while a website’s address could be defined as simply google.com, the URL of that site is specifically http://google.com.

Another term for this, within WordPress, is called the Permalink.

By default, your website will have permalinks like http://yoursite.wandrly.me/?p=32 – not very attractive (I mean, would you date that?), not good for SEO, and difficult to remember. Luckily, we can change this, and then use the changes we make to our advantage.

The first step is to visit the Settings portion of your WordPress installation and click Permalinks. You’ve got a bunch of options here, and do feel free to experiment, but I’ll tell you right now, the choice you want is Post Name. Tick that choice and click Save Changes.

Now your Posts and Pages will have a URL more like http://yoursite.wandrly.me/page-name – much more stylish and easy to remember. Page and Post names like these will also be more search engine friendly, as the name of each page on your site counts, to some degree, toward how Google and the other search engines view your site’s worthiness for a particular search term.

Now back in the Page editor, take a look at the Permalink area, just below where you enter the Page’s title. The customizable part of that URL will be highlighted in yellow. By default, a Page’s “slug”, that is, the customizable part of the URL, is based off of the Page’s title. So if you create a Page called “About our Family”, it will have a URL of http://yoursite.wandrly.me/about-our-family where “about-our-family” is the slug. If you create a Page called “Contact the Joneses”, it will have a URL of http://yoursite.wandrly.me/contact-the-joneses, where again, the slug is “contact-the-joneses” (everything highlighted in yellow). This can be customized, just click on the yellow highlighted area and type in whatever you’d like your page to be called, perhaps “about” and “contact” in the examples above. This keeps our URLs short and easy to remember.

Note that you can’t have certain certain characters in your URL, such as question marks or spaces. WordPress will automatically remove or replace these items, so you don’t need to worry about it too much, but just a word to the wise for those of you entering characters in and wondering why they keep disappearing.

Organizing our Pages

If you have more than one Page, you can make it a sub-page (called a Child Page in WordPress, we’ll use these terms interchangeably), of another. In the right column of the Page editor screen, look for the Page Attributes box. Select the Page from the Parent dropdown which you’d like to nest your existing Page underneath. This allows you to basically say “This page is a sub-page of the one I selected.” By doing so, you also change the Page’s URL. So if we have a Page with the URL http://yoursite.wandrly.me/about and we make another Page, let’s say it has a slug of “the-kids”, a Child of that “/about” Page. The new Page will now have a URL of http://yoursite.wandrly.me/about/the-kids/

This allows your site to be organized in a meaningful manner, one where users can—if they so desire—gather an idea of the organization from the URL. It also keeps your Pages organized on the main Pages list, which will be a huge benefit to you, the blogger, especially when you start getting to twenty, fifty, a hundred pages and want to find how they all relate to one another. You’ll know a Page is a Child of another in that list by a small “-” before the name of the Page, meaning it’s a Child Page of the first Page listed above it that doesn’t have that hyphen.

Getting a Little Advanced, Forms & Photo Galleries

Let me reassure you of the emphasis I’m placing on “little” here. Forms and photo galleries are cool non-essentials to any WordPress site. Forms can make your life easier. Galleries can make your posts more beautiful. Neither involve rocket science nor even working knowledge of HTML, thanks to WordPress.

screenshot of a form on a Wandrly.me site
Example of a form.

Add a Contact Form to Your Site

Let’s say you’ve already created a page on your site called “Contact Us!”. If you haven’t, feel free to do so now and then continue following along.

Head into the Page editor for your contact page. Take a look at the Upload/insert area just about the editor box. There are two icons there, the first is for uploading files to your site, the second is a piece of functionality we added when installing the Jetpack plugin, which allows us to create and add forms to our website.

So go ahead and click the Forms icon. A screen will appear which allows you to embed the default form or modify it to your liking. On the left we see the default form. If all you want is to provide a way for people to enter their basic info, you can click Add this form to my post and be done with it.

If you want to customize things a bit, you can drag the various fields into a different order, or use the click here link to the right to add different fields. Let’s review what each of those fields are here briefly.

Checkboxes allow the user to select one or more options.
Dropdowns use less space than radio buttons (below) and only allow the user to choose one option.
Email requires the user to input a valid email address.
Name is essentially a normal text input (see below) that is recognized by WordPress as the user’s name.
Radio buttons are similar to checkboxes, but only one choice can be selected.
Text fields are the most basic input. They’re one line input fields for things like names or whatever you can dream up.
Textarea fields are larger, multi-line input fields good for things like longer messages and comment forms.
Website fields will attempt to ensure that the user has actually entered in a valid URL, such as google.com or http://mywebsite.com/some-page.htm

You can tick the required box for any particular form field, which will prevent the form from being submitted by the user until they complete all of the required fields.

You can also click the Email notifications tab near the top of this interface to change who the email gets sent to upon submit, as well as the subject line used. Neither of these will be visible to the user, they simply change up what you see in the email sent to you (or whoever is listed in the Enter Your Email Address field). Note that if left blank, the form’s contents will be sent to whoever is the primary owner of the site, as defined in Settings > General.

Adding Photos and Photo Galleries to Your Website

The other button in that Upload/Insert area, which looks like a camera and music note, is for uploading files to your site. This area is full of options, but actually very easy to use. Click it, and let’s review.

A screen pops up asking you to Upload media files from your computer. Welcome to the magic of the Internet. If you’ve got a somewhat modern browser, you can drag a file from your desktop directly into the Drop files here area, or click Select Files and locate the image on your computer.

Note that the maximum size of a file you can upload to Wandrly.me at this time is 2MB.

Once you’ve chosen or drag n’ dropped a file, it will begin to upload. You’ll see a progress bar which gives you an idea of how long you have to wait. If you’re doing this over a modern connection, that is, one you might find at a house you own and pay someone like Comcast or Charter for high speed Internet access, most files will take about two seconds. If you’re like the rest of us, on the road relying on AT&T, a coffee shop or an RV park’s connection, 2MB files might take a minute or so. Yes, we all know, Internet on the road sucks.

You can upload a variety of files with Wandrly.me, including jpg or jpeg, png, gif, mp3, mov, avi, wmv, midi, mid, and pdf files. For now, we’ll review image files, including jpg, jpeg, png and gif. For all other file types, you can experiment, but mostly you’ll need to link to them independently until the web catches up with non-image files (it’s coming soon!)

After the image file’s uploading, you’ll be shown a thumbnail of your picture and a variety of information, as well as some fields you can modify. Let’s review those, and what each does.

screenshot of the WordPress image uploader in action
Setting up our image.

Adding a Single Photo or Image to a Page or Post

We’ll first cover what each field does with regard to inserting a single image into a Page or Post.

Title allows you to set the title of the image. This will be reflected in both the HTML title attribute of the image’s code (which means in most browsers, it’s what people will see when they hover over the image and the little yellow tool tip appears) as well as when you’re viewing the file in WordPress, either in this screen or via the Media navigation area.
Alternate Text should be used to briefly but accurately describe what the image is. If it’s a picture of a brown dog chewing a ball, write that. If it’s a photo of Eddie Munster giving a thumbs up to his dad at a charity ball, write that. This is used by screen readers to help people who are visually impaired know what the image is. Do it, it’s the right thing, and it may even help you with SEO. But only if you do it right, and enter in text that accurately describes what the image is.
Caption – whatever you enter here will be shown just below the image as text, though you can manually enter HTML into this field as well if you’re keen.

Description is not typically shown, though there are cases where it can be displayed, such as on the image’s Attachment Page. Basically, this is a page dedicated to showing the image itself surrounded by your website. More on that in the next definition…
Link URL determines where, if anywhere, the image will link to. You can use the buttons below this field to automatically set the image to link to nowhere, None, to the original image file itself, File URL, or the image’s Attachment Post URL, which is the page mentioned above that shows the image in your site’s design and with the Description text below it.
Alignment determines whether your image will align itself to the left, causing all text below it to wrap around to the right of the image, centered, which will center the image with no text wrapping around it, or right, which is the opposite of left. As in your hands.
Size can be used to determine how large the image will appear. The various sizes available can be set in the Settings > Media section of WordPress. Every image you upload, provided it’s large enough to fit the smallest dimensions of a particular size, will be resized to all of the provided dimensions. Images that are smaller than a particular size will not be scaled up, though. More on this later.
Use as featured image, a small blue link below these fields, allows you to set the image as the primary one for the Post or Page. For Posts, this means it’s the image that will appear behind the title of the post on your homepage, as well as in other areas of your post (provided you use the default theme that comes with Wandrly.me). The image will be automatically resized as needed.

Click Insert into Post to add the image to your Post or Page. The image will be inserted wherever your cursor was when you originally clicked the icon next to Upload/Insert.

screenshot demoing an image after it's been placed in a blog post
Well would you look at that...just look at it!

Adding an Entire Photo Gallery to Your Post or Page

If you upload multiple photos to one Post or Page, you can add them as a Gallery. This is a series of thumbnails which, when the user clicks on one, will show them a slideshow of all the images in the Gallery. All images from a particular Post or Page will be shown in the gallery, and there’s no way to limit which are shown.

First, let’s assume you’ve loaded a bunch of images to a Post and are still in the screen that allows you to do so. Click the Gallery link near the top of that screen. You may have to click Save all Changes before this appears.

Scroll down past all the images in the Gallery and you’ll see a section titled Gallery Settings. Let’s review our options.

a screenshot of an example gallery, showing nine pictures lined up in a grid
A photo gallery

Link thumbnails to determines whether, when clicking a thumbnail, the user will be taken to a new page showing the image in your site’s design, or just to a new tab with the image all by itself. If you go to Jetpack in WordPress and Activate the Carousel feature, though, you’ll get a beautiful, fully immersive slideshow when clicking on thumbnails.
Order Images by allows you to determine the order the images will be shown. Next to each image in the list above this section there’s a little box next to the link Show. You can enter numbers in to set the order of the images by choosing Menu Order from this dropdown. All of the other options are self-explanatory.
Order will switch from first to last (Ascending) or last to first (Descending) depending on the order images by selection you’ve chosen.
Gallery Columns doesn’t really apply all that much to your theme either. As it’s responsive (meaning the front end of your site will change depending on the size of a user’s screen. Check out your site on a desktop monitor vs. say, an iPhone, to see what I mean. It’s fabulous.

When you’ve made all of your selections (by the way, leaving these all at their default settings is absolutely fine), click Insert Gallery and the gallery will be placed in your Post or Page wherever you left the cursor.

Links, that is, Your Blogroll

A popular feature on many blogs is for authors to display a list of links in their sidebar. Sometimes these are to beneficial resources, other time these are simply links to other blogs they enjoy reading. This feature is so popular, or at least historically has been (um, can ten years of “blog” existence constitute “historic”?) enough that WordPress has built in a dedicated section to links. Unfortunately, it doesn’t get a lot of attention from the developers, and so many of its features are a little out of date. Still, you may love the idea of having a list of links to your fellow travelers or useful sites in your sidebar, so we’ll cover this section of WordPress briefly.

First, let’s look at how to create these links. To get started, click the Links item in the left navigation.

You’ll be shown the default list of Links that are built into WordPress. Note that the term Bookmarks is often used interchangeably with “Links”, and the entire list of Links is often referred to as a Blogroll.

The default list basically contains a bunch of Links to WordPress related features like Documentation, support forums, etc. You’ll almost undoubtedly want to delete these. To do so, first click the checkbox next to the Name heading on the table holding the list. Then, from the Bulk Actions dropdown above the list, select Delete and then click Apply. You’ve not only now deleted all of the default Links, but you’ve learned about a new feature in WordPress. From the list of Pages and Posts, to Users, and more, this is a recurring capability throughout WordPress: the ability to manipulate multiple items at once.

You now no longer have any Links associated with your site. Let’s first learn how to create some new Links before covering how we’ll actually show them on your site.

Create Some Links

To get started, click the Add New link in the left navigation. Let’s review the options on the screen that appears.

Name is the actual text that will appear on your site’s sidebar once we add the links to it. If you’re linking to your mom’s cooking blog, you might enter “My Mom is the Best Cook in the World” here, or if you’re linking to Google’s homepage you might write “How to Search the Web”. If you wanted to link to Wand’rly Magazine, you might enter “Best Magazine EVER!” It’s your call.

Web Address is where you enter the entire URL of a website. Remember, we need to include the “http://” in a URL. WordPress reminds you of that onscreen. So what you type in that box should be something like http://awebsite.com or http://awebsite.com/a-particular-page if you’re linking to a specific page on another site.

Description is optional, both while you’re creating the Link and when we get to the part where we add it to your site. The description is just that, some text describing what users can expect to see at the page. In our examples above, we might enter “Great Southern recipes from the woman who raised me”, “A search engine”, or “An online magazine for full-time travelers.”

Categories can be used if you have a lot of links and want to sort them. Perhaps you have created Links to a myriad of sites, some of which are about traveling, others are just fun blogs you like to read. You can create categories and sort them just as you do with your blog posts. We’ll cover how to show different categories of links in different places on your site.

Target determines what will happen in the user’s browser when they click one of these links. There are only two valid options with the default (and most) theme on Wandrly.me, _blank, which opens the website in a new tab or window (depending on the user’s browser setup) or _none, which will open the link in the same tab or window the user is viewing your site in. Essentially, “_blank” means your site will still be visible in the user’s browser in some way, while “_none” means it won’t. There are a ton of opinions around the web about which one is right to use and which one is wrong. I personally think that if I’m linking to a new site, it should open in a new tab or window, but that’s just me (the expert).

Everything below that is either outdated or involves a more technical walk through than we’re going to get into here. Feel free to experiment, of course, but we’ll proceed.

After you’ve completed the fields, click Add Link. You’ve now saved your Link. Create as many as you’d like, the sky’s the limit, though I always say, the more options a user has on a particular site, the less likely they are to choose any one in particular. Less is more, that’s a fact. More is not more. More is not less. More is not Mandy and Mandy Moore is not Billy Jean’s kid, and we know who Billy Jean is not.

Moving on…

partial screenshot showing the WordPress Links panel being completed
A Link about links

Add Your Links to Your Site

There are two main ways we can add these links to our site: in the sidebar via Widgets, and using something called Shortcodes to add them to a specific page.

Use Widgets to Add Links to your Site’s Sidebar

This is maybe the most popular way to add your Links. It will place them on every single page of your site, whether it’s a blog post, an actual WordPress Page, or some other page like your search results.

To do this, go to the Appearance > Widgets section of your WordPress site. In the Available Widgets box, find the Widget titled Links and add it to your sidebar widget box. You can drag it up and down in that box to determine its position in the list of your sidebar items. There are several options available with this Widget.

Select Link Category will allow you to determine if all Links are shown, or only those in a particular Link category.

Sort by gives you various options as to what order the Links are listed in.

Show Link Image is not utilized by the default theme built into Wandrly.me at this time, however if you’re using one of the other available themes, this may work for you.

Show Link Name is usually desirable, if you uncheck this all links will be displayed as their URL instead of the name you set. You’ll need to set this in the Advanced box when creating or editing a Link.

Show Link Description allows you to show the description next to the Link’s name.

Show Link Rating is another feature which isn’t fully supported by the default Wandrly.me theme, but can be set in the Advanced box in the Link editor.

Number of links to show allows you to determine exactly how many links can be shown at max.

Click Save and have a gander at your website’s front end. Look at that, your Blogroll in all of it’s glory.

Use WordPress’ Shortcode Feature to Add Links to a Particular Page

Maybe you don’t want these links in the sidebar of every page. Here we’ll cover how to show them only on certain Pages, Posts or multiple varieties of each.

Shortcodes are either built-in or Plugin (we’ll cover those next) powered ways of adding specific pieces of code, and therefore typically content, to a Post or Page without actually doing much coding. They look like this:

[shortcode option1="x" option2="y" etc...]

The [ and ] define the beginning and end of a shortcode. Some come with additional options. For the specific shortcode that allows you to add your Links to a particular Page or Post, you’d use:

[links]

That is the most default implementation available. It’ll list all of your Links in the default format. You can add various options, for example, say you wanted to add a Facebook “Like” button next to each Link in the list, you’d enter:

[links fblike="1"]

Or maybe you’d like to limit the number of Links shown in your list as well, you’d enter:

[links fblike="1" limit="10"]

Which would limit the number of Links shown to a maximum of 10.

You can add as many of the following options as you’d like, just use the above schema.

Congratulations! You’re now a master of WordPress’ Links functions (or at a very minimum, a master’s apprentice!)

Add Power to Your Site via Plugins

One of the coolest features of WordPress is that you can use Plugins to extend the basic functionality outlined here. Jetpack was a plugin, so you’re already familiar with the basics. Here are the plugins available with Wandrly.me as of the writing of this post, along with a description of what they each do.

Akismet is a highly recommended Plugin that helps fight SPAM in your comments’ section.
Facebook provides complete integration with your Facebook account, outlined below.
Feedburner Converter gives you analytical tracking power over your RSS Feed, more on that below.
Google Analytics makes it easy to add the necessary Javascript Google Analytics provides to get this service installed on your site, more on that below.
Gravity Forms is an epicly powerful forms plugin that can allow you to do all types of amazing stuff, including accepting payments via your site. You can ignore the prompt to Register your copy… as I’ve already done that for you.
Gravity Forms PayPal Addon must be activated if you want to accept payments with your Gravity Forms.
JetPack by WordPress.com provides a ton of additional features for your blog, outlined above in this handbook.
Tweet My Post gives you an easy tool to automatically add new posts to Twitter as you create them.
WordPress.com Popular Posts allows you to list out your blog’s most popular content in your sidebar, as outlined above.

Feedbacks

Here you can see all of the data that anyone entered while completing a form on your site, as described above. A handy way to keep track of all submitted forms even if you’ve lost them in various emails or they were set up to send to someone else.

Themes

Go to Appearance in WordPress, and then click on Themes.

There are three themes available at the moment with Wandrly.me, all listed here. These include Wand’rling, which is the one we’ve been working with all throughout this handbook, and the default theme for Wandrly.me. The other two are Twenty Ten and Twenty Eleven, the last two themes that come packaged with WordPress. They’re both good themes, and even have some options not available here (as well as lack some), but you’re welcome to experiment.

There’s also one final theme, NextToNothing, which is a completely non-styled but fully functional theme that you’re welcome to theme on your own! You know, should the desire ever strike you…

Note that if you change a theme, you’ll need to reconfigure the Widgets on your site, as those are stored on a per-theme basis. If you ever switch back to a theme for which you’d already configured Widgets, those will be there when you come back.

Users

You have the option to allow other people to register on your blog. By doing so, they become what WordPress calls Subscribers. This is not to be confused with subscribers to your MailChimp account, or RSS Feed subscribers. This is simply a term WordPress uses for this particular Role.

Subscribers can comment, as long as they’re logged in, without having to type their name, email address and website each time. They can also login to the backend of your WordPress site and edit their contact / profile information. They cannot see all of the other sections of your WordPress administrative area, and thus cannot edit or write Posts or Pages, see other Users, install Plugins, or much of anything else.

partial screenshot of WordPress users page, showing three users, Jack, Allen and William
WordPress Users

What are Roles

Roles in WordPress are a way of determining who has permission to do what. There are 5 default Roles in WordPress.

Subscribers who can do very little, except what’s listed above (edit their profile and comment without filling the fields out every time).

All other Roles must be explicitly set by you. That means that you can create other Users who are able to login to the backend of your WordPress site and control certain things.

Administrators are able to do everything possible in your WordPress backend. This means they can delete it, break it, or just do a great job taking care of things for you, it all depends on the person. Give people this permission with caution.
Editors cannot see the majority of your backend. What they can do is create and publish new Posts or Pages, as well as edit other people’s stuff.
Authors can only create and publish their own Posts or Pages. They can’t edit other people’s stuff.
Contributors can only create new Posts, and can’t publish them. An Editor or Administrator has to go into WordPress and approve their content before it can be published.

But, Why Do I Care?

Admittedly, for a personal blog there isn’t really much need to get into messing with roles. Most folks who become users will simply be Subscribers, able to comment on your posts more easily. However, two useful scenarios for roles would be for your significant other traveling companion(s) or kids.

Let’s imagine a typical traveling family, Mom has gone through this handbook and created the family a blog. She wants her sixteen year old Baby to be able to blog, as well as her eight year old Buddy. Dad doesn’t care to share the thoughts in his head, being a tough man and all, but he has agreed to take part in another way. Baby is assigned the Role of Author. She can write and publish her posts at will, because she’s one of those great teenage girls who has lots to say and never anything bad about anyone. Buddy, though, is only set to be a Contributor. That way, Dad–who’s been setup as an Editor, so he can’t fumble up any of the other settings Mom worked so hard to get just right–can review his posts for grammar or oddities or mentions of how much time Mom spends reading People magazine.

Potential screenshot of registration for Phil Ochs on a Wandrly.me blog
Adding a new user, old Phil Ochs, sad and broke.

Creating New Users

You can manually create new Users of any Role by clicking Add New under the Users section of WordPress. You have two options:

Invite Existing Users to your Site

If you happen to know the email address of any user on the Wandrly.me network (that is, all sites created via Wandrly.me), you can invite them to your site by entering their email address and choosing a Role for them in the first section of this page. Click Add Existing User and they’ll receive an email notice that they’ve been given permission to login to your site and do whatever you’ve given them the capability to do.

Add New User

Here you can create a brand new user, someone who isn’t on (or at least you’re not aware they’re on) the Wandrly.me network already. Give them a username, enter their email address, and set their Role. They’ll receive an email with login instructions after you click Add New User.

Tools

This section of your WordPress site provides various advanced options. By “advanced” I mean, “you can break stuff”, so much of this area has been disabled. Key functionality left, which you may be interested in, is:

Press This is for your browser, if it supports it. It’s an easy way to create new Posts while surfing the web, right from your browser.

Import has been disabled.

Export allows you to do download file that will contain all of your Posts, Pages and Feedbacks, or just one of those options, if you ever want to move from Wandrly.me to WordPress.com or a self-hosted setup of your own. Wandrly.me believes 100% that you own all of the data you enter into its system, and we neither claim to have any ownership over it, any responsibility for it, or have any desire to prevent you from moving elsewhere if you ever choose to do so!

Delete Site is pretty obvious. Read the page completely and understand what you’re doing. You won’t have a chance to “undelete”, and we won’t necessarily have a backup of your most recent data, so it’s a good idea to use the Export feature above just in case there’s a slight chance you might ever want to restore your site.

Settings

Ah, the Settings area. Complicated. Powerful. Able to break an entire site with just one radio button. Not to fear though, we’ll walk you through every screen, every option, right here. Change the default size of images on your site, make a Page instead of your latest Posts the homepage, and control who can comment and how.

But please, tread with caution, for these be tricky waters at times..

General

This area provides the following options (this assumes you’re using the default Wandrly.me theme, otherwise, results may vary):

Site Title which changes the name of your site as reflected in your site’s header. We’ve covered this above.

Tagline we’ve also covered above, changes the text displayed just after your site’s Title.

E-mail Address has, again, been covered above. Changes where default notifications such as from Forms which haven’t been configured otherwise and comments are delivered.

Timezone allows you to set your timezone relative to UTC.

The remaining options do not affect the default Wandrly.me theme, and changing them, regardless of theme, will never break your site.

partial screenshot of the General Settings page in WordPress
Edit and save, look who's coding now!

Writing

Size of the post box determines how tall the editor itself is on the Post and Page editor screens.

Formatting allows you to set whether certain symbols often used in texting are converted to particular smiley faces. The second option should actually be checked by default, but it’s not. Setting WordPress should correct invalidly nested XHTML automatically will make sure you have much, much less of a chance of screwing up your HTML if you forget to close a tag.

Default Post Category allows you to set what the default category is for a Post, in case you forget to categorize each and every post.

Default Link Category does the same for Links.

Remote Publishing. You’ll want to tick the box next to Enable the WordPress, Movable Type, MetaWeblog and Blogger XML-RPC publishing protocols if you want to use the WordPress app for iOS, Android or other mobile platforms.

Atom Publishing Protocol is only to be checked if you know what you’re doing, so if you checked this, you probably either don’t know what you’re doing, or really know what you’re doing, in which case, carry on.

Reading

Front Page Displays is a wonderfully powerful tool that allows you to show a Page on your homepage, instead of your most recent Posts. Let me repeat, this is the beginning of where WordPress becomes a true Content Management System, not just a blogging platform. So say you want to have a static homepage that always shows the same content, you could use this dropdown to select which Page you want to use to control that static homepage. Now you’re open to a plethora of new possibilities. The potential is about halfway to limitless. Use your imagination! Or just leave it as it is, that’s completely fine, too. Just note that if you do this, you’ll need to create a Page dedicated exclusively to showing your latest Posts, perhaps called “Our Blog”, which you set via the second dropdown box in this section. Otherwise, your posts could get lost, or a Page you actually want to use could be overwritten. This is all undoable, so experiment, and enjoy.

Blog pages show at most determines how many Posts will be shown on any given screen. So if this is left at 10, then 10 posts will be listed, one after the next, on your homepage, and in various other places throughout the site such as search results. You can up this to whatever you’d like, but the more Posts per page, the longer a particular page will take to load.

Syndication feeds show the most recent has to do with how many posts will be shown in your RSS feed, at least when a user initially begins to follow you. I typically leave this at 10.

For each article in a feed, show determines what people who subscribe to your feed will see. There are two options, and I’ll tell you, Full text is the only way to go. But let’s look at each so you can make an informed decision.

Encoding for pages and feeds should never be changed. Ever. Pretty much. But seriously, I doubt you should be changing it. Did you just? What?! Okay, I warned you.

Discussion

This all has to do with commenting and subscribing.

Attempt to notify any blogs linked to from the article will do what it can to tell other blogs you’ve linked to them, which can sometimes create a bogus looking link on their site back to you. This is fine to keep checked, though you may want to research it further.

Allow link notifications from other blogs (pingbacks and trackbacks), as I mentioned above, when you keep that option checked, you’ll send a notification to other blogs who play nice that you’ve linked to them. That may automatically trigger a link back to your site. It will be pointless, a “No Follow” link, as mentioned above. However, if you leave this option checked, you’ll set yourself up for the same thing: if someone links to this post, you’ll get a notification asking you to approve it. If you do, it’ll be shown as one of the comments on the post. If you turn this off, though, you won’t be emailed when someone links to you. Which isn’t a big deal, since there are other ways of knowing this, but you can think about it.

Allow people to post comments on new articles, by checking this, you’re saying that “by default, people should be able to comment”. All good blogs allow comments, though some great blogs don’t. It’s up to you. I personally, typically, like the interaction, but particularly if you’re successful, it can be time consuming. Note that this “success” will likely not happen for years.

Comment author must fill out name and e-mail makes it impossible for someone to comment without entering this information, which in some ways eliminates anonymous and bogus comments. But of course, people can still enter in fake email addresses and names if they’d like, after all, it is the internet.

Users must be registered and logged in to comment, by checking this, no one who you haven’t registered as a Subscriber on your site will be able to comment. May prevent SPAM, but will also definitely prevent comments.

Automatically close comments on articles older than … days, if checked, will close comments on articles older than the set time frame. I don’t recommend this, but with exceptionally popular blogs this can help limit SPAM or commenting on outdated material.

Enable nested comments will help organize how your comments appear, and allow people to reply to specific comments instead of just commenting in general. So if Dick posts a comment, Jane can comment on his comment, which will be shown directly below and in correlation with Dick’s comment. Helps to make commenting more of a conversation vs. a long list of unintelligible rants.

Break comments into pages… is not enabled on Wandrly.me at this time.

Comments should be displayed with the…comments at the top of each page sets whether comments are shown most recent first (Newer) or the traditional first commented, first shown style (Older).

E-mail me whenever…Anyone posts a comment will send the site administrator (listed in Settings > General > E-mail address) an email when anyone comments on the site. Good for making sure you’re always replying to people who’ve taken the time to comment. It’s worth it in the long run.

E-mail me whenever…A comment is held for moderation is almost essential to be checked, otherwise you need to check your Comments section regularly. Moderating comments is sometimes necessary, if you’re getting a lot of SPAM, but if you’re using the Akismet plugin as noted above, you shouldn’t get too much. If you do moderate comments, you’re pretty much killing your entire comments system, and removing almost certainly any chance that a user will ever bother to comment again.

Before a comment appears…An administrator must always approve the comment means that no comments, no matter what, will ever be approved until you specifically click a link to do so. I don’t recommend this, it’s lame for the user and more work for you.

Before a comment appears…Comment author must have a previously approved comment means that an administrator will need to approve a comment by a person once, and then after that all of their comments will go through immediately, for the most part. I can’t recommend this, but it might be a good way for you to moderate who’s saying what on your website.

Comment Moderation gives you more fine tuning over what types of comments should be held in moderation (ie, you need to approve them first). You can define the number of links in a comment (a typical sign of SPAM comments are a bunch of links in a comment) or particular words that should trigger a comment to be held. If you’re running a family friendly site, you might enter in swear words here. If you’re a Christian, you might be too offended to write the swear words down, which means you’re out of luck. If you’re a Patriot, you might enter in the words “Muslim”, “Barack Obama”, and “free healthcare”. If you’ve got a sense of humor, you’re not offended yet. Feel free to use this area as you see fit, it can be a good thing, for sure.

Comment Blacklist is the same as the box above it, but instead of a comment being held for moderation, it’s thrown immediately into SPAM, meaning you never have to deal with it.

Avatars are images that represent a particular commenter. Gravatars, on the other hand, are avatars provided by a particular company, in this case WordPress themselves, that can be used on multiple sites without having to register and upload a picture to each. Feel free to read through the options in this section and choose what you will. None of them will break your site.

Jetpack Subscriptions Settings determine which checkboxes, and therefore features, are shown below the comments form. I recommend leaving both of these on, but particularly the “Follow Comments” option. What they both do is send an email to the commenter when either a new post is added to the blog (which they might not care about, but why not give them the option anyway, right?) or more importantly, when someone else comments on a post they’ve already commented on. This gives them a chance to follow up, see if anyone was speaking to them with their comment, and continue engagement with your Post! That’s right, I exclamation pointed that one.

Media

Here we can control how images, videos and other files are generally controlled on our site.

Image sizes sets which dimensions every image you upload will be resized to. When you upload an image, WordPress attempts to create multiple versions of that image at each of the following sizes:

Note that WordPress won’t scale images up. So if you upload an image that is 50×50 pixels and your Thumbnail size is set to 51×51, it won’t try and increase the size of the image. Same for any other larger size. It will only downsize images.

Auto-embeds allows you to attempt to determine whether WordPress will try to embed certain content, such as YouTube links to actual videos.

Maximum embed size can be left alone, unless you want to make your embeds look stupid.

Privacy

This section allows you to attempt to tell search engines, “Hey, I don’t want you telling people about my site.” In almost every case, you’ll just want to leave it at Ask search engines not to index this site.

Otherwise, your site won’t be “invisible”, that is, anyone who knows the URL can find it, or follow a link form elsewhere on the web. All it does is adds a little code to your site that tells search engines not to list you in their results.

Permalinks

We’ve covered this previously in this handbook, but essentially this is where you can change how your site’s URLs are displayed. We’ll go through a few of the default options, and talk about their pros and cons.

Default leaves you with links like http://yoursite.wandrly.me/?p=32 – ugly, unmemorable and not going to do you any favors with the search engines.

Day and name is the former preferred method for Permalinks. Essentially you get a URL that shows the user the date, month and year the post was first published right in the URL, but it also makes your URLs really long like http://yoursite.wandrly.me/2012/12/31/whatever-your-slug-is/ (for the last day of the year 2012). Some say it hurts your SEO to have all of those numbers before the slug, but personally I just think it makes for a long, not so pretty string of characters in the user’s address bar.

Numeric might be good for a math centered website…

Post name is the one I recommend, as do most SEO experts. It leaves you with a pretty little URL like http://yoursite.wandrly.me/my-post – simply wonderful.

Custom Structure allows you to get wild with your URLs. Click the a number of tags are available link to see everything you can throw in here.

Category base & Tag base, allow you to change the URL for pages that only show one category or tag. So earlier we discussed adding your Categories to your navigation, right? If someone clicked one of those links, by default, they’ll take you to a page with a URL like http://yoursite.wandrly.me/category/name-of-the-category – you may want to change that first “/category/” bit, you can do that here.

Footer Navigation Menu

As a quick note, you can also edit the short menu in your footer. By default, it will list all of your site’s Pages, so it’s probably best to edit this. To do so, go back into Appearance and then Menu. Click the + tab next to the Primary menu you created (or whatever you called it), and then choose that menu from the Footer dropdown located in the Theme Locations box. Create your new menu just as we did previously!

Front End Search Results

Head back to your site’s front end and note the search box in the main navigation bar. Type in something simple, like the letter “a” and hit enter or click the search icon.

You’ll be shown a list of search results for Posts and Pages matching the letter “a”. Simple enough.

Screenshot of Example Site
A worthy search indeed.

Your Site’s Responsive Design

Responsive Web Design means creating sites that adapt to the size of the user’s screen. To test your site out, you can open it in a normal laptop or desktop browser like Google Chrome, Firefox, Safari or Internet Explorer, and try dragging the edges of the browser’s window to different sizes. You’ll see the site change how wide certain areas are so that they always fit the window. Now check out your site, if possible, on an iPhone or Android phone. The same principle is in use here, the site is resizing itself to fit the screen.

So “responsive design” literally means “the design will respond to the size of the user’s screen”. That means people will be able to digest your information from whatever device they’re using. Happier readers equal more readers!

Image of a desktop monitor, a tablet and a mobile phone, all displaying a website slightly differently
Your site's design will adapt to the device it's being viewed on.

But How Can I Generate Revenue from My Site?

Ah, “generating revenue”, every bloggers dream! Truth be told, making money from a blog is not easy. If you’re doing this primarily for fun—to share your adventures online, to record your travels, or to keep in touch with family wherever back home used to be— then you may be able to make a few bucks from your site. If you envision this as a long-term money making strategy, that is also obtainable…however, the key term there is “long-term”. It can, and usually does, take a year or two before a site is even noticed by enough people to make selling ads viable, and even then, ad sales alone may not be enough to make you the kind of real money you could make by, oh say, working 30 hours a week for minimum wage.

That said, we’ll show you how to get ads on your site, and we’ll show you a couple of other ways to make money from your blog as well. Your results may vary, no promises are being made, we’re just giving you some places to start and you take it from there.

Getting Started with Google Adsense

Google Adsense is a way of publishing ads on your own site. You don’t need to go out and find businesses who want to advertise on your site, you don’t need to track who’s clicking what, and you don’t need to worry about advertisers paying you. Google takes care of all of that for you. When you do a Google search, note those ads that are often to the right or above search results. Those are the kinds of typically text-based ads that you’ll be putting on your site (though you can also opt to use banner ads, ie, image ads, if you’d like).

To get started, you’ll need a Google Account. If you’ve got a Gmail address, or a Google Plus social networking account, you’ve already got a Google Account. If you don’t, just go to Google.com/accounts and click create an account for free.

Google will pitch you all the reasons why you might want a Google Account but just complete the form there and you’ll be all set. Google will ask you if you want to upload a photo, and maybe some other latest, greatest things, but you can skip this stuff and just get started.

Next, go to Google.com/Adsense and click the Sign Up Now button. Don’t try just logging in, you’ll need to setup your Adsense account and tie it into your Google Account.

Click the Yes, use mynewemailaddress@gmail.com button to continue.

Enter your URL into the I will show ads on field, such as http://yoursite.wandrly.me, then choose your language. Tick the “I have read and agreed…” box and Continue.

Complete your contact information and click Submit my Application. Google will actually have some people, or really smart robots perhaps, review your application. Keep an eye on your new Gmail address (via Gmail.com) to find out when you’ve been approved.

Once you have, go to Google.com/Adsense and login. There’s a ton of stuff you can do with Adsense, we’ll cover the bare bones of creating an ad and getting it onto your website.

First, click My Ads near the top left of the page.

Then click New Add Unit + to begin creating a new ad. There are several options with ads:

Name is for your internal use with Adsense only.

Ad size allows you to determine the dimensions of your ad. There are essentially three places where you can place ads if you’re using the default theme that comes with Wand’rly.me: the header (where you were able to add the Google Map), the sidebar (underneath or somewhere in the mix of where we added our Newsletter Signup box, the Popular Posts, etc.) and within actual Post or Page content. Since your site is responsive, the size of these areas can change, but in general, the following ad sizes work well with each of these areas.

Ad type allows you to define whether all ads will be just text, just image-based banner ads or if they can be a combination of both.

Backup ads. Google’s ads are based on the content of your site. So if you’re writing a post about fishing off of the shores of Lake Tahoe, they may show ads for casinos in Tahoe or for Bass Pro Shops. This is an attempt to show people ads they might actually find useful, and therefore be more likely to click. Sometimes they can’t match your content to any ads, so they show nothing. You can configure this to replace that “nothing” with something, but I won’t explain the details of that here.

Custom Channels can be used to categorize your ads, giving you the ability to know which ads are being used where on your site, for performance evaluation. Feel free to dabble with this.

Ad style gives you a few default layout options/colors, or you can create your own.

When you’re done configuring, click Save and Get Code. Copy the contents of the screen that appears (just the code in the Ad code field).

Now let’s head back to your WordPress site. As I mentioned above, you can go into the Appearance and then Widgets section to add the code to either your header or sidebar. To add it to your sidebar, drag a new Text widget to the sidebar box on the right, then paste in your code. You can leave the title blank if you’d like, or write something like “Our Sponsors” or “Advertisement”. Note that due to Google’s Terms of Service, you can’t write anything like “Click this Ad!”

Save the widget and take a gander at your site. You should see the ad, but if you don’t, fear not, sometimes Google takes a minute to recrawl your site and figure out what it’s about so it can serve up the right kind of ads.

If you want to add it to a Post or Page, that’s simple to do as well. Go to the Post or Page you want to work with, and make sure you’re on the HTML tab, then paste your code in wherever you’d like in the content area. Voila!

You’re now all set to show ads as soon as Google deems the time fit to scan your page and display the appropriate relevant ad.

That said, there is a time for selling ads and a time for focusing your efforts elsewhere, in my professional opinion. If you have very little traffic, you will make very little from your ads. So you’ll essentially be uglying up your site in exchange for maybe $10 worth of revenue. Ads will detract from your Newsletter Signup, and if you’ve gone overboard, perhaps send people running to the hills before they even read your stuff. Many professional bloggers these days say to forget about ads altogether. It’s a decision you need to make for yourself, but just be aware that displaying ads is not all benefit, there can be downsides.

Another way to generate revenue is to sign up for an affiliate program. Essentially, affiliate links send your readers off somewhere to buy something, and if they do, you get a cut. For example, if you write a lot about music on your site, you could set up affiliate links to recommended playlists or albums on iTunes, and get a cut of the sale if your readers make the purchase. Amazon has an affiliate program, and they sell everything from books to mp3s to kids clothing to RV parts. This has been recommended to me by lots of top, professional bloggers who, and remember these people have thousands of folks reading their stuff every day, make as much as $10,000 a month on these links.

The thing to remember is, if you do want to make any money from blogging, you must first focus on growing your audience. You do this by spreading the word about the amazingly fabulous stuff you write about. At least that’s the idea in a nutshell, there’s so much more to it, of course.

Is Anyone Even Reading My Blog?

At some point early in your blogging career you’ll notice that, aside from maybe your Aunt Ginger and best friend from high school, no one is commenting on your blog. How do you know who, how many and if any people are actually reading your stuff? Great news! You can get this info using your Google Account and available plugins on Wandrly.me.

Google Analytics: Who’s Visiting My Site

While you won’t be able to get the names and addresses of people viewing your site, what you can get are numbers on how many people visit your site, which pages they visit, how long they stick around, where they’re coming from, and what they’re clicking on while they’re on your site. Plus a whole lot more. It’s called Google Analytics, and to get started, go to Google.com/analytics

Click Sign in and then enter your password for your Google Account on the next page, then click Sign up on the page after that.

The next page has a few options, let’s review them:

Account Name can be anything you’d like, perhaps the name of your website.

Website’s URL. Choose http:// from the dropdown and then enter in the rest of your URL, something like yoursite.wandrly.me.

Time zone can be set, though as a traveler yours may change quite a bit. I usually set this to Mountain Time as that’s my girlfriend’s favorite.

Industry Category is probably “Travel” but you can choose whatever you’d like, if you think something else fits better with the contents of your blog.

Data Sharing Settings are up to you, I say if Google’s providing me this free service, I might as well allow them to use the data for their purposes as well.

Choose your country, tick the “Yes, I agree…” box and click Create Account.

On the next page, copy the Tracking ID, it will be something like UA-12345678-1.

Back in WordPress, go to the Plugins page. Find Google Analytics in the list and click Activate. Next, go to Settings > Google Analytics and paste that Tracking ID into the Web Property ID field, and then choose Yes from the Asynchronous Tracking dropdown.

You typically need to wait a day, but tomorrow check back in to Google.com/Analytics to see all of the data they can provide you on what’s happening with traffic on your site. We won’t go into everything that’s in Google Analytics, but suffice to say there’s a ton of info you can ascertain.

screenshot of Google Analytics interface
Google Analytics in Action

Feedburner: Who’s Reading My RSS Feed

Another cool tool from Google is called Feedburner. It allows you to see who’s reading your site’s RSS Feed. Let’s get it setup.

Go to Feedburner.com. Since you’re already logged into a Google Account, you’ll be automatically signed into Feedburner. In the Burn a feed right this instant. field, enter your URL followed by “/feed”. So the final result would look something like http://yoursite.wandrly.me/feed/ – that’s the URL of your site’s default RSS Feed.

Click Next. You can edit the Feed’s Title if you like, as well as the slug for your new RSS Feed URL, which will be something like http://feeds.feedburner.com/YourSiteTitle

Back in WordPress, again go to the Plugins page and Activate the Feedburner Converter plugin. Then go to Settings > Feedburner converter. We have several fields, but we only need to bother with the first.

Main feed RSS2: should be set to the URL you were given by Feedburner. Something like http://feeds.feedburner.com/YourSiteTitle

The other fields can be used if you want to setup Feedburner feeds for comments on your site or for the Atom format. These are not necessary, but feel free to work within Feedburner and determine if you want to do this for these other fields.

screenshot of Feedburner interface
Feedburner stats for a new blog

Getting Social: Automatically Publish Your Posts to Facebook

Okay, so now you know if people are reading, but what can you do to get more folks involved? Integrating your site with the big two social networks can help! Your site already has built in sharing buttons for Posts, including Facebook, Twitter and Google +. Those are the top players and in my opinion the only sharing buttons that should ever be on a site. Remember: less is more. The less options you have, the more likely someone will be to choose one of those options rather than get lost in the throes and just skip it altogether. Folks who love Pinterest or Buffer or whatever other social nets probably already have their own built in ways of sharing on those networks.

So lets look at a Plugin you have available to get your posts automatically updating Facebook. This is completely optional by the way.

First thing’s first, head over to the Plugins section of WordPress.

The Facebook Plugin

Let’s start with Facebook, as people just can’t seem to get enough of the world’s #1 website (literally, in terms of traffic, Facebook even outpaces Google as the premier destination via the Internets).

Find the plugin titled Facebook and click Activate You’ll be shown a message in red prompting you to configure the plugin. Don’t mind if we do.

Follow the instructions in Step 1 on the page that follows, which entails heading over to Facebook via the https://developers.facebook.com/apps link and setting up an app on their site. It’s not as difficult as it seems. Just login to Facebook (if you aren’t already), and click Go to App. You may be asked to enter your password again. This is completely kosher as this plugin is actually developed by the folks over at Facebook themselves.

Next click Edit App near the top right corner.

You can click the little icon to give your app an image. The following settings apply:

Display Name is whatever you want your “Facebook App” to be called, probably best to name it the same thing as your blog’s Title.
Namespace must be unique, in that no other App or page on Facebook can already have this. So you wouldn’t be able to choose “toyota” or “coke” but you might be able to choose “your-blog-title” or something like that. No spaces allowed.
Contact Email should be your email address.
App domains should simply be http://wandrly.me
Category is probably Travel, but you can choose whatever you’d like!

Next click Save Changes and head back to the WordPress Facebook Settings page. In Step 3, enter in the three fields worth of information, which can all be found back on the Facebook page you just completed.

screenshot of some typical settings in the Facebook App you'll create for your WordPress Facebook plugin
Have a gander at my settings if it gives you a helping hand!

After you save those changes, you’ll be given a few additional options. Social Publisher is the main one we want to work with here. Like Button isn’t necessary because the default theme with Wandrly.me comes with the Like button built in, but if you’re using a different theme, this could be useful. You can look through the rest of the options as well, but the primary one I recommend isn’t even on this page.

Once you’ve ticked the box next to Social Publisher, a Facebook window will open. Click the link to http://developers.facebook.com/apps and you’ll be taken to your app (or a list of apps if you’ve created others at some point, in which case click the new app you just created, but this is uncommon unless you’re an Internet tinkerer).

Click Edit Open Graph a little down the page and to the right.

In the People Can field, type in like or read, depending on which one you’d prefer they did. In the next field type in article.

On the next page, there are a plethora of options to choose from. Feel free to explore those, but you can just click Save Changes and Next if you just want to get started.

On the next page, you can change Name to Blog Post or anything else you’d like, but again, with all the options, you can simply click Save Changes and Next to continue.

The next page requires you to click in the Data to Display field and choose one of the options they give you. Either one will work.

Next click Link your Facebook account to your WordPress account to enable. and when prompted , click Login with Facebook then Allow. Click Save and Finish.

Head back to the WordPress Facebook settings page (it should still be open somewhere), and click Save Changes

Now go into the Post Editor (ie, Posts > Add New. You’ll now see a Facebook Status on Your Timeline option near the bottom of the page, as well as a couple of boxes in the right column. Get wild, go nuts, this is your time to experiment with how your new Facebook plugin shines!

Getting Your Own Domain Name

Perhaps a URL like http://yoursite.wandrly.me doesn’t appeal to you. Yes, it’s free, but you may be willing to pay a domain name registrar a few bucks a year to get something like myawesometravelsite.com. This is completely doable, even using Wand’rly.me, and saves you the cash required for buying your own hosting account and the hassle of setting up and maintaining your own WordPress installation.

It is not, however, an automated process. If you’re using Wand’rly.me and would like us to setup a custom domain name for you, just follow these simple instructions.

But What if I Want to Host My Own Hosting Account?

First things first, just because you start your site here on Wandrly.me, doesn’t mean you’re stuck with us forever. We believe in something called data liberation, which means that the content you add to your site is 100% yours. Forever, and always. We don’t claim copyright or any other nonsense over your posts, your images, or any tweaks you make to the default Wandrling theme. We’ll review how to get your data out of Wandrly.me in a moment, but first let’s review how to setup a WordPress site on your own server.

If you’ve elected to purchase a MediaTemple Grid Service hosting account for yourself, setting up your own WordPress site is a simple task. Just login to your new hosting service and click your primary domain name.

You’ll be taken to a page called GridService Control Panel. Find the 1-Click Applications link. On the following page click Add New Application and then choose WordPress from the list.

A few things need configured on the next page:

Application URL should be your primary domain name (which you set up when buying your MediaTemple hosting). In their example, they use http://blog.primarydomain.com, but exclude the “blog.” if you want your new WordPress site right at the root of your website.

Give your database a name in the field for Database configuration. Something like wordpress is fine.

For Database table prefix:, leave it set to wp_.

Click Install and you’ll be on your way. MediaTemple will give you the rest of what you need to get into your new WordPress site. You’re all set for self-hosting!

But What About My Content? And I don’t like this theme?

Okay so we said we were all about data liberation, right? So here’s how to get your content out of Wandrly.me and into your new WordPress site.

First, log in to your Wandrly.me blog. Go to Tools and then Export. Make sure All Content is selected, and click Download Export File.

Now head into your new, self-hosted site, and again go to Tools and then this time Import. Choose WordPress from the list there. You’ll be asked to install a plugin. Install it and then click Activate Plugin & Run Importer.

Choose the file from your harddrive (the one you just exported from Wandrly.me) and click Upload File and Import. Your Posts, Pages and Feedbacks have all been imported into your new site!

Nearly Wrapping Up

We’ve covered just about everything you’ll need to know on the “how” part of getting yourself setup with a free travel blog. The “why” is up to you, that is, you’ll need to know if blogging is something you enjoy and can find the time to do, but I’ve found that the more I do it, the more I love doing it. It’s a creative outlet, a way to improve your writing skills, and a great communication tool. Plus, I’ve met as many fellow travelers through blogging as I have in real life, some of which went on to become real world acquaintances who I cherish deeply.

Can I Tweak My Site’s Colors and Layout?

This handbook is not about to dive into how to code your own theme or details on how HTML and PHP work. However, WordPress has a nifty built-in feature that will allow you to change how some parts of your site look, and I’ll give you a basic walk through here, followed by some great resources if you want to take things even further.

Please note, none of the following is necessary to start using your new website. Go in and dabble and write a few posts and upload some pictures and tell all your friends. But if you decide to change things up a bit, dig even deeper, well this next bit’s for you.

Go to Appearances and then Edit CSS. CSS stands for Cascading Stylesheets, which is the portion of the code which controls most of how your site looks. Some default text will be present in the large text box on this screen. Feel free to delete it.

Dabbling in CSS

Firstly, let’s change the background color of the site.

In the text box, enter the code below:

body {background:blue;}

Click Save Stylesheet and view your site. The background is now blue.

Now let’s change the color of the font. Working with that same code, edit it so it reads as follows:

body {background:blue; color:red; font-family:Arial;}

Save and view the site again. You’ll now see much of the text on the site is now red, and your font is now the ugly Arial. Let’s look at what we’ve done above, and then take a gander at how you can figure out more things to change.

Firstly, WordPress will automatically reconfigure your code to make it easier to read. In that CSS code editor, you’ll now see:

body {
background:blue;
color:red;
font-family:Arial;
}

The body bit there represents the HTML element that you want to modify by it’s tag. Every HTML document should have a body tag, which could be thought of as the actual piece of paper itself, if we were comparing a webpage to traditional paper document. It is everything the user can see on the page. We’re getting into some new terminology here, so note the following:

Seems complicated but really it’s not once you get the swing of things. Basically, two tags with some content between them make up an element. The tags are like the ceiling and floor of a room, and the content in between can be thought of us all of the furniture and contents of the room. The element, that is, the ceiling, floor and all of its contents, are the actual “room” itself. The attributes applied to the tags denote whether the furniture in the house should be a certain color, all moved up against a wall, and all of the other things we can do to manipulate content in an HTML element.

There are a ton of HTML tags. You can view all of them associated with your site by (on most browsers) right clicking the page you’re working with on the front end of your site and selecting “View Source” or “View Page Source”, depending on your browser. You’ll be shown a new tab or window that lists out all of the page’s actual HTML code. We’ll look at an easier way of doing this in a moment, but for now, note that the properties we’re about to discuss are, in this case, being applied to the body tag as that’s what we’ve written with the code above.

The two most important attributes we need to be concerned with when working with CSS are id and class. We’ll get into those more in a moment.

The other three elements, in our code example above, (not counting the “{” and “}” brackets) are properties. Similar to the HTML properties we defined above, CSS has properties which are made up of two parts as well. In our example, our first property has an attribute of background, which has a value of blue. These properties allow us to define how that particular element will be displayed, from layout to typography to some really cool and advanced stuff. Note that since we’re defining the body element’s properties, and we’re working with Cascading Stylesheets, that means that some of what we define for the body element will transfer down to elements below it (or inside of it, depending on how you look at it).

So we’ve set the body’s background to blue, the color to red (color in CSS specifically refers to text elements) and the font to Arial.

Now let’s say we wanted to change the color of most of the links on our site to black. Try this code out:

#copy a {color:black;}

Save and view the site. You’ll see that links like “Read this →” and “No Comments” are now black. What we’ve done is used the #copy to say “every a element on the site in the area defined as copy will now be black”. Remember from above that a tags are how we define anchors, better known as links on the web.

Look back at that View Source code we opened up earlier. Do a search on the page or just scroll through until you find some code that reads id="copy". That’s where I defined that #copy bit of code when building this theme, The “id” part says “this tag will have a unique name that no other tag has,” and then we define it as “copy” immediately after. Along with IDs, there are also classes. IDs are only supposed to be used once per web page, but classes can be used multiple times, so you can assign the same properties to multiple items.

Let’s try one more thing, let’s say we want our main site title to be “burnt sienna”, my favorite Crayola color name from childhood. Not every color available to us has a name, nor do we need to know a color’s name to use it. We can use what are called HEX values. The Hex value for “burnt sienna”, in my opinion, would be #FF1CAE. Here’s the code to make all of this happen:

#h h1 a {color:#A0522F;}

Firstly, we’ve said “Find the HTML tag named ‘h’, and then find any H1 (Heading 1) tags therein, and then find any “a” tags inside of that. Then, set the color to #A0522F.” Save the CSS and view the front end, your heading is now a deep brown.

Now go back into the CSS Editor and just delete everything in that box, then save again. You’ll notice all of your customizations have been removed. So, you never really need to worry about breaking anything here, or making anything ugly, because you can always very simply revert to the original theme by removing your customizations, either one at a time while you troubleshoot, or all of them at once to get back to the good looking theme you began with.

Taking it Even Further

Now I’ll show you how you can find all CSS related to a specific element on your site. So say you want to change just the background color of the Newsletter Signup box that we’d created as a Widget, how do you know what the name of that HTML tag is and what can you do to change it?

First, you’ll want to be using a modern web browser that has the ability to Inspect Elements. Most of them do, but I highly recommending using Google Chrome (you can download it for free, just go to Google and search for Chrome). It’s got a ton of great features and is the primary browser we use and recommend here at Wand’rly.

Once you’ve got Chrome installed, up and running, and you’re viewing your website, try the following.

  1. Hover your mouse over the element you want to edit. In this case, we want to edit the background color of our Newsletter Signup form.
  2. Right click on the orange space between the “email address” field and the “Let’s Do This!” black button.
  3. A new window will appear, or your current browser window will have split into two sections, the one showing your website and the new area. You’ve now opened the Inspector.

The Inspector allows us to view our page’s source, as we covered above, but instead of just showing us the entire source, it’ll help us find specific elements on the page. Let’s look at the basics of the Inspector.

There’s a menu bar. For our purposes we’ll always want to keep the Elements tab selected, which it is by default. There’s our code listed out in the window on the left, with the particular item we’re viewing at the moment highlighted in blue, and the window on the right shows us any CSS associated with that element. You can click around in the HTML pane to change the CSS that’s displayed on the right. For now though, let’s focus on our Newsletter Signup box.

When you originally clicked on the orange space as mentioned above and opened up the Inspector, the following code was highlighted in blue:

<form action="http://wandrlymagazine.us4.list-manage1.com/subscribe/post?u=7a757f4226a2b4a6c8bef29de&id=2ad5ef98a1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">

There’s a lot there, much of which we covered when first adding the form to your site, but as a quick recap, the <form is our tag which begins a Form element (that is, functionality on a website that allows us to submit data to the server or in some other way). Everything else there is an attribute of this form element. If you scroll up and down in the CSS window though, you’ll not see any information related to the background color of the form. That’s because the form is nested within a larger HTML element. Just like text can make up the content of an HTML element, it can also have one or more other elements as its content.

So back in the HTML pane, you’ll see a bunch of little arrows, some pointing down, some pointing right. These are indicators the Inspector displays to show us which elements have other elements or content nested within them. You’ll also note that the <form> element we’re working with is indented below a <div> element. That’s another indicator that the form is nested inside of the div. Note that a div is simply a container we can use for many purposes, most of which are for dividing off certain areas so we can apply styles to them. If we want to get to the element which has the orange background, we have to keep moving up the hierarchy. Note this entire block of code:

<section class="widget" id="text-3">
<h1>Newsletter Signup</h1>
<div class="textwidget">
<div id="mc_embed_signup">
<form action="http://wandrlymagazine.us4.list-manage1.com/subscribe/post?u=7a757f4226a2b4a6c8bef29de&id=2ad5ef98a1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">...</form>
</div>
</div>
</section>

I know, there’s a lot there. Let’s break it down to something easy to understand though. What we have here is a form that lives inside of a div that lives inside of another div that lives inside of a section. We haven’t discussed section elements, but essentially they’re blocks of code on a page which are, you guessed it, sections. They could be part of a larger article or live on their own. We won’t get into the nitty gritty details of how and where each type of element should be used, but that’s a loose primer.

Click on the line of code in the HTML pane for the section, ie <section class="widget" id="text-3"> It has a class of “widget” and an ID of “text-3”. These are both setup automatically when you created the Widget way back in the earlier throes of this handbook. Look over in the CSS pane now. You may need to scroll up to the top of the pane, but you should eventually see code like this:

.widget:first-child {
box-shadow: inset 0 0 2px white;
background: #EB6038;
padding: 10px;
border-radius: 5px;
border: 1px solid #BB350F;
color: white;
}

That’s the CSS that’s applied to this section. Let’s review it, but first, a bit more on IDs and classes. In CSS, an ID is denoted by a # (pound / hash) symbol. Anytime you see #something the CSS is essentially saying “find the element with the ID of ‘something'” and apply the following properties to it. Whenever you see a . (period) you know the CSS is talking about a class. If there is neither a # or . then we’re simply referring to an element in the CSS.

.widget:first-child is the bit of code that says “find any element with a class of ‘widget’, and apply the following code”. Except that we have that :first-child bit there. That’s what’s called a pseudo-selector, and we’re not going to get into those too deeply other than to say that in this case we’re actually saying “find any element that is the first nested element of another element, that also has a class of ‘widget’, and apply the following code”.

box-shadow: inset 0 0 2px white; is a way of adding shadows, such as dropshadows or glows, for those familiar with such decorative techniques, to elements. Here we’ve said “add a shadow to the inside (inset) of this element, move it 0 pixels to the right, 0 pixels down, make it 2px thick and color it white.” Essentially, it adds the thin white inner glow on the orange box itself. You can click right on the value in the CSS pane and adjust any of these. Try changing 2px to 30px to see the difference.

background: #EB6038; is where we’ve defined our background color. Again, most colors are defined via their HEX value vs. simply typing in words like “blue”, “red” or “white”. You can click right on the orange swatch in the CSS pane (the little orange square) to bring up a color picker. Change this background to blue, either by selecting a blue via the color picker, or by simply typing over the #EB6038 code with the word blue.

padding: 10px; defines how much space should be between the edges of this element, and everything inside of it (such as the text, the “email address” field and the button itself.

border-radius: 5px; tells the element to have rounded corners. You can play with this number to watch the curves on the element’s corners grow or shrink.

border: 1px solid #BB350F; is saying “give this element a border that is 1px thick, solid (as opposed to dotted, dashed or a few other options) and has the color of #BB350F (a dark orange).”

color: white; tells the element to make all text inside of it the color white. But some text isn’t white? That’s because we’ve defined it differently at it’s actual level, we’ll discuss that in a moment.

Making changes here in the Inspector are not permanent though, they simply allow us to play with things right in the browser. To apply the changes, we need to select all of that code in the Inspector, go back into our CSS editor in WordPress, and paste it into the box there. Save the changes and view the site, you’ll now see your Newsletter Signup box is blue. (Note that sometimes you may need to refresh the page twice before seeing the changes, this is simply because sometimes browsers store this information so the page will load more quickly each time.)

But that makes the “subscribe to our mailing list” (or whatever text you used) copy difficult to read, because even though we said “make all of the text in this element white”, the site also has CSS that specifically states that text should be the dark gray color. Let’s edit this.

Move your cursor over the text itself, right click, and choose Inspect Element. The Inspector is now focused on this particular element, which is a <label> element. In the CSS pane we see:

#mc_embed_signup label {
color: #474747;
}

What that says is “find an element with an ID of mc_embed_signup, and then find a label element inside of that, then apply these rules to the label element itself”. We then set the color to #474747, which is a dark grey. Change this value to white, and the text will pop a little better. Remember, you need to copy the code and paste it into the CSS Editor in WordPress, then save before viewing the site.

Using this technique, and with some research on your own time, you should be able to modify any element on the site to your liking, and always have the option to delete all customizations and go back to the original theme if you end up with a site that looks like it Terminatored into our time from a 90’s future.

If you’ve made it this far, you are a trooper indeed, aren’t you? You’ve actually just taken a crash course in WordPress Theming 101. Keep at it, if you end up getting really good with this stuff, you could even make a few bucks from it. Happy blogging!end of article