Case 1: Plain Image

This one is pretty east starts with <img and then ends with />.

<img src="http://www.groverwebdesign.com/wp-content/uploads/2011/10/
add_pictures_to_wordpress_post.png" />

Case 2: Image with a Caption

This code set will be a little bit longer, but the same rules apply. Starts with [caption and then ends with [/caption]

[caption id="attachment_219" align="aligncenter" width="500"
caption="This is a Caption!"]<img src="http://www.groverweb.com
/wp-content/uploads/2011/11/wordpress-add-images-1.png" alt="Word
Tutorials for Bright Start" title="Grover Web Design Add Images to
WordPress" width="500" height="500" class="size-medium wp-image-
219" />[/caption]

Case 3: Image Wrapped in a Link (a tag)

This case is when your image is clickable into a larger image, there will be an “a” tag wrapping the image code. This one will start with <a and then end with </a>.

<a href="http://www.groverwebdesign.com/wp-content/uploads/2011/11/
wordpress-add-images-1.png"><img src="http://www.groverweb
.com/wp-content/uploads/2011/11/wordpress-add-images-1.png" alt="
Tutorials for Bright Start" title="Grover Web Design Add Images to
WordPress" width="500" height="500" class="size-medium wp-image-219"
/></a>

Case 4: Image Wrapped in Center Tag

Occasionally, you will see images wrapped in centered tags. These will start with <center> and end with </center>

<center>any type of image from above</center>

After selecting this button the “Add an Image” dialogue will come up. From here you will choose “Select Files” which will allow you to select an image to upload. Once you choose an image it will be uploaded and you will be brought back to the “Add an Image” dialogue with lots of options for your image. See image below.

This is a Caption!

This is where things get tricky… pay attention!

• Title – This is a descriptive title section that will be seen by search engines and very rarely by users. User’s only see it if they have images turned off… who does that? no one!
• Alternate Text – This is another descriptive section (when I am being lazy I just copy the “Title Section”) It is usually seen when you hover over the image and stay there for a second. Some browsers use this “alt text” and some use the “title”.
• Caption – The caption is text that actually gets put under the picture. Good if you want to put a clients name under a picture or a short description.
• Description – Another search engine only type of thing… I know annoying at this point. Use this if you want.. if not dont worry to much.
• Link URL – This one is kind of important. Use this if you want. I usually do not. If you do not want to use it make sure you select the “None” button to clear the link URL. A link URL is basically used if you want to show the image small on the page but want the user to be able to click the picture and see it full size. If your on the fence I would say select “None” and do not use it.

The dialogue is too long so I had to break it up into two images. This is good though because the second image is MUCH MORE IMPORTANT. Pay attention to the things in the second image!

• Alignment – IMPORTANT – set the alignment to what you desire. This is similar to what you would use in Microsoft Word or something like that… I say it is important because once you add the picture you would probably have to delete it before you could change the alignment.
• Size – VERY IMPORTANT – set the size of the image, remember the content area of your WordPress website is only 630px so if the width of your picture is greater than that then you are going to have some problems!
• “Insert into Post” – MOST IMPORTANT – Yes, it’s not really perfect here you would think “Save All Changes” would add the picture to your post but, nope! You need to make sure you remember to select “Insert into Post”
• You have now added an image to your post/page, click “Publish” or “Update” and go check out your work! Email me if you have any questions.

Donald Grover – Donny@GroverWebDesign.com

Here is a step by step tutorial on how to add testimonials to your Bright Start WordPress website. If you have any questions please email me at: Donny@GroverWebDesign.com

Adding Testimonials:

1. First, gather all your information for the testimonial. Suggested information is 1 to 2 paragraphs from the client and a picture. Preferably of the client with the SC or EI teacher!
2. Log-into your WordPress dashboard: Help on the Log-In
3. On the left hand side WordPress menu bar select “Posts” and then “Add New”
4. This will bring up a blank post page
5. Create a descriptive and hopefully keyword rich title, this would be a great place for “Geo-Specific” keywords (Midlands Child Recieves Great Service Coordination, or Aiken County Autistic Child…)
6. Fill in the content of the testimonial in the content area
7. IMPORTANT: on the right hand side under “Categories” make sure Testimonials is checked
8. If you have any add pictures, click on the picture icon in the “Upload/Insert” section (above the content box on the left side)
   
9. Select “Publish”
10. Go check your work
11. Back into the Post editor if you have any problems

This tutorial will show you how to create a new photo gallery and then post it to the photo section of your website.

First off, here are a couple things to remember. You should keep the amount of images in each photo gallery to about ten, because it flows good on the photo page (2 rows of 5) and so you dont burn yourself or your clients out. It’s better to have one photo set a month with 10 images compared to a giant 50 image photo set.

Also, you all need to be aware of the size of the images you are uploading to your photo galleries. Photo Editing with Gimp – read this… Important.

As a general rule, I base the size of images on the width. If it is a tall picture keep the width at 600px or less. If it is a wide picture the width can be up to 800px.

Add New Gallery

1. Select “Gallery” on the bottom of your WordPress Menu Bar
2. In the submenu that opens up select “Add Gallery/Images”
3. Select the second tab “Add New Gallery”, add a descriptive name, and then click “Add Gallery”

Upload/Add Pictures to your New Gallery

1. Back on the “Add Gallery/Images” section, you have two ways to add images: “Upload Images” or “Upload a Zip-File”. “Upload Images” adds them one at a time and is easier, so I will go through that method in this tutorial. If you can do this method and know what a zip file is, then I think you will be able to figure out that method!
2. Make sure you are on the “Upload Images” tab
3. First, set your “in to” location to be the new Gallery you just created
4. Then, click browse and navigate to the picture you want to add
5. You will see the picture name listed under the browse button, next you will click the “Upload Images” button
6. The image will upload and create thumbnails, then put you back to the screen where you can add more images
7. Repeat this process for all of your images, REMEMBER to set your gallery to ensure the images you add go into the right gallery

Manage and Customize Your Gallery

1. In the left WordPress menu bar under “Gallery” the submenu should still be open. Select “Manage Gallery”, then, select the gallery that you just created
2. This is the sort of home base for your gallery. You can add more pictures here or take some out
3. From this page please not the “ID” of your gallery – - YOU WILL NEED IT LATER
4. More importantly this is where you can add a description for your gallery and Titles/descriptions on each picture, this is good for SEO fill these with descriptive and relevant keywords
5. Click the save changes button after you complete all your additions/changes

Add a “Photo” Post

1. Select “Posts” from your WordPress menu, then select “Add New”
2. This will bring up a blank post template
3. First, set your “category” on the right side, select the checkbox next to “Photos”
4. Then, set a descriptive and keyword rich title on your post (this will most likely be very similar to the title of your gallery, I know a little redundant)
5. In the content area first put a paragraph about your photo set (again similar to what you wrote for a description on the gallery)
6. Remember your paragraph code

   <p>
     This is the description of your
     new photo gallery
   </p>

7. Then, add your gallery (remember that ID??)

     [nggallery id='2']
    

8. Lastly, click “publish” and go check out your wonderful work

Regardless, the USC symbols had to go. So, the oldest of old photo tricks was in need. Take those USC Gamecock logos out of the picture. I know I am not really a graphics guy but I think I got the job done.

Before

After – Click to see it full size (and judge me!)

Since this is a “Basic” level tutorial, I will go through editing a Static Text Widget. To keep this tutorial as basic as possible we will assume the widget has already been added and the only thing you are trying to do here is edit the content of the text widget.

First, you need to log-into your WordPress dashboard. Then locate the “Appearance” section on your left hand WordPress menu bar. If it is not already expanded hover “Appearance” and click on the down ticker. This will show more options, where you will select “Widgets”. See the picture to the left for a visual.

Once you get to the widgets page you will be a little overwhelmed at first… widgets everywhere. Calm down. Just look at the picture below, click it for full size! Left side is the normal WordPress Menu bar, middle is the available widgets (for when your good enough to add new widgets!), and the right side is the widget areas of your website. The thing you want to pay attention to is the right side, widget areas. If you have a good developer (Donald Grover) they will be descriptively named, like the ones in the image below!

OK, now your comfortable with the widgets page. Now, click the down ticker to open up a widget area. This will show the widgets that have been added to them, click the down ticker again to open up a widget. See the picture below for an example. You will see on the top of the widget there are different sections the only two you should be concerned with are “Content” and “Title” remember KISS (keep it simple stupid!)

From here just make your text edits and click save. Have another tab open with your website, go over to it and click refresh to see your wonderful work!

Thank you for your time and please contact me if you have questions or just leave a comment below.

I am going to make this as simple as possible. The only tags you should really need to know and use are:

<p>, <ul>, <ol>, <li>, <h1>, <h2>, <br />, <em>, and <strong>

The Paragraph Tag – <p>

Yes, it is that simple just wrap paragraphs in these simple little tags. See example:

<p>
 This is the content that you will type. You just write
 normally after using the simple paragraph tag.
</p>

List Items and Ordered/Unordered Lists – <li>, <ul>, and <ol>

These are a little harder than paragraph tags but still pretty simple. To make a bullet list you will use an unordered list nested with liste items. Example:

<ul>
  <li>This is the first list item.</li>
  <li>This is the first list item.</li>
</ul>

To make an ordered list (numbered!) just use the <ol> instead:

<ol>
  <li>This is the first list item.</li>
  <li>This is the first list item.</li>
</ol>

Heading Tags – <h1>, <h2>, … <h6>

The heading tags are used to represent various forms of a heading ranging from 1 most important (biggest and boldest) down to 6 (almost the same as regular text). Please see the examples below:

<h1>This is a big h1 heading</h1>

<h2>This is a medium h2 heading</h2>

The BR and HR Tags – <br /> and <hr />

These tags are a little different. The do not come in pairs, they are just one time shoppers! A <br /> tag simply puts a carriage return or break in your page. The <hr /> tag puts a carriage return and horizontal rule (line) into the page. These examples are a little more involved… because your a master by now!

<p>
  This paragraph<br />
  broken up onto two lines
</p>

** Try not to use these tags too much. I almost didn’t put them in because they mess people up. 99% of the time you will not need a <br /> tag, just let the words naturally flow to the next line. The <br /> tag is like a brute force line breaker.

<h1>Heading with horizontal rule after it</h1><hr />

Italic and Bold Style Tags – <em> and <strong>

I am ending off with another easy one here because I am sure your brain is fried! The <em> and <strong> tags wrap around words to give them italic and bold, respectively. See the examples below.

<p>
  This paragraph has <strong>bold text</strong>
  and <em>italic text</em>.
</p>

Once logged-in, navigate to your pages list. On the left hand navigation menu, select “Pages”. This will bring up a list of pages on your WordPress site. Scroll through and find the page that you wish to edit, select it to bring up the editor.

One important thing to remember on this page is wether you are in “Visual” or “HTML” mode. These tabs are located in the top right of the content area. I, obviously, suggest “HTML” mode and think that all clients should learn the basic html tags for a better experience with your WordPress blog. If you really do not feel comfortable with HTML mode click on the “Visual” tab to use a WYSIWYG (What you see is what you get) style editor.

All new browsers are tab enabled. Whenever working on a WordPress Page, I have the editor in one tab and then the live site in another. At any time you can click “Publish” or “Update”, switch tabs, and hit refresh to see the fruits of your labor.

If you would like to learn about the basic HTML tags that you would use while editing a WordPress page please visit: Basic HTML Tags for Amateurs.

Log-in Link Example

Each WordPress website will have a semi-hidden “Log-in” link usually in the footer of the website on the right side (example in picture to the right). Click this link to take you to the Log-in page. If you do not see the link, then you might already be logged-in. Currently, when WordPress is logged-in you will see the dashboard menu bar at the top of the browser. Please see the image below for an example.

WordPress Menu Bar Example

Your company contact to Grover Web Design should have the log-in username and password. If no one in your organization has the log-in information, contact Donny@GroverWebDesgin.com.

The meta description is used here to display what the page is all about to people on Facebook when someone shares your link. This is very powerful and can make a different between someone clicking to your site or not.

You can google around for more information on SEO and the best practices. Here is a good page describing meta tags: Search Engine Journal – Meta Descriptions