Edudemic

Topics: blogging, featured, guide, How To, ultimate guide, Wordpress

• Tweet
• 

• Tweet
• 

This is the latest installment of Ultimate Guides from Edudemic. What are Ultimate Guides? They’re detailed looks at particular topics that you may not get anywhere else. From Twitter to Google+ to Bastille Day, the library continues to grow. Already a WordPress expert? Check out the other guides here.

WordPress powers many of the world’s most popular websites (including Edudemic!). Many people without much technical expertise want to use WordPress to power their blog but are a bit nervous about learning the vocabulary or figuring out which plugin or theme is right for them. Looking to quickly get up and running and not ready to read this whole guide? Here is a quick guide on how to make a blog and customize it the way you want with this free theme tutorial.

Now for the long-form tutorial version: rather than venture into the world of WordPress alone, Edudemic is here. Below is a ‘how to’ guide written for real people. You don’t need to know the lingo of WordPress before reading this. The only you thing you need to know is how to click a mouse. If you can do that, read on and share this with any friends or family you think would benefit from learning about WordPress.

Introduction

So your current or future website runs on WordPress. Terrific. Now what?

First, let’s understand what it is. WordPress is a system that makes it super-easy to launch, edit and customize your site.  Right out of the box, your website is great for posting static content, blog posts, announcements, photos and videos.

It’s also easy to add functionality: twitter feeds, Facebook integration, slideshows…if you’ve seen it on the web before, chances are it can be integrated into your site.

Logging In and the Admin panel

Use the credentials provided by WordPress and then go to http://yoursite.com/wp-admin/ to log in).  Go ahead and log in.  What you see next is the Admin panel, where you will add and edit content and adjust the settings of your site.  The menu is in the column on the left.

There’s a lot going on here, but you won’t have to worry about too much of it.  This guide will cover the most-used functionality, but feel free to explore.  You can also check out the official WordPress documentation at http://codex.wordpress.org.

First things first: you’ll probably want to change your password.  Toward the bottom of the admin menu, click Users to expand the Users menu, and click “Your Profile.”  The password field is at the bottom, and is really the only thing you need to update here.

Posts and Pages

Most of your time using the website will be writing content, either in Posts or Pages.

Posts are like blog posts, and can be news stories, articles, announcements, etc.  Multiple posts are typically displayed at a time, with the most recent on top.  You can create categories to organize them and use tags to add additional information.  Posts can easily be displayed in archive pages by category or date.

Pages are more like “regular” web pages. They are for content that should more or less always be available on your site (though they are just as easy to change and update as posts).  Pages are typically linked in your site’s navigation menu.  Pages are often used for About Us pages, Contact information, etc.

The processes for creating and editing posts and pages are virtually identical, but there are slight differences that we cover below.

Write a Post

To create a new post, click the little arrow next to Posts in the Admin menu.  The menu will expand to show admin pages related to Posts:

Click Add New and you will be taken to the Post editing screen:

The main part of this page is the editor in the center.  This is where you write and edit content.  The rows of buttons on top provide various options for formatting and inserting content.  Some of these (lists, bold, italic, align) will be familiar to Microsoft Word users.  Some (insert photo, link, text style) may be unfamiliar.  This visual editor will give you a general idea of what your content will look like on the page, but it isn’t an exact reproduction.

The tabs in the upper right corner of the editor allow you to switch between the visual editor and the HTML editor.  The latter allows you to edit the actual HTML that is behind the scenes.  Those unfamiliar with HTML should stick with the visual editor.  If you do want to edit the HTML, note that WordPress filters the code when it is saved and inserts/removes certain tags for purposes of safety and consistency.

Beneath the editor are a handful of other options:

Excerpt – your default blog displays the first 55 characters of a post on the blog. However, if you write something in the Excerpt box for a post, the content you write will be displayed as the excerpt instead.  This is generally a summary or teaser that makes someone want to read the post.

Discussion –  you can set global settings elsewhere for whether comments/pingbacks are allowed on your site, but here you can choose to enable/disable reader responses on a per-post basis.

Author – By default this is your user account.  If there are multiple users on your site you may be able to select a different user account to credit for this post.  On the site, the author name is usually a link that allows visitors to see all the posts by that author.

Other Options – Other options that appear here are Send Trackbacks and Custom Fields.  You can probably  leave your trackbacks options the way they are.  Custom Fields are a more advanced way of adding additional data to your posts.  For more on custom fields check out http://codex.wordpress.org/Custom_Fields.

Special Options – Your site features the new ability to quickly and easily embed custom thumbnail images. Just use the ‘Featured Image’ link on the right when writing a new blog post. On a related note, be sure that your theme uses the latest version of TimThumb.php if applicable. There was a security issue a few weeks ago which is fixed in the most recent version. If you don’t know if your theme uses TimThumb.php, check with your web person! (Click here to view the latest version of the script.)

The Right Column

Now let’s take a look at the column on the right.  This column includes Publish, Categories, and Post Tags.

Post Tags – Here you can add tags to the post.  Tags are a way to add a little extra information about the post, and generally describe the content.  You might tag certain topics that are discussed in the post, or use a tag to mark a post as “featured.”

Categories – Like post tags, categories are another way to organize your posts. Categories are really meant for topics that you cover on a regular basis. For example, Edudemic has categories on ‘Social Media’ and ‘How To Guides.’

Publish – There are actually a lot of things you can do in this box besides publish.  You can Save a draft of the post if it’s not ready to publish (WordPress automatically saves a draft every few minutes).  You can also set the post’s visibility here.  In most cases you’ll want it to be public, but you can also choose to ‘stick’ it to the top of the page, even if there are newer posts that would ordinarily appear above it.

You can leave the publish date/time as “immediately” or you can specify the time and date the post “goes live.”  And you can Preview the post, which will open a new window/tab showing you the full-page version of the article exactly as it will appear when published.

Write a Page

You’ll find the Add New link under the Pages header in the Admin menu, just as described with Posts above.  This will load an Edit screen that looks identical to the Post edit screen except there’s no Excerpt box, and Page Attributes takes the place of Categories and Tags.  Refer to the Posts section above for an overview of creating and publishing content.

Page Attributes  – This box allows you to specify a Parent if you want the page to be a sub-page of an existing page.  Templates are preset page layouts that come with your theme.  There is often one that includes a sidebar, for example, and one that doesn’t, so as to give your content the full page width.  If you’re unfamiliar with a page template, select it and Preview to see what the page looks like.  Order is what ‘order’ the page is in compared to your other pages.  This comes into play if WordPress is automatically generating a list of pages, but since you’ll be making a custom navigation menu, you will probably never need to worry about Order.

Writing/Editing Content

Now let’s take a closer look at the visual editor you use to create and edit content.  You can use a Post or a Page for reference, as the editor is the same.

You add your text in the text box.  When you insert a line break (“return”) between sentences, WordPress will automatically create a new paragraph.  It also tends to get rid of extra space, so don’t spend too much time worrying about spaces between your content.

First row: The first few buttons on the editor are text styles, the next are paragraph styles.  They should all be familiar concepts.  After the align buttons are two buttons that look like chain links, one broken.  These are the link and unlink buttons.  Select some text in the editor and click the link button to bring up a dialogue.  Here you can specify the url you want to link to, and specify if you’d like that link to open a new window.  There’s also an option that assists you with linking to content within your site.  Clicking the unlink button will remove the link from your selected text.

Next is a spell check button.  Click it to underline any potential misspellings in your content.  The next button toggles on and off a full-screen editing mode; the following button (‘kitchen sink’) shows and hides the second row of editing buttons.  The next is for inserting a slideshow, which is detailed below under “Slideshows and Galleries.”

Second row: The first item here is a dropdown where you can select text styles.  For consistency’s sake you’re better off leaving this on Paragraph, but you can also make text a header.  The next buttons: underline, ‘justify’ align, and text color (better to leave this one alone also, as your theme automatically applies text colors).  The next two buttons are for pasting in plain text (the ‘t’) and text from Word (the ‘w’).  If you copy and paste directly into the editor you sometimes get formatting quirks.  The Insert from Word button is especially helpful in this respect.  It opens a text box into which you paste your Word text.  Links, bold text, etc. will all be preserved and translated into their web equivalents. You can use the below text as a rough outline on sizing:

The next button, an eraser, is to remove formatting.  A shortcut for when your text is messy.  The ‘omega’ button allows you to insert special characters. Then we have out-dent, indent, undo, redo, and a help button.  That’s it!

Adding images and media

Actually, that isn’t it.  Above the editor toolbar are the words “Upload/Insert” and some cryptic icons.  These are what you’ll use to add images, audio, video and other media (e.g. PDFs) to your content.

Add Image: This is the option up here that you’ll use the most.  Clicking this first icon opens a dialogue.  Here you can upload and/or insert images.  In other words, you can upload an image to your site, insert an image into your post/page that’s already stored in your site, or upload an image and insert it.

Uploads: Let’s say you’re going to upload an image and insert it into your content.  Click the button that says “Select Files.”  Browse to the image’s location on your computer and select it.  The image will be uploaded and a form will be displayed where you can enter additional information about it.  The title is the “name” of the image that you will see when browsing your media in these admin screens, so name it whatever makes sense to you.

Alternate text is mostly used by search engines and screen readers—it is best practice and good for search rankings to enter relevant, appropriate text that describes the image.  If you enter a caption, it will appear under the image when it is displayed.  By default, images link to themselves (click the image in a page and you load just the image on its own); if you want to link the image to some other page, enter the url under link, or click ‘none’ if you don’t want the image to be a link at all.

You can select how the image should be aligned when displayed.  If you choose left or right, text and other content will flow around the image to the other side, like in a newspaper.  Center or none will both give the image its own “line.”

Finally, you can choose for the image to be a preset size or use the original size.  You can save to keep all this additional info you’ve entered, or click Insert Into Post to insert the updated image into your content.  After you insert it you can drag it around or click it to resize it, delete it, or return to this edit screen.

Media Library: Once you upload an image—before you even enter extra data or save it—it’s immediately stored in your Media Library.  This is where all your images, audio, video, etc are stored in WordPress.  This is also where you go when you want to use an image that you’ve already uploaded.  When you click the Add an Image button and open the dialog, click the Media Library tab to see your existing media.

When you find the one you want, click show to open the same editing screen you see when you upload.  Here you can enter or edit the image’s details.  You can also edit the image itself by clicking Edit Image under the thumbnail.  Here you can resize, crop and do other simple image edits.  When you’re ready to add an image from the Media Library to your content, click Insert Into Post at the bottom of the edit screen.  Note that you can also access the Media Library directly from the Admin menu.

Add Video, Add Audio, Add Media:  these buttons work the same way as the Add Image button.  They are used for uploading files from your computer (or inserting a file previously uploaded, from your Media Library).  When you insert non-image media into your content, the title of the file shows up in your post as a link to the media file.  When a visitor clicks the link, whatever application they use to view that media will open (e.g. Adobe Reader for a PDF).

If you want to insert a video from YouTube you wouldn’t use this dialog because you’re not actually putting the video file on your site.  In this case, you would want to use the embed code provided by YouTube. Input this in the HTML tab of the editor.

Galleries and Slideshows

Like fancy photo galleries but don’t know code? No problem! WordPress has built-in support for image galleries and dynamic image slideshows.

Galleries are basically a nicely-formatted way  of displaying several images together (with their captions, if they have any).  You can always just insert the images into your post/page from the image upload dialogue, but then you have to try and make them look nice yourself.  When you use a Gallery, the WordPress system knows to make the images the same size and to align them, etc.

First you will want to upload the images you will be using.  (You can’t add existing  images from the Media Library to a gallery.)  Click the Add Image button above the editor and upload the file.  Don’t click Insert Into Post–once you’re done entering info about the uploaded image click Save All Changes.  The dialog will now switch to a tab called Gallery, where it shows a list of the images uploaded for this post/page.  You can continue adding images in this way and the Gallery list will show each as it is  added.

When you have uploaded all the images you want, review the settings that appear in the Gallery tab (the number of columns you want, for example) and click Insert Gallery.  Alternatively, you can add the shortcode “[ gallery ]” in the editor once you have uploaded the images.  The gallery will appear as a big block in the editor.  As with images, you can click it to delete or change its settings.  For more details on customizing galleries see http://en.support.wordpress.com/images/gallery/

Slideshows are built off the gallery functionality.  Slideshows display the images from your post/page one at a time, as an animated slideshow.  To create a slideshow, first upload the images you want to use with the Add Image button as described above.  Remember, you don’t need to actually insert them into the post/page.  Once you’ve got them all showing up in the gallery tab, click Save All Changes.

In the editor, place the shortcode “[ slideshow ]” (without any spaces) where you want the slideshow.  You can also use the slideshow button in the editor tools.  When you click this button, a dialog opens.  Click Images From a Post.  In the resulting dropdown, select THIS POST to use the images you uploaded.  You can also choose to use the images from a different post in your slideshow by selecting that post instead.  By default, the image’s name is shown as an overlay in the slideshow.  You can disable this as follows: “[ slideshow caption=off ]” (without any spaces).

Categories and Tags

Categories and Tags provide ways of organizing your posts (not pages).  Categories are for structure–you can have sub-categories and sub-sub-categories etc.  You can easily make and link to archive pages that show your posts by category.  Tags don’t provide as much organization, but are good for linking related content.

Categories are how you organize posts.  These can be straightforward (e.g. different topics covered by your posts) or you can use them to divide up your content in other ways (e.g. one category for the blog, with subcategories; another for print articles, with its own subcategories).  You can create new categories by clicking Categories under Posts in the Admin menu, or you can create them on the fly when writing a post.

Note that you can make a category a sub-category of another to establish a hierarchy.  You can always change the categories to which you have assigned a post in the Edit Post screen.  Your site’s theme will display a post’s category as a link.  Clicking it will take you to an archive of all the posts in that category.

Tags are for making connections between posts that may or may not be related in other ways.  For example, a post about underwater basket weaving could be posted in the category “DIY” while a post on basket production in developing nations might be posted in the category “International Development”, but both might be tagged “baskets.”

You can add a new tag by clicking Post Tags under Posts in the Admin menu, or you can make new tags on the fly when you write a post.  As with categories, your site theme displays post tags that typically make them links to an archive of all posts with that tag.  Tagging your posts can offer your users an easy way of finding the content that interests them.  Note that tags are not hierarchical–you cannot make sub-tags.

Menus

It’s super easy to customize your navigation menu.  You can choose to link to Pages, to post archives, or to any other URL.

To edit the menu, go to Appearance -> Menus from the Admin panel.  You’ll see the menu represented on the right.  You can drag and drop the menu items to rearrange them.  You can also “indent” a menu item to make it a sub-item of the one above it. Sub-items are displayed as a dropdown when a visitor hovers over the menu.  You can also click the little arrow on the menu entry to change how it’s displayed, for example to edit the text shown in the menu to be different from the page name (useful if the page has a longer name).

Add a new Menu item: To add a link to a Page, select the Page you want to add from the Pages box to the left and click Add to Menu.  (You can also select ‘Home’ here to add a link to the home page–but note that the site logo is also a link to your home page.)

To add a link to a category archive (a list of all the posts in a certain category), select the category in the Categories box and click Add to Menu.

To specify the URL for a link, enter the address in the Custom Links box, enter the text that should appear in the menu in Label, and click Add to Menu.

When you’re done editing a menu click the “Save Menu” button.

Sidebars

To edit or change settings for the elements in your site’s sidebar, click Widgets under Appearance in the Admin menu.

The site’s sidebar is a ‘widget area’: part of the site where you can display widgets.  Widgets are just different types of content–there’s one that shows your categories, one that displays recent comments, one that lets you enter some text to be displayed, etc..  You can put as many widgets into your sidebar as you want, but be aware of how it looks to your visitors.

To add a widget to your sidebar, just drag it into the sidebar box.  It will immediately be added to the site’s sidebar (you don’t have to save or publish the sidebar itself).  You can rearrange them to change the order in which they appear.  Click the little arrow on a widget to change its settings.  When you’re done, click Save, and the new settings will take effect.  To remove a widget, drag it into the Available Widgets area, or if you would like to save its current settings (in case you want to put it back in the sidebar another time) drag it down to the Inactive Widgets area.

Theme Options

In addition to adding functionality to parts of your site (the content editor, or additional widgets for your sidebar), your fancy theme probably has an options menu in the Admin panel where you can set global options.  This is accessed by clicking ‘Theme Options’ or something similar on the right.  There are tons of options here you can feel free to play around with if you like. Since these vary by theme, hopefully you can figure this part out on your own. If not, check out the Support Forum on your particular theme’s developer’s website.

If you’re looking for a theme that has a ton of theme options that are super easy to use, check out WooThemes, Elegant Themes, WPZoom, or Themeforest.

Using Plugins

Plugins add functionality to your site in much the same way as a theme. Plugins can change or add to almost any part of the WordPress system.  Some provide new widgets for use in the sidebar, some add new features to the editor toolbar, some affect the site as a whole, tracking analytics or preventing spam comments. The plugins page will show you all the installed plugins and which ones have been activated.

CONGRATULATIONS!

You’re now officially a WordPress-savvy web user. Congratulations!

Share This, yo!

If you found this guide helpful, let your friends (and Edudemic) know about it! Please retweet and share this guide so others can also benefit. If you have something you’d like to add / edit in this description, then reach out to us via the Edudemic Facebook page. Thanks in advance!

This is the latest installment of Ultimate Guides from Edudemic. What are Ultimate Guides? They’re detailed looks at particular topics that you may not get anywhere else. From Twitter to Google+ to Bastille Day, the library continues to grow. Already a WordPress expert? Check out the other guides here.