What is WordPress?

WordPress is a free and open source Content Management System (CMS). It started in 2003 during the explosion of blogging on the web, providing a simple, yet powerful interface to manage and create a website without extensive technical knowledge or coding abilities. The software was originally focused on creating blogs, but has developed into a fully functional CMS that can produce many genres of web sites. Under the hood, WordPress is basically a PHP web application that interacts with a MySQL database that stores all the information about your web site. Luckily, you don’t need to know anything about that! The appeal of WordPress is that it is simple to install, maintain, and use.

The ease of use combined with the power of the system has proved extremely popular: more than 25% of the top 10 million web sites today are run on WordPress (it might actually be higher, since almost 60% of sites where the CMS is positively known use it! See trends). It is much more than blogging software. Users include single individuals and huge companies; from tiny blogs, to single page apps, to giant organizational websites.

Examples

Take a look at some examples in the WordPress Showcase, https://wordpress.org/showcase/

Here as some sites I have worked with that we will talk about:

University of British Columbia, http://www.ubc.ca/ [a huge university site]

The MILL (UIdaho Library), http://mill.lib.uidaho.edu/ [an information site, with lots of resources and a blog]

VPOD, http://poetry.lib.uidaho.edu/ [a daily poetry site, one post featured per day, poets as categories]

Digital Aladore, https://digitalaladore.wordpress.com/ [a project report, chronological order]

WordPress.com

For big organizations or if you are comfortable working with your own web server, WordPress software is distributed from wordpress.org or is available as a one-click install from many web hosts. You can learn more in the full documentation called the WordPress Codex.

However, for those of us who don’t want to deal with any of that and want the simplest way to get started, WordPress.com is the official hosted version of WordPress. They do all the tech work of setting up and maintaining your web server and WordPress software. With a free account you get one free website, 3 GB storage, and a URL like example.wordpress.com. There are many paid add ons and upgrade plans (thats how they make money!), but the free account is sufficient for most basic uses. Since WordPress is so popular, there are a lot of learning resources out there. Just keep in mind the difference between the software (wordpress.org) and the hosted version (wordpress.com), and that newer versions have slightly different features and look than old ones. If you have questions about WordPress.com, check the Learn and support pages.

To get started using WordPress.com, follow the mini-lessons on this blog, starting with creating an account!

More: Alternatives

There are a lot of other blogging or website creation options out there. WordPress is popular because of its flexibility, powerful CMS features, and great themes. Some platforms have remained more focused on blogging, for example, Blogger or Tumblr. These platforms tend to have more in common with social media than website building focused platforms, such as Wix or Google Sites, or pure CMS such as Drupal. WordPress is balanced somewhere in between. If you are comfortable with code, Jekyll on GitHub Pages is a popular free option with similar functionality to WordPress, but less hosting requirements.

Advertisements

2. WordPress Dashboard

Now that you have an account set up I can officially say: welcome to WordPress!

In this mini lesson we will get oriented to the WordPress Dashboard admin interface where you create and control everything for your website.

Reader

Navigate to WordPress.com and login if you aren’t there already.

You should see a screen that looks something like:

admin1

The bar at the top of the screen is your WordPress Admin bar. This gives you quick access to the features of WordPress while you navigate around the domain. You will see slightly different versions of it across all properties hosted by WordPress.com.

By default, it opens in Reader view. This is a sort of social media stream of WordPress.com blogs and websites you follow. You can search, browse, and keep track of your likes. It is a good place to keep up-to-date with blogs or discover new things. If you actively comment and like others, your popularity will also go up! This is an interactive community if you want it to be… if not, ignore the Reader view.

My Site Dashboard

To get started creating your blog, click the “My Site” button on the left site of the Admin Bar. This will get you to the site Dashboard interface, that looks something like this:

admin2.PNG

The Dashboard Menu on the left site provides access to everything you need to build your new website. The default view is your statistics, which won’t be very high at this point!

Site Title & Tagline

Lets give your new site a name. Click “Settings” on the Dashboard Menu.

admin3

In Settings > General tab, you can change the Site Title and Site Tagline. These values are displayed on your site following the template set up by your theme. The title does not have to be related to your web address! The Tagline is a very short description or motto that usually gets displayed as a sub-text to the title. It is not required, but is a very common convention in web design.

Once you decide on a Title and Tagline, click “Save Settings”.

Changes you save in the Dashboard effect your live site immediately. Check what your live site looks like by clicking the site name at the top of the Dashboard menu.

Next up, let’s customize the Theme!

3. Themes

Themes are one of the most powerful and appealing features of WordPress.

Professional designers create packages that mold the overall look and feel of your site, controlling the colors, text, backgrounds, and layouts. Themes contain styling templates, but also code that responds to different conditions based on the content and parameters set by the user. Web designers can make money by creating wonderful themes that big companies purchase for big bucks. However, the good news is that you don’t have to create your own: community designers share thousands of them for free!

To explore how this works, first we will test out a new theme, then customize your current one.

Change Themes

themes1

Head to the Themes admin by clicking on the Dashboard Menu item. This gets you to a page like this:

themes3

Try out a new theme:

  • Use drop down to say your are looking for Free themes.
  • Browse the listings for something interesting. Each theme has a different look and feel. Think about the balance between text and images, the readability, and the sense of style you want. When you find something you would like to try, click on the theme. This brings you to more information about the Theme package.
  • Click “Open Live Demo” to preview its function. open live demo
  • Click “Try & Customize” to see what your site with your content will actually look like. This opens the Customizer interface.
  • Play around with the demo, but DO NOT click save (unless you want to keep the theme). To discard the theme without make any changes, click the “X” in the left corner.

Customize Theme

Now that you have a good theme, lets learn more about how to customize it. Head to the Theme Customizer by clicking on the “Customize” button in the Dashboard menu (next to Themes) or Themes admin. You should be directed to a screen that looks something like this:

themes2

We can set all the basic parameters for the current theme using Customizer. Some more powerful customization options are disabled with a free account, including the “Custom Design” options. There is still plenty to do!

Try out one of the parameters, such as “Colors & Backgrounds” or “Fonts”, to see how it works (we will take a look at the more advanced features such as Menus and Widgets a bit later). When you make a change, you will see it previewed in real-time. Keep in mind that nothing is saved until you click “Save & Publish”. If you click the X in the upper left, unsaved changes will be discarded.

When you make a change in Customizer and click “Save & Publish”, your site is immediately updated. Make a small change, save, then check your site to see it in action!

Themes are Amazing Magic! You can completely change the appearance of your site with a few clicks, without having to rewrite all your content. This is why people love WordPress.

Now its time to add some content, next lesson is about Pages!

4. Pages

All content on a WordPress site is divided into two types, Posts and Pages:

  • Posts are the traditional bloggy things that are dated entries often displayed in reverse chronological order. Posts gradually build up over time and can be browsed by categories, tags, and date.
  • Pages are static items in your site, such as the traditional “About” or “Contact” page. They are not dated, don’t have categories or tags, and are usually not browsable by Reader.

About Page

Lets create / edit the About Page to anchor your new site. On the Dashboard Menu, click Pages. This should get you to a page that looks like:

pages

This is a listing of all the pages your site currently contains. Now click on “About”, which will open the Page in the Editor window:

pages3.png

The right side of the window is now an editor where you can create content for your About page. Notice the tabs labeled “Visual” and “HTML”. Visual mode is a WYSIWYG editor where the options are similar to a simple word processor. Simply start writing or editing! HTML mode shows you the actual code created by the editor. Note that it is not pure HTML, but a type of WP markdown that is converted to actual HTML by your theme templates. You can switch back and forth as much as you want to debug your writing!

We will look at options for managing images and links in the next mini-lesson, so for now simply edit the text of the About page.

Spend some time thinking about your site. What is its purpose? What does your audience need to know to get interested? Then draft an About page that is a short and sweet elevator pitch for your site. Give the background set up the context and get readers hooked in. In the future, you might want to include important resources and links to help people navigate, get started, or learn about your topic.

Edit, then click “Publish” or “Update” to save the changes and make them live.

Wait, make sure you see a green success message!

Check your live site (refresh) to see your updated page.

Head to the next lesson to learn about Posts.

5. Posts

When you think blog, you usually think posts. These are frequently changing bits of content that build up your blog.

In WordPress each post is a dated entry that can be tagged, put in a category, and displayed in a variety of default ways. Each will have an individual page,  but also automatically appears in chronological streams of all Posts. For example, an individual Post “What is WordPress“, also appears first in the “Mini-lessons” page, which is a stream of all Posts with Category “lesson” in ascending date order.

So lets create some Posts and try out some of the features of the Editor!

First Post

To create a new Post, click on “Add” next to Blog Posts in the Dashboard menu,

posts1

or click the Edit icon in the upper right Admin bar.

admin icons

This will bring you to a fresh Post Editor window, like this:

posts4

Use the Editor on the right to start adding content. Create a Title, then click in the box below to start writing. Create an excited snippet just for fun this time, its your blog’s first big post, but you can Delete it any time! Editor saves your work every few seconds, so if you leave this page, it should be saved as a Draft Post.

Just for practice, click “Publish” to save this post and make it live on your site.

Add Images

Now, repeat. Lets create another new Post to try other features of the Editor.

On this post write a intro sentence, if you really can’t think of something, try “This is my second post”. Now lets add an image. Click the media icon on the left side of the Editor options ribbon. add This will open up the Media Library management window:

posts5

This might seem odd at first. However, since all content is managed by the CMS in a database, you don’t just paste the image into a Post; you upload it to the system and create a link. This ensures the media can be seamlessly reused in other places and managed by the system. But don’t worry about that!

To upload a new image, click the “Add New” button and navigate to the source. Your theme will also probably include some default images you can use. All images and other media you have available will appear in the library. Choose one and click the “Insert” button. The image will now appear at the place where your cursor was in the Post.

There are many options to format the images. However, in general, if you want the image to fill the whole space of the post, press return twice after some text, and put the image on a new line by itself. If you want the image to appear smaller inline, put it on the same line as some text. Sometimes the Visual editor will have odd hiccups with images. Switch to the HTML view and add space between the text and image code to fix it.

Add Links

Now that you have an image in this post, lets add some links to the text.

Add something like “remember to check out my About page” to the Post in the Editor. Use your mouse to highlight “About”. Then click the link icon in the Editor options ribbon posts7

This will bring up the link manager:

posts8

If you want to link to an outside source, simply  copy the web address from your browser and paste the link into the URL box. Leave the Link Text alone, since this is the bit of text you highlights in the Post. If you want the link to open a new tab, rather than replacing the current one, check the option box. Sometimes this is helpful for outside resources, so that users do not loose their place on your blog.

If you want to link to other Pages or Posts on you own site, then use the “Link to existing content” option NOT the URL box. Look through the box to find the item you want to link to and select it. This is very handy because you can change the names of the item, but WordPress will automatically keep the links up-to-date.

Then click “Add Link” to create the hyperlink in your text.

Now click “Publish” to push this new post live to your site. Make sure you got the green success message again!

This time, don’t navigate back or create a new post. Lets keep editing the same one.

Categories & Tags

The menu on the left side offers further options for the Post. The most important is the “Categories & Tags” menu. Adding Categories and Tags helps other people find your content, enabling browsing features and making connections across all WordPress properties. It can also help you organize your posts to create topical arrangements and views for the site. For example, if a user clicks on one of your tags, she will see a page with a stream of all the Posts with that tag. The Mini-lessons page on this site was created using Categories way. It is simply a link to the category “lessons”, which displays a stream of all posts assigned that category.

On your post Editor, click on “Categories & Tags” to expand the menu. Create a new category and add a few Tags.

Now click “Update”. The “Publish” button has changed to “Update” since the post is already published. Once you see the green success message, the updated post with tags should be live on your site.

Schedule

You don’t necessarily want all posts to be published instantly. WordPress allows you to schedule your posts so that they will publish automatically when the time comes.

Create a new post and write some dummy content.

Click on the calendar icon next to the “Publish” button. posts10

This will bring up a calendar where you can set the exact day and time you want the post to go live. Once you set a time in the future, click “Schedule” to save.

Nice work! You know all the basics to create your site. The next lesson takes another look at Configuration options.

6. Configure

We have the content and styling part down, but WordPress offers more CMS features you may want to check out in the Configure section of the Dashboard.

config

Sharing

Sharing allows you to connect your blog to social media platforms. This includes the ability to automatically push your posts to sites such as Facebook or Twitter to publicize your writing. You can also manage the sharing buttons displayed on your posts to enable users to easily link to your writing (or hide the buttons away!).

People

People allows you to add other users to your site so you can collaborate in producing a blog. Just make sure you understand the risks of giving admin access to other people.

It also has options for tracking and contacting your the followers of your blog.

Plugins

WordPress is famous for its plugins! These are handy little tools that add functionality to your site. Unfortunately, they are disabled for free accounts on wordpress.com. If you are excited about playing with plugins, consider self-hosting WordPress.

Domains

Domains allows you to change your web address or add a new custom domain (paid). In general, once you have your site established, you do not want to change your address. If you do, you will break links and set back your search indexing. But you still might want to do it sometimes, especially when you are just starting off and suddenly have a brilliant idea for a URL…

Settings

The Settings menu has many parameters to tweak and control your site. It is worth checking out the “Discussion” tag to ensure you are comfortable with the settings for comments. The web always has the chance for ugly misuse such as trolling and spam. These settings can limit some of it or turn off comments all together if it is a concern.

The Import / Export tab allows you to back up or migrate your blog using WordPress XML. This is handy for moving your blog to a different hosted version of WordPress, or getting all your content in a single portable file for backup or text analysis.

Old Admin Trick

So far we have been using the new Dashboard to manage our site. If you look at many tutorials out there, you will see a very different looking admin interface. The older version is usually called the WP Admin. It is not as slick or responsive as the new version, but it has some more powerful features for working on your Posts, Categories, and Tags in bulk batches. It can still be used by adding “/wp-admin” to the end of your site’s address. For example, demo.wordpress.com/wp-admin

admin10

Using the old Admin is a good option if you find an older tutorial that doesn’t seem to work with the new Dashboard. It is also currently the only way to bulk edit the categories, tags, or post scheduled date.

You know all the basics! There is just one more mini-lesson, Next Steps.

 

7. Next Steps

Well, you did it. You learned all the basic functions necessary to create a WordPress site. You are a web master now. There is still plenty to learn of course!

Content & Presentation

As you move forward, think about how you organize and present content on the site. Web media is different than other forms of writing. Check out lots of other blogs and sites to judge what works and what you like. Typically your language and word choice will be less formal, passages are usually in shorter chunks with headers highlighting changes in topic or important points. Since users often don’t scroll down, ensure your most important points or summaries appear near the top of a page. Carefully design navigation and browsing tools so users can discover your content and move meaningfully through it. Think about how hyperlinks and rich media change the reading experience.

As we have seen, WordPress is easy to customize. Don’t be afraid to experiment with your site! Change themes, tweak parameters, and repeat until you are happy.

Extra Credit: Menus

Now that you have a few demo posts, head back to the Themes menu and try out some changes. Explore your theme’s options for Menus which can add powerful functionality to your site. Create a menu that helps highlight your content or adds a new method for navigation on the site.