WordPress Tutorial

At Voicecom, we primarily use WordPress as a platform for our website development. We highly recommend it to our clients for their websites and blogs. Recently we had a client who wanted to update her publisher site to something she could make changes to – simply and quickly. There are endless tutorials on the net about wordpress, how-tos on installation, moving hosts, backing up, SEO integration, e-commerce, the list goes on and on as the product is very powerful.

When you have worked with WordPress for a while you get to know the nuts and bolts pretty well but trying to explain the basics to a client or an associate can be quite difficult, especially if they have no prior web experience, so a person wanting a website would need to know the basics like:

  • How to set up a host – the host is a computer that your website is installed on
  • How to set up a domain name – the domain name is usually the web address of your site, www.mysite.com
  • How to set up redirects for mail and DNS – you may have email accounts as part of your domain so john who works at mysite may have the email address john@mysite.com. He may also have other email addresses that you want redirected to your new domain, for instance if John had a john@somewhereelse.com email address then he could redirect that to the new domain. DNS is the mechanism for computers to find each other on the internet by name
  • How to publish your website to the host – a method of file transfer
  • How to access and maintain your website – an administration panel
  • How to get the best value from your website

We organise and implement all of the above for our clients as part of establishing their web presence. We also provide basic training for clients to maintain their own sites.

WordPress Basics Introduction: Getting Started

One of the best examples of WordPress basics was the following sourced from The Site Bakery by Ben Whitaker

Getting Started with WordPress can be fun and empowering, but for some it can be overwhelming at the same time. This post is for the benefit of companies and individuals who are not programmers. They haven’t “installed” WordPress. In fact, WordPress is likely a brand new name. If you are reading this you are likely going off of the expertise of someone else (it could even be me) just hoping that this new CMS wonder tool is as easy as you’ve been told. You don’t know what HTML is, nor do you really even care. You just know that you need a website, you need content on it, and that this WordPress thing is supposed to help you get there. My hope is that this small series will help beginners get comfortable with WordPress and that they can make it a fun part of their business rather than see it as the neglected chore that is always the last on a long list of things to do.

The WordPress Basics Introduction series is created in reference to version 3.1. This first post will cover the basics for the logging in and also provide an introduction to the administrative panel. We also included some entry terminology and definition of the layout you will find once you successfully get into the WordPress administrative panel. You might be interested to read some of the documentation by WordPress here for beginners as well.

Logging Into WordPress

WordPress Log In PanelSo you have your brand new website setup and you are itching to add some content (or at least make some much needed modifications that the first person you’ve shown the site to has just conveniently pointed out). To manage your website you will need to login to the administrative panel. To do so there are two potential url locations (be sure to change yourdomain.com to your domain name):

  • www.yourdomain.com/wp-admin
  • www.yourdomain.com/wp-login

At this point you should see the login screen and, hopefully, you have a username and password as well. If not, it is time to talk to the site administrator or the person who setup the website to get access to the Administrative Panel.

Introducing the Administrative Panel

Now that you are logged into the Administrative Panel, you will notice some key areas to take note of. The top of the page contains the header. Within the left side of the header resides the name of your website/blog which will link to your main page. The right side of the header will display your username as well as the “Log Out” link.

On the far left of the screen you will see a menu and, if you are logged in as an administrator, it might feel like there are way too many items. As someone just getting familiar with WordPress, you would be correct. As a rookie in the WordPress arena, you just need to worry about a few of the menu items.

Usually those items are Posts, Pages and Media. We’ll go more into detail about that later.

Some Important Notes about the Menu

On the left side of your screen lives the main navigation menu. It is important to note though that the main navigation menu has some interactivity to it that is good to know about.

First of all, the menu can collapse. At the top of the menu under “Dashboard”, you’ll notice a fun little left pointing arrow icon. Clicking that arrow will collapse the entire menu to just show icons. A helpful trick if you want more room on your screen. A real pain if you’re new and don’t know what the icons stand for (especially if you clicked it by accident and don’t realize what happened). But not to worry, clicking the arrow again will expand the menu, restoring peace and order to the soul of an inexperienced blogger.

Secondly, each menu item can also expand and collapse revealing a whole new set of options – bringing solution or confusion depending on the item and what lies within. As a beginner, you don’t need to worry yourself over every option that vies for a piece of your attention. Simply click the little arrow to collapse the menu and free up some of the much demanded focus. Your content needs you more.

That should be plenty for you to at least understand how the menu works.

Discover The Dashboard

Next we will be taking a look at the Dashboard, which simply gives you an overview of the information that is most likely the most important. The “Right Now” section is the first that will come up. It will show you the number of posts, pages, categories and tags that currently exist on your site. Beneath the Discussion area you will see an overview on Comments showing you how many approved comments you have. You will also notice a display for Pending comments as well as Spam.

Now, there are definitely more items on the Dashboard, but remember we’re worried about the basics. The other items will become clearer as you go along and we’ll have posts to help you advance through it. Now that you have this down, take a short breather.

Some Important Terms

  • Content Management System (CMS): CMS is one of those catchy acronyms you’ve probably heard your web developer throw at you in every other sentence. Once you know that CMS stands for Content Management System, you’ve probably figured it out. Yep, you’ve got it - a system for managing content.
  • WordPress: WordPress is one of many Content Management Systems around and has proven itself to be one of the easier to use and effective for informational and blogging websites.
  • Administrative Panel: The Administrative Panel is the area that you have access to after logging in. It acts as a control center for your entire website. Click here for an in-depth explanation.
  • Main Navigation Menu: This is the primary navigation menu found in the Adminstrative Panel.
  • Dashboard: Also referred to as Information Central. The Dashboard provides you with some basic information about your site as well as some links to facilitate jumping in and working with Posts, Pages and Comments. You’ll also find some quick editing tools for quickly adding a post or managing comments.
  • Administrator: An Administrator is the highest role that a user can have in WordPress. As such, the adminstrator has full access to what WordPress has to offer in the Administrative Panel.

The Difference between Posts and Pages

Posts and Pages sections in the DashboardI often hear the question “What is the difference between Posts and Pages in WordPress?”. The intent of this post is to explain the difference, and assist in understanding when to post it or page it.

You can see a more technical explanation about the differences between Posts and Pages here from WordPress.

Really when it comes down to it, there isn’t a whole lot of difference between a post and a page in WordPress. The process for creating and editing is practically identical. The short of it is – it depends on how the content is used and not so much what the content is.

A good example of a page would be the About Us page that is pretty typical throughout the webbing world. Chances are that the information on that page is important, you will always want your visitors to find it easily, but not really make any comments on it. You may also want the About Us page to be part of your main navigation. So in the end it’s a no-brainer. For the provided reasons it qualifies as a Page.

On the other hand a blog post may not have critical information that needs to be easily accessible from the main navigation of the site. It will be information that is dated, or educational, something that you would like to generate conversation on. Often blog posts are displayed to web visitors in a series or reverse chronological order. When working with a blog post you will also have elements such as categories and tags to worry about. At the end of the day, posts are what help you share your expertise, experience and news with the world to incite feedback from your visitors.

Page Attributes

It would be a good idea to at least familiarize yourself with the various page properties that you may run across as you work. Here is a list of a few that you may not be aware of when you first jump into it.

  • Status: This is an important property. Your visitors basically won’t see your page until its been published or the status has been set to publish. This is nice if you need to work on a page for a few days. Simply make sure that the status is set to Draft or Pending Review and your creation will be kept from public eye until you’re ready.
  • Visibility: The posts and pages you create a set as Public by default. Editing this property will allow you the option of making the page password protected, allowing you to create a password without which a viewer will not be able to access the page content. You are also able to make the page Private, which will render the content unviewable to normal viewers. 
  • Date: I am taking a shot in the dark and guessing that you have a good idea what the date is for. I make mention of it, because it’s good to note that you can change the date and that if you set the date for a future day and time that it will remain unpublished until that time is reached. I know… it’s cool.
  • Parent: Grouping pages can be extremely useful. Using the Parent attribute is how it’s done. Let’s say that you want to group pages based on department contacts for your company. We would first create the page,“Contacts”. Then we would create a page for “Billing”,“Sales” and “Slackers” with the Parent attribute set to “Contacts”.
  • Template: This can be a tricky item for some. The template is what determines the layout for a given page. The templates themselves will vary dependent on the theme (I know we haven’t covered themes, but chances are for the basics you’re okay wrangling that one later). Typically, you’ll be able to select between a default template and a full screen template.
  • Order: Some navigation, or page lists, will reference this property and order the pages accordingly by number.
  • Featured Image: Clicking on Set Featured Image will allow you to upload an image that you want to accociate with your page or post. A thumbnail version of this image will appear along with the title, date and excerpt of the page or post in any search results or cateogry listing the page or post may appear in. We would suggest that you strive to do this if you are able as it makes for a more visually interesting website. 
 
  • Discussion: With every page and post you create, you have the ability to allow visitors to leave comments. While your website may be set up to allow or disallow comments by default, either way you still have the option to turn them off and on by page. Simply ensure the fields here are checked it you want to allow people to leave comments and trackbacks, and unchecked to disallow.
  • Comments: This feature displays the most recent comments that people have left on the post or page you are currently viewing.
  • Slug: If you’re like me you’re thinking of a slimy snail with no shell. However, in this case the slug is actually the word(s) used to create a user friendly URL. For example, if the slug for my page was “snail”, the URL that I would send my visitors to would be http://www.yourdomain.com/snail.
  • Author: If you want to have more than one registered user on your site who are able to create and edit pages and posts, you are able to set each page as belonging to one of your users. You may or may not have a use for this function. If not, don’t worry about it.
  • Revisions:  In the event that you have managed to delete important content or just had a mishap while editing the page that you don’t seem to be able to fix, you are able to turn your page or post back to a previous saved date. WordPress automatically backs up your content each time you update your page, which is a very useful and lifesaving aspect of the software.

If all or some of the above attributes do not display, you may simply need to edit what you actually want the page to display. At the top right hand side of any given screen within the Dashboard, you will find a tab called “Screen Options”. Clicking on this will show a dropdown of all the options available for you to view. Simply tick everything you want to view, as in the image below, and you’re golden.

Current Pages – Pages List View

Typically you will be able to direct yourself to the Pages list by using the Pages section in the main navigation menu on the left. You may shortcut to this list from the Dashboard as well. Once in the Pages view you will see a list of the existing pages.

You can of course click on a page name and you will be taken directly to the Edit Page view. Or, you can have some fun with a little WordPress dazzle. Move your mouse over the name of one of the pages and, Voila!

You now have some convenient options that you can execute on the page – without having to leave the current view. You should notice the following options appear: Edit, Quick Edit, Trash and View.

  • Edit: The Edit link will take you straight to full Page Editor view where you can change all aspects of your Page.
  • Quick Edit: The Quick Edit link will keep you on the same view and will allow you to change the primary attributes of your Page. The Quick Edit is handy if you just have a few small things to change such as the Title or Status of the Page. The following are available: Title, Slug, Date, Password, Parent, Order, Template, Allow Comments and Status.
  • Trash: Clicking this fine link will remove the page from your list but will not permanently delete it. If needed, you can retrieve an item that has been trashed by clicking the Trash link that will be seen above the Page list after items have been placed in the Trash
  • View: The View link will direct you to the page on the website itself. This allows you to check out your masterpiece and make sure it looks as nice you had hoped.

Creating and Editing Pages

  • Add New Page: You can add a new page by clicking the “Add New” link under the Pages section in the main navigational menu,or by clicking the “Add New” button at the top of the Pages page. Once you’re there,the view is almost identical to “Editing the Page”. The difference being that the fields are blank and the button in the Publish section says “Publish” instead of “Update”.
  • Welcome to the Add/Edit Page: Once you are in the Add/Edit Page view there can be a lot going on. Again, since you’re just getting your feet wet we’re only going to cover the essentials for now. I’m also not going to cover images in this section, but will address it in a later post in the series.
  • The Title: The first area is for the Title of your Page, and it conveniently says “Enter Title Here” inside the input field. Don’t overlook the importance of this one field. It needs to be short and sweet. Not only does it give your visitors some intuitive insight to what this page is about, but is also looked at by the search engines. Keep it relevant to the content of the page or post you are creating.
  • The Content: Under the title you’ll see a text editor. This is for the meat of your page and where all that great content you’ve had rolling around in your head is waiting to be placed. Granted,the interface is simple, but did you want something complex? There are a few buttons that are overlooked on the toolbar.
  • Link and Unlink: These are handy tools for easily adding links to your text and images. Just highlight the text where you would like your link, and press the “Link” icon.
  • The Kitchen Sink: Thus button expands the toolbar to reveal some other options for editing the text.
  • Full Screen: This crafty little button will expand your text editing screen to full screen. Very useful when you have a lot of editing to take care of and want more than a 2 inch space to work in. To exit full screen,simply click the icon again.
  • Paste From Word: I don’t recommend that you use Microsoft Word to draft your content. It gets messy trying to get the special characters that MS Word uses cleared out without butchering formatting, etc. If you must, use this tool as it usually does a pretty good job of cleaning things up. And yes… you will have to reapply any formatting changes.

The other icons in the text editor toolbar should be pretty self-explanatory.

Saving and Publishing

We’ve covered the attributes of the page earlier. The Publish and Page Attributes sections will be to your right. Just remember that your page is not “live” or visible to your visitors until you publish. It’s about this point that you should have some confidence in moving forward and creating pages of great worth (well, pages with words on them anyway).

Working with Blog Posts

You’ve made it through working with pages and are now ready for Posts. I think you’ll find that this part will be easy. Working with posts is pretty much the same as working with pages; with a couple differences to take into consideration. These differences are: Categories and Tags.

To start off, you can click on Posts in the main navigation menu and you will see a list of your posts similar to the Page view. You will also find the Quick Edit link with the appropriate variations to the options reflecting Categories and Tags. And of course, clicking the title of the post or the Edit link will take you to the Edit Post view.

Categories

Instead of grouping your content using a hierarchy of parent pages, you group blog posts together by using categories. The categories make it very easy to group your content and give your visitors some conformity in navigating the content on your website.

You can set one or more categories for a single post. On the right you will see a section for Categories. All you do there is check next to the categories that you would like to associate with the post. If a new category is needed, just click on the “+ Add New Category” link located at the bottom of the section and you will be able to type in a name for the new category and even set a parent category.

There is also a Categories section of the administrative panel to work more with categories. The link to this is found under Posts in the main navigational menu.

Tags

It seems that at this point the word tag has been thrown around quite a bit and though good folks are familiar with the word,they lack the knowledge of how to put it into practice. First of all, tags are by no means required. You can post all day long and not have to worry about adding a single tag and your visitors will be able to still use the site. However, there are some benefits to taking some extra time to add a few important words or phrases to the tag section of your post

If you look at categories as a means of broadly classifying your content, you can look at tags as a way to zero in on specific and important keywords that are contained inside the content itself. Tags can be referenced as micro-categories. For example; a website may have a category named “Fast Food” that contains a numerous amount of posts. One post may be or even contain key phrases such as “McDonald’s” or “french fries”. “McDonald’s” and “french fries” would be good words to add as tags. This will allow internal and external sites have an inside look into what is important about the content of a particular post. Depending on your layout,you may even have a tag menu or tag cloud incorporated into the site navigation,allowing your visitors to jump straight to popular or important topics in your site.

Adding the tag itself is a piece of cake. You type in the word and click the Add button. If you want to add multiple tags at once all you need is a comma between each tag. Once a tag is added you will see the tag under the “Add New Tag” field with an (x) next to it. Of course clicking the (x) icon will remove the tag. There is also a helpful link “Choose from the most used tags”,which will show you the tags that have been used throughout the website. Simply select the tag you wish to associate with the current post you are working on,and it will be added to your list.

Here is a good article on the importance of tags and gets past the basic introduction and more into using tags for search engine optimization.

So, Why Blog?

By now it is likely that you have heard of blogging and even have an idea of what it’s all about. However, it is not uncommon that some individuals may not really grasp the reasons for blogging. Many people still think that it’s basically for the web nerds that want to share what they had for breakfast. On the contrary, blogging opens the windows to provide real reasons for people to get to know you and, in many cases, do business with your company. The reality is that actively blogging can bring a host of benefits.

  • It’s a chance to show people that you know what you are talking about
  • The search engines love that content
  • It gives people a chance to interact with you
  • Provides you with content to post on Social Media sites such as Facebook and Twitter
  • Creates more entry points into your site

Do I Have to Blog?

With all that being said, you may still not be ready for the blogging arena. It takes some regular time and effort. It needs to be a priority in order to make it happen. Blogging isn’t going to bring instant traffic and clients banging on your door the next day. The process will take some time to cultivate and bear fruit. So, rather than start a blog section on your site with one or two posts that sit helplessly alone for the next few years,worry about the content on your Pages. Take the time to make sure that they are well thought through and convey the message that you want. It’s better to have a finished website than an unattended blog.

And, for those of you that are ready to tackle this beast full on, start brainstorming and let people know about what it is your business is all about.

Moving On

Now that you have one more skillset under your belt we’ll take you to the final article in our Getting Started series for WordPress. We’ll get into the basics of working with images, so that you can add a little pizazz to the black and white text on your pages and posts.

Now we’re going to move on to adding a little sizzle to your content with some imagery. As with the other posts in this series,we’re just covering the basics,and there are some items that we don’t cover. There are quite a few different ways to work with media in WordPress. In this post,we’ll introduce the Media Library as well as the “Add an Image” tool in the editors.

The Media Library

In the main navigation menu you will find the Media menu item. Expanding the menu item will reveal the options Library and Add New. Let’s start by taking a look at the library itself. Go ahead… click it.

Add New Media

Before we get into working with images,let’s first take a look at getting images into WordPress. Click Add New in the Media menu and you’ll be transported to the Upload New Media view. Here it’s pretty simple. Click the Select File button and you’ll be able to navigate to the files of your choice. You can upload files other than images. For the sake of simplicity,we’ll stick with images. You can also select multiple files at once,and the uploader will begin the sequence of uploading the images one at a time. Once the image is complete it will show an Edit Image view. If you’ve uploaded multiple images you will see a Show link to the right. Clicking it will expand into an Edit view,which you can collapse by clicking the now viewable Hide link. If you’re bored at this point,feel free to alternate clicking the Show and Hide link several times.

Edit Media

Within the realm of Edit Media resides the current information on the image, and you can change a few things on the image here;such as the title, alternate text,the caption,description and location of the file or the file URL. You will also see a button under the thumbnail that reads “Edit Image”. At this point the thought,“Aren’t we already editing the image?”, may be scurrying through your mind. If is, you are right,but there is more. If you venture to click the Edit Image button you’ll see what I mean. The thumbnail is automagically(you bet its a word!) replaced with a mini image editor where you can crop, rotate and even flip the image. You are also empowered with the ability to apply the changes to all image sizes, just the thumbnail,or all sizes but the thumbnail. Cropping can be a bit tricky and the (help) link can be helpful. For the most part make sure that you click and drag to highlight the area that you want to crop first.

The Library List

This should resonate a little Déjà vu. The list itself is very similar to the list for pages and posts. Mousing over a list item will present the following options as well: Edit,Delete Permanently and View. From the list you can venture off further into the image. View will take you to an image view from your website and Delete Permanently will… well, you know, delete the image. Clicking the thumbnail, the file name, or the Edit link will take you to the basic Edit Media Screen. Don’t forget to click save when you’re done.

Adding an Image

We have some of the basics of how to get images into WordPress, now let’s see how you use it. Go ahead and start a new post. Above the editor you’ll notice “Upload/Insert” with four icons to the right of it. The first icon is the Add an Image icon. Click the Add an Image icon.

There are four main sections in the Add an Image window (however since this tutorial is aimed at beginners, at this point don’t panic if only three options are available).

  • From Computer: This should be the section that is highlighted by default and basically is a repeat of the Add New Media. Also, any images that are uploaded here are added to the Gallery and the Media Library.
  • From URL: This will allow you to grab a URL for an image on the web and plug it into your post. Be careful of copyright infringement on this one. Just because an image is on someone else’s website doesn’t mean you have the right to put it on yours. Also,be careful about the stability of the URL. If the source for that image changes, then you suddenly lose that pretty picture you just placed on your post.
  • Gallery: You will only see this section if you have uploaded an image to this post or inserted an image from the Media Library to this post. In essence,it shows a list of images that have been attached to this post.
  • Media Library: This shows the list of images that are in the Media library. Since you’ve mastered the Media Library or at least read up on it a bit, you will be able to manage this section without a problem.

So how do I get the picture in the post?

From any of the lists that are available in the above mentioned sections you can click on the Show link next to the image you wish to place in the post. This will take you to the Edit Image view with a few extra options at the bottom of the image info area.

The Link URL is an important item to note. This determines if anything happens when your visitors clicks on the image. You can click None which clears the Link URL and essentially means nothing will happen when the image is clicked upon.

The File URL will take the user to the image file itself and the Post Url will take the user to the image view section, basically placing the image in a post like setting. It’s not a bad idea to experiment with these so that you have a good idea what each link option will do for you. You can also place your own URL as well taking the user to any website you so desire.

Notice the Alignment and Size options as well. Alignment will assign an alignment property for the image and effects how where the image is placed on the page and how the adjacent text flows with the image. The Size option will determine how large of a file to stick into the post (These default sizes can be adjusted under Settings > Media in the main navigation menu).

Featured Images are a neat and fairly recent addition to WordPress. If your theme supports a featured image it will place the set image in a predetermined location and size. This can make life a little easier and your website a little more uniform. If your theme doesn’t include a home for a featured image than you don’t need to worry about it.

The Delete link is a seemingly obvious option here, but alas, expect the unexpected. Clicking the Delete link will show a text confirmation that appears below the Delete link rather than a pop-up asking with the big OK / Cancel options. No worries though, for you are now prepared to handle this elusive change. And no, I didn’t beat my head for 3 minutes trying to figure out why my image wasn’t deleting… it was 2 minutes. Consider yourself 2 minutes richer. You’re welcome.

Finally, we get to the Insert Into Post button lingering at the bottom. Your options are set and your link is entered. Click the Insert Into Post button and see the fruits of your labor. Good job, take a 5 minute break and enjoy your victory.

Pages on the other hand can get tricky with images… oh wait, it handles the same. You should be good to go there as well.