Tag Archive for: tutorial

Getting Started With WordPress

/0 Comments/in /by

A Complete Starter Guide to Writing, Editing and Maintaining Your WordPress Site

Updated for 2016!

Congratulations on setting up your first WordPress website. This is a guide to writing and editing web pages on your WordPress site.  As you use, update, and maintain your site, you will begin to understand why WordPress is one of the most powerful and free content management systems (CMS) online and how it will benefit your website or blog for a long time to come.

In this guide, we’re going to show you the basics on how to manage your WordPress site, including logging in, posting new articles and pages, uploading images, creating and editing menus and widgets, and some more advanced features as well.

First, How to Log in to Your WordPress Website

There is more than one web address (URL) that you can use to access your log in screen.

WordPress Log In

  • The first is to point your web browser to: yourdomain.com/wp-login.php.
  • The simplest, however, is to go to: yourdomain.com/wp-admin.

You will be greeted with the log in box shown above. Type in your username and password and click the “Log In” button.This will give you access to your WordPress site dashboard; the dashboard is the WordPress “back-end”, the administration area where you work on editing pages, writing new pages, and other administrative tasks. If you’re already logged in,  you will be directed to the WordPress dashboard immediately. If you’ve logged out or timed out of your session, it will automatically redirect you conveniently to the log in screen. If you’ve lost your password, you can use the “Lost your password?” link to generate a new one–that feature is built into WordPress.

The WordPress Dashboard-Your Control Center

WordPress Dashboard

On the left side of the screen, you will see a navigation menu to include Posts, Media, Pages, and other sections of your dashboard that will help you manage the entire back and front ends of your site. Without making any changes or adding anything, it’s good to browse through these sections to get acquainted with them and understand how everything is organized in your admin area.

What You Can and Cannot Edit from the Dashboard

You can’t edit everything on your website from the dashboard–certain elements (the header, the footer) are part of your template files, and aren’t meant to be tinkered with. Your template files are the files that determine the appearance of your website–these files reside on your web hosting server, but aren’t easily accessible through the admin area. To change template files, you can connect to your web hosting via FTP.

This map shows various areas of a WordPress site.

The map above is general: all WordPress templates are different. Some templates have graphical sliders, others do not. Some templates have custom, editable menus, and others do not. Generally speaking, the newer your template is, the more feature it will have, and the more features you’ll be able to edit from the WordPress dashboard. To get to know your website, you’ll want to get to know your dashboard area.

The key to know is that the main content area–the area where the text and images of your Pages and Posts go is ALWAYS editable from the dashboard by following the instructions in this guide.

Posts vs. Pages: What’s the Difference?

In your dashboard, you’ll notice navigation entries for Pages and Posts–these two elements are key in understanding WordPress. Both Pages and Posts display as text and/or images on your site, with a few key differences:

  • Pages are for static content, not organized by date or category. An example, your “About Us” page or “Contact” page.
  • Posts are news and blog entries that WordPress displays in a blog format, along with categories and tags for organization.
  • Here’s a hint: this document you are reading is a Post. If you browse on the top navigation to our “Contact Us” page, you’ll read a Page.
  • If you have a simple 5-page business card site, you might not want Posts at all (although you should always be blogging and issuing news to engage your customers and tickle the search engines).
Why the dual architecture? Briefly: WordPress began as a blogging platform. Some users wanted more from the platform and as it matured, WordPress incorporated static pages to accommodate these users. Keep the distinction between Posts and Pages in mind as you write content for your site.

A post is useful for:

  • Latest news from your business;
  • Upcoming events news;
  • A blog or journal entry;
  • News feeds;
  • Interviews, guest blogs, or paid posts;
  • Anything that doesn’t fit in with pages.

Pages are useful for:

  • About Us sections;
  • Contact Us form webpages;
  • Location, directions, and maps to find your business;
  • Registration and log in pages for your users and visitors;
  • Privacy policies, copyrights and other disclaimers, Terms of Service, and other legal issues.

Writing a New Page

We recommend that you create a Page as the first step in writing content for your site. An “About Me” or “About Us” section is a good first step and is best as a Page, not a Post.

1. Go to the left navigation of your dashboard and click on “Pages.” This will open the Pages section of your dashboard and the additional navigation underneath the Pages menu.

2. On the left navigation, you should see “Add New” under Pages. Click on it.

How to Add a WordPress Page

3. “Add a New Page” will open with a blank form where you can enter a title for your Page (this will be the title and the name given on the Page navigation on your website) and a large text area where you can enter content.

4. Give your Page a useful title that will explain what it is and inspire a visitor to click on it.

5. Start writing! As you write, WordPress will save your Page. Additionally, you can click on the “Save Draft” button on the right side. This will not publish your Page live on your site, but save it in your dashboard for later. Your Page won’t be live on your site until you click the blue “Publish” button.

6. If you want to see what your Page will look like before you publish it, click on “Preview Changes” on the upper right side under the “Publish” heading.  This is not a live link; it is only a preview of what your page will look like once you publish it.

7. If you’re ready to publish, click “Publish” on the right side. To view the live page on your site, click on the “View Page” button located underneath the title section of your page.

If your Page does not appear live yet on your site, you may need to take a second step–adding the Page to your WordPress Menu–which you can read about below under the heading “Creating and Editing Custom Menus.”

Editing an Existing Page

Editing a WordPress Page is as simple as creating one–and you will make your edits in the same interface you used to create it. Here’s how to get to the Page edit area:

1. Click on “Pages” on the left navigation in the dashboard, a table showing all of your existing Pages will appear.

Page Menu

2. Find the page you want to edit and click on the title or “edit” link below it. The “Edit Page” screen will appear and it looks like the following:

Edit Page Screen

3. From this Edit Page screen you can make any changes you like. Editing and writing in WordPress is meant to emulate a simple word processor to the extent possible. When writing or editing, you’ll work principally in the text editing window (the area with the “Web Design Portfolio” graphic above). At the top of the text editing window, you’ll find icons that let you make bold text, select headings, and justify text left or right, etc. You’ll also notice two tabs at the top of that window titled “Visual” and “HTML”. The visual edit area is shown in the graphic above, but if you are comfortable editing HTML directly, you can choose the HTML tab; and, you can switch back and forth between visual and HTML edit mode.  Once you have all your edits the way you lick them, “Update” on the upper right side under the heading “Publish.”

Working With Images in Pages and Posts

It’s easy to add and work with images in WordPress. We’ve got a full, separate tutorial for adding images to WordPress here.

How to Write and Edit Posts

Writing and editing Posts is very similar to writing and editing Pages. The editing interface is exactly the same, there are just a few little extra features.

Creating a new Post

1. To create a new Post, go to “Posts” and select “Add new.”

2. Follow instructions for writing a new Page, but add the following:

a. Posts allow you to categorize your content. So, create or select an appropriate category for your blog post. By default, your Post will be filed under “Uncategorized,” but you can organize better for visitors if you create a few categories to file posts under. For example, if your blog is about fitness, you may want one category for sports and another category for fitness equipment. If you blog about movies, your categories could be different film genres.

b. Posts also allow you to add “tags” to your content. A tag is very similar to a category–tags serve merely as an independent way of grouping or categorizing your content. Tags are optional! One mistake trashy blogs make is to use too many tags for each post. Keep it simple.

Here’s an example of an appropriate use for tags vs. categories. Say you have a movie blog, and you have 3 categories: horror, science fiction, and silent films. Say you write a review of “Westworld” (with the unforgettable Yul Brynner), you would categorize your review under “science fiction” and you could use tags for the actors “Yul Brynner” and “Richard Benjamin”.

The screenshot below shows the category and tag selection areas highlighted.

3. When you’ve got your Post the way you want it, you can preview, save, or publish your blog post. Remember, you can always return later and re-categorize a Post. Say your blog/site gets big and you want to create a category for “70s science fiction”…you’d simply edit your Post, add the new category in the category selection area, and hit the “publish” button to update your Post.

Editing an Existing Post

Editing your post is exactly like editing a page. If you forgot to file your post under a category or give it tags, you can also select “Quick Edit” instead of “Edit” to quickly add those. The screenshot just above shows what the Post Edit window looks like.

Customizing Sidebars, Footers and Other Areas With Widgets

Widgets are amazing little chunks of content that are easy to edit and move around. Typically located in the sidebar, you can add and edit wonderful little pre-coded snippets such as a list of categories, other sites you want to link to, a great video or image, or social media and RSS feeds.

Most of the widgets you’ll want to use at first are already available and just need to be activated. To do this, go to your left navigation. Go to Appearance -> Widgets. Once on the widgets page, you can select whichever existing widgets you want to use for your sidebars, or you can create your own using the Text or Custom Menu widgets.

To activate your widgets, click and drag them to the sidebar sections on the right of the page. Once there, you can open and edit them and rearrange the order you want them to appear in.

Wordpress Widgets

Create and Edit Custom Menus

WordPress now has built-in menu functionality that is compatible with most themes. To create a menu, go to Appearance -> Menus. From there, click on the ‘+’ tab and you will be prompted to enter a name for your Menu. Now click the ‘Create Menu’ button.

To edit an existing menu, first select the menu you want to edit. To add a page to the menu, look at the Pages area, and find the pages you would like to add. Select the pages, and click the ‘Add to Menu’ button. The pages will now exist in the menu area, and you may drag the entries around to your desired configuration. In order to make one page a submenu item, place it below its parent item, and drag it a little to the right.

Advanced WordPress Settings

Now that you’ve learned the basics and have had time to practice and get to know WordPress, it’s a good time to learn some of the more intermediate/advanced settings in WordPress.

Let’s Zap the Comment Spam

If you’ve had problems with comment spam, you may opt to turn off comments or turn on comment moderation to allow you to read and approve comments before they are published. To do this, click on Settings -> Discussion and follow the directions to disable comments, turn on comment moderation, or limit who can post comments. You can also set up your blog to only accept comments on new posts for a certain number of days before commenting has been turned off.

Make Pretty URLs With Permalinks

WordPress seamlessly and automatically handles the creation of URLs through its permalink feature. A permalink is simply WordPress’ way of describing the URL for a particular page. Because keywords in the URL of a page are a ranking factor, If you want to rank for “WordPress Development,” than this URL: mysite.com/wordpress-development will perform better in search (and it just looks so much nicer) than mysite.com/index.com?page=5. WordPress’ permalink functionality gives you descriptive URL strings for search engines to follow with no effort at all.

First, you’ll need to turn on Permalinks within the WordPress dashboard—permalinks are not activated in a default installation. To turn on permalinks, log in to the dashboard and follow the left site navigation to “Settings” then “Permalinks”. At the Permalink Settings page, in the section titled Common Setting, click the radio button for “Custom Structure” and enter /%postname%/. This permalink structure will automatically generate URLs from your Page and Post titles—but you’ll still be able to manually change them if necessary.

You now know the basics of operating your WordPress site and can now publish your content for the world to see. Refer back to this How-to Guide if you get stuck and need assistance. It is yours to keep and refer to whenever you need help with posting, editing, or reorganizing your WordPress site.

Happy blogging!

WordPress Tutorial: Display All Posts on a Page

/36 Comments/in /by

How to Create an Interior /blog/ Page That Mimics a Traditional WordPress Front Page

We got hung up recently trying to create an interior blog page (i.e., www.agreatsite.com/blog)  for a client’s design. This problem is more common now with full-featured templates and frameworks that employ sliders and carousels on the front page that are triggered by a template’s index.php file.

First, Create a Custom WordPress Page Template

First, you’ll need to create a custom WordPress page template. All WordPress templates have a page.php file as part of the default template–we simply want to vary that file a little bit. Make a copy of your page.php file and name it page-blog.php.

Next, you need to enter a few lines of code at the very top of your new php file:

<?php
/*
Template Name: Blog
*/
?>

The code above is a naming tag–the template name, in this case “Blog” will be the name that appears in the template selection box at the WordPress page edit window, which we’ll screenshot below.

The Code

Now, you can’t simply run the regular WordPress loop on our custom interior page, we are going to use the WordPress template tag get_posts to query our WordPress database and grab our posts. The following code accomplishes this:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
  <div class="post-item">
    <div class="post-info">
      <h2 class="post-title">
      <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
      <?php the_title(); ?>
      </a>
      </h2>
      <p class="post-meta">Posted by <?php the_author(); ?></p>
    </div>
    <div class="post-content">
    <?php the_content(); ?>
    </div>
  </div>
<?php comments_template(); ?>
<?php endforeach; wp_reset_postdata(); ?>

For the purposes of illustration, a greatly simplified version of the preceding code, without any html markup, hrefs, author information, post date data, or comment section would be as follows:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
 <?php the_title(); ?>
 <?php the_content(); ?>
<?php endforeach; wp_reset_postdata(); ?>

How it Works

So what’s happening here? Well, the heart of the whole process is get_posts–this template tag queries the WP database and gets our posts.

Next, the foreach construct processes each post in turn–thus we’ll have all our posts on our blog page.  The setup_postdata WordPress function, well, sets up our data so it’ll display properly (otherwise the_content may not display the text of our posts. Finally, the wp_reset_postdata restores the $post global variable.

Once you’ve created the file, you’ll obviously want to upload it to your template (theme) directory.

Setting Your Blog Page

Your next step is to simply set up your blog page within the WordPress dashboard. From the WP dashboard, go to Pages, then Add New and create a page with a title “Blog” (or whatever is suitable). Remember the custom template we created above under the heading First, Create a Custom WordPress Page Template? You should now see your custom template name appear under the “Template” pull-down in the Page Edit screen, as indicated in the pic below by the green arrow.

Set the blog page by selecting the “blog” template

You don’t need to put any text in the text edit window, you just need a title–you won’t be displaying any page text here, you’ll be bypassing the specific text of this post and grabbing posts from the database.

Some Background on Why This Was Needed

Incidentally, framework and template designers that hijack WordPress’ index.php file to display a homepage slider, while requiring WordPress’ reading settings to be set to “Your latest posts” as shown in the screenshot below are doing a disservice to users (hence mandating this tutorial). The sounder practice is to code sliders and homepage features into a custom WordPress template.

Video Tutorial: All in One SEO Pack to Yoast WordPress SEO Plugin Migration

/24 Comments/in /by

We’ve seen the light and are converting to the Yoast WordPress SEO plugin on all of our sites. However, when migrating from your existing SEO plugin to the (superior) Yoast plugin, there are a few tricks along the way that will help your conversion go seamlessly and keep your pages displaying properly. This tutorial walks you through the migration from the All in One SEO Pack to the Yoast SEO plugin for WordPress. Watch and learn – you (and your website) will be glad you did.

Video Tutorial: How to Clean Up Your WordPress Head

/in /by

By default, WordPress prints a lot of extra code to the “head” section of webpages that it generates. For example, it prints a “generator” meta tag that identifies the site as a WordPress site–that can serve as a flag to hackers that specifically target WordPress sites. In this video tutorial we’ll learn a quick and easy way to clean the following items from your WordPress installation:

Here’s code to install in your functions.php to follow the above tutorial:

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

How to Add a Sidebar to Your WordPress Theme

/121 Comments/in /by

Most simple WordPress templates/themes generally employ a single sidebar. But, in keeping with WordPress’ open architecture, you can easily add a second (or 3rd or 4th) sidebar to your site’s theme. And, you aren’t restricted to using your sidebar in the typical sidebar area–you can put your new sidebar in a header, a footer, or any other area in your template. Additional sidebars let you place any WordPress Widget (such as Recent Posts, Pages, Links/Blogroll, Calendar, Tag Cloud, as well as any custom widgets) into new areas of your WordPress template. This technique is especially powerful when combined with custom WordPress page templates–with additional sidebars, we can have custom sidebars for each of our custom page templates. This is the approach we’ll teach you in this tutorial.

Laying the Groundwork for Your New Sidebar

So what we’ll do in this tutorial is to add a second sidebar to one of our custom template pages in our WordPress theme. We have a custom homepage in our template where we want to include a robust call to action to our website visitors rather than a Category list which is more appropriate for blog readers. The screenshot below shows the default “Sidebar 1” sidebar from our simple template, and we’ll add a second sidebar called “Homepage Sidebar”.

Add WordPress Sidebars

Let’s first take a 10,000 foot view, we are going to employ the following steps to add our sidebar:

  • We are going to register our sidebar within the template by making an entry in the template’s functions.php file.
  • We are going to create a separate, custom sidebar file called sidebar-homepage.php.
  • We are going to include a reference to our custom sidebar-homepage.php file in our custom page template.

That’s it! With these three steps, we’ll have a 2nd sidebar that will display on our custom homepage. With the same technique, we could create additional sidebar areas, the steps would be the same.

Step 1: Registering the Additional Sidebar Within the WordPress Template

First step: we start by registering our sidebar within the template’s functions.php file. 99% of all WordPress templates/themes have a functions.php file. If your theme doesn’t have one, simply create a file in a text editor (we like Notepad++ in the Windows environment and TextMate in the Apple environment). If you don’t know how to find your theme files, you’ll find them in your web host in the following directory: www.yoursite.com/wp-content/themes/yourtheme/.

You’ll want to begin by finding any existing “register_sidebar” entries in your functions.php file. Ours had the following existing sidebar definition for our single default sidebar:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

To register our second sidebar, we simply add the following code to the functions.php file:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Homepage Sidebar',
'id' => 'homepage-sidebar',
'description' => 'Appears as the sidebar on the custom homepage',
'before_widget' => '<div style="height: 280px"></div><li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

So what did we just do?

  • We told our WordPress installation, “we are adding a second sidebar area that we’ll use in our theme”
  • The sidebar’s name is “Homepage Sidebar”
  • The ID of the sidebar (we’ll refer to that ID later) is “homepage-sidebar”; you can choose “footer-sidebar”, “second-sidebar” or anything you want
  • We added the description “Appears as the sidebar on the custom homepage” that will display just under the sidebar’s title.

If you upload your new functions.php file to your WordPress installation, you should see your new sidebar if you browse from your WordPress dashboard to Appearance, then Widgets. It should look like the following picture. We’ve already added a Text Widget with the title “Contact Us” to ours, but yours will be empty when you first look at it. But, all we have done is create the sidebar so far; we haven’t yet taken the steps to display the sidebar anywhere in our theme, that will come in the next steps.

Add WordPress Sidebar Step 2

If you see your new sidebar in the Widgets area of your WordPress Dashboard, you are ready to move on to the next step.

Step 2: Create an Additional Sidebar File

WordPress themes use a default file called sidebar.php to display sidebars on pages and posts. But, our goal is to create a second sidebar, we’ll do that with a separate file called sidebar-homepage.php.

Again, we’ll open our text editor and create a file and paste in the following code and insert the ID of your new sidebar within the “dynamic_sidebar()” declaration like so:

<div id="sidebar">
   <ul>
      <?php
      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('homepage-sidebar') ) :
      endif; ?>
   </ul>
</div>

Now, we have to note that our example sidebar file is highly simplified. Most sidebar files have more code–this extra code displays core navigation in the event the sidebar does not have any widgets installed in it–but for the purposes of this tutorial, we have to simplify it. As an alternative, you can simply copy your sidebar.php file and rename it. Don’t forget to include your sidebar ID within the dynamic_sidebar declaration (shown in red in the code example above)–that sidebar ID tells WordPress which sidebar (which we registered in Step 1) to display.

Step 3: Call the Additional Sidebar from Your Theme Files

We’re almost there. Now, all we need to do is call our new sidebar file, sidebar-homepage.php from our template files–keep in mind that our file name must follow this construct: sidebar-_______.php; we’ll see why in a moment. In our example, we’ll call our sidebar file from a custom template page–but you can call your new sidebar from a footer file, header file, or any theme file that displays on your WordPress site.

The function in WordPress that calls sidebars is get_sidebar(). When get_sidebar() is used with no information within the parenthesis, WordPress grabs the default sidebar.php file. But we want to grab our sidebar-homepage.php file, so we put “homepage” in single quotes within the get_sidebar parentheses. This tells WordPress to grab a file called sidebar-homepage.php . The code we want to insert in our template file is the following:

<?php get_sidebar('homepage'); ?>

What we’ve told WordPress to do is the following: we want to grab a sidebar file, but not the default sidebar, we want a file called sidebar-homepage.php. With this string of code, we’ve successfully grabbed our custom sidebar file.

Our New Sidebar

If you’ve coded your additional sidebar correctly, you can drag Widgets from the WordPress dashboard to your new sidebar and you’ll see the widgets displayed on your WordPress site. Here’s our new sidebar displaying on our homepage, while we display our default sidebar on interior pages and blog posts:

Our New WordPress Sidebar

Other Approaches to Adding Sidebars

Our method is one of many, there are more elegant ways of accomplishing the same result without creating separate template files, but the method outlined here is simple and reliable. Please comment below if you have questions or run into trouble.

Your WordPress site needs SEO. Buy our WordPress SEO book at Amazon. Now in the second edition!

 

Tutorial: How to Remove link rel=’prev’ and link rel=’next’ from WordPress Head

/23 Comments/in /by

How to Remove link rel=’prev’ and link rel=’next’ from WordPress Head (in WP 3.0+)

WordPress, in its default state, prints a lot of excess code to the head section of webpages. One element that always annoyed me were two entries that always appeared:

<link rel='prev' title='' href='' />
<link rel='next' title='' href='' />

These entries are recommended for web usability for disabled persons–consider that before removing them. We were looking for a way to lean up our pages, though, so we thought we’d like to remove these entries. There are some outdated instructions in WP forums that will not work in WP 3.0; we tried several approaches, but nothing worked.

In your WordPress template, you’ll find your functions.php file. Open that file and enter the following line.

remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

This “filter,” as it is called, will tell WordPress not to generate the link rel=’prev’ and link rel=’next’ lines in the WordPress head.

Just a note on why those outdated instructions wouldn’t work with WP 3.0. The filter we created instructs WP to turn off the action titled “adjacent_posts_rel_link_wp_head.” Our commands works in WP 3.0 and above because the former action prior to 3.0 was titled “adjacent_posts_rel_link.”

 

WordPress Stripping iFrame Elements? Here’s the Fix.

/18 Comments/in , /by

Elements like Google Map embeds get stripped out. Here’s the Fix.

If you have ever tried to enter a Google Map embed into a WordPress page or post, you’ve noticed that switching between “Visual” and “HTML” view in the page or post edit window strips the iFrame out–leaving you with broken code that displays nothing. Luckily, there is a fix.

You’ll need to find the functions.php file in your active theme folder. It’s a standard WordPress file, so it’ll be there. Next, we are going to add two short functions that change the way the WordPress editor handles iFrame code. You’ll want to insert the following lines of code before the closing “?>”  of your functions.php file.

// this function initializes the iframe elements 

function add_iframe($initArray) {
$initArray['extended_valid_elements'] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
return $initArray;
}

// this function alters the way the WordPress editor filters your code
add_filter('tiny_mce_before_init', 'add_iframe');

That’s it. You can test your mod by entering some iFrame code in the editor window and switching between  the visual and HTML editor.

How to Insert Images into WordPress Posts and Pages

/4 Comments/in /by

How to Insert Images into WordPress Posts and Pages

Inserting images into WordPress posts and pages can usually trip up new users–we get asked about this a lot. Once you do it a few times succesfully, though, you’ll feel like a master. What follows is a quick and dirty overview of how to do it.

1. Open a New Post or Page, or Edit and Existing Post or Page

The first thing you need to do is to open a document to work on. In WordPress you can choose from posts or pages, and they both work the same way. Go to your WordPress dashboard and click on the left navigation for either posts or pages. When that navigation button expands either select “edit” or “add new’.

2. Upload Your Image

Next, you want to upload your image. When you have the Post/Page edit window open, place the cursor where you want your image to appear in the document. Then click the icon that appears at the top of the edit window, indicated by a red circle in the following image (it looks like a grey rectangle with a thin grey border around it):

Next, you will see that once you click the graphic icon for image uploads indicated in the picture above, the “add an image” dialogue box pops up, as shown in the picture below. You’ll note that in this picture the “from computer” tab is highlighted– but you can also upload from a URL. Today we will learn how to upload from computer. Keep in mind that once images are uploaded, resizing them or editing them is difficult or impossible, so you want to make sure your images are sized right before you upload.

Hit the “choose file” button and browse to where the picture is on your computer– just like you do with e-mail. Once you have the file selected, hit the “upload” button. Don’t close this window yet–you will enter parameters in the next step.

3. Choose Your Parameters

Once you have hit the “upload” button your image will upload (your image is now stored on your web server/web hosting), the “add an image” dialog window changes dynamically to show you a range of parameters. You can see a picture of the dialog window below:

I have highlighted the common parameters that are most important when uploading an image.

Link URL

First is the “Link URL”–this selection box fills automatically with the link location of the image file. If this box contains a URL (as shown in the picture, it is filled with a long URL), then the image will be a clickable link in your post. If this box is empty (you can empty it by clicking the “none” button just under the box) then your image will not be a clickable link. In most cases, you do not want your images to be clickable links, so I almost always hit that “none” button to empty that box.

Alignment: Left, Right, Center

The next parameter is “alignment”– you simply select the radio button for left, center, or right. Left and Right alignment will make your text wrap around the image; “none” means that your text will not wrap around the image.

Size

The last parameter is “size”– here you simply select the size, in pixels, for which you want the image to appear. As you can see in this example, I have selected a full-size image that is 560 pixels wide, and 492 pixels high.

Insert Into Post

The last step, once your parameters are set, is simply to hit the “insert into post” button–your image will be inserted into the post in the position where your cursor was when you upload your image.

If you have made a mistake, simply highlight the image, hit the delete key on your keyboard to remove it and start over.

4. Making Changes Later

Of course, this tutorial would not be complete if we did not at least brush on how to make changes later– and WordPress is pretty well set up to make edits to the way your image displays. See the screenshot below:

When you wave your cursor over the image in the document edit window, you will see two small icons appear–the icon of an image will bring up the edit window from step three–from there you can change parameters, like size and orientation left, center, or right. The second icon is the familiar “do not enter” symbol– clicking this will remove the image.

Good Luck!