Website User Guide
For WordPress Websites Implemented
by MJ Penner Consulting
Visual Editor
This is where you write and insert images into posts and pages. It is shown below.
Site Administration Overview
When you first login, you arrive a dashboard, a portion of which is shown below.
This is called The Dashboard, and it gives you a high-level statistical overview of your website. In the
left column (starting with the ALL IMPORTANT Posts area) are links that give you access to areas of
your website where you can do work. You will be mostly concerned with Posts, Media, and Pages
sections.
Basics of a Post
In the left column is an area called “Posts”, and beneath this are the links “Edit”, “Add New”, “Tags”,
“Categories”, and “PostLists”. By default, when you click on “Posts”, the link called “Edit” is selected.
In the screen shot above, you can see it is selected because it has a notch to the left and a shaded
grey background.
Lets take a look at a post. A post for each category in my website has
been created for your convenience, to get you started. So, to open a
post do this:
1. Float your mouse over the Post Title, Abby’s Appliances.
2. A small submenu will appear. Click on “Edit”.
NOTE: That submenu also contains other options, such as delete.
The screen below will now appear. Notice the two tabs, “Visual” and “HTML”. Make sure the
“Visual” tab is selected.
Where it says “company details” is the area where you will create the content for your post. The
tool bar above this area that has buttons for Bold, Italic, and Strike-thru text contains a variety of
formatting tools for writing and editing, including inserting images, which we will cover in-depth
later. Though this may feel very much like working in a word processor, it is not. You are working
with web code, but you are doing it using a visual (instead of code based) interface. You will need
to learn a few things about HTML, but not much, in order to really make this work well.
In the image on the previous page, toward the bottom of the screen shot, is a section called
“Excerpt”. Excerpts are displayed on some screens so that people can get a summary glance of
your post.
In the lower right corner you will also notice the
Categories area. This Post is currently assigned to the
Category “Appliances”. Therefore, the post will appear
in the Appliances directory.
Any post can belong to more than one Category (and
therefore more than one Directory), making it possible
for people to locate a business that solves problems in
many areas.
PostLists
While I will not cover the details of creating / managing PostLists, it is important to understand the
capability this Plug-in brings to your WordPress website. PostLists allows you to create a page where
a list of posts will automatically be displayed that belong to a specific category. In pennertesting.com,
click on the Appliances page and you will see some posts there. Their titles are clickable to open up
the post details, and the post excerpt appears below the clickable title.
Categories
Categories are essential to the organization of posts. A post can belong to one or more categories.
The left rail of pennertesting.com shows the most common way for people to access posts. In area
03 are links such as “Appliances” and “Articles”. These are categories. If you click on one of them, all
the posts assigned to that category can be viewed.
Creating a Post
1. Select Posts…Add New
2. Type in a headline for the post.
3. Type in the all the detail you want. You can also insert a company logo here. You could insert
a movie, audio snippet, or even create a two-column layout (with a bit more training) and really
spice it up.
4. The excerpt that will appear on pages that use PostLists.
5. Assign the appropriate category
6. Click the Preview button, and then if satisfied click
Publish. If you make a mistake, you can always use the
Status Edit link to return the post to Draft status, thus
removing it from view of the browsing public.
The Power of the Publish Panel
Tucked away quietly in the upper right corner of your Editing
screen is a very powerful set of controls known as Publishing
Controls. The nature of these controls will change based on the
status of what you are working on.
For instance, notice the Save Draft button in the upper left corner
of the panel. Also notice that the Status field (right beneath it)
shows a status of Draft, with a blue Edit link next to it. This is the
typical configuration of the Publish Panel when something is in
draft mode. Click the Publish button and you will see how things change.
The Status and Visibility fields both have blue Edit links next to them. In the current version of the
site, only the Status field really does anything useful. You would use the Status Edit field to “unpublish” something, thus removing it from view of the browsing public so that you can work on it in
draft mode. To do this, you just need to know that the Publish Panel provides you capabilities that
are appropriate for the status of the post.
So, if you click on the Status field’s Edit link, a drop-down field will be revealed. The contents of this
drop down field depend on if what you are working on has a current status of Published or not.
If your article (post or page) has NOT yet been published, then it is a Draft (shown as Status: Draft).
The dropdown field will therefore show you the Options of Draft and Pending Review. Why do these
matter? Well from this page it is not apparent, however, when you go back to list all your posts you
will see that there is a statistics area that shows the status of all your posts. I’ve highlighted this in a
red box below.
It may be the case that as you are creating Posts but you need to have someone else provide the
final approval. Or perhaps you've got someone else creating the posts but you must have the final
word of if it is ready to Publish. Whomever the Editor In Chief of your website is, that person would be
interested in seeing everything with a Pending status. By clicking on Pending Review above, the list
would be filtered only to those Posts.
From Draft to Published, and Back Again
Whenever you click the big blue Publish button, your Post is live.
Once your post is live, the Publish button turns into the big blue Update Post button.
So now whenever you make a change to the post, like adding a picture or modifying the text, you will
need to click Update Post to move that change live. If you don’t, you will lose those changes.
But maybe you decide that Publishing the post was a mistake, or perhaps there is another
reason that you really need to remove that post from public view, though you do not want to delete it.
The method of choice here is to un-publish it. That is, to set back to draft status again.
Your Publish Panel should look like this:
Next to Status: Published is the blue Edit link. Click on it, and from the drop-down box select Draft.
Now click the OK button, and then click Update Post.
The post will be reset to Draft status and no longer visible on
the website.
This method is preferable to using the Visibility feature for
reasons related to how the site is built.
Using Media in your Website
Every Post will most likely require some sort of a logo or image to be placed into it. In most cases you
will want to keep logos up on the server in the online media library. These steps assume that is the
case. The most common task you will perform using Media is inserting the “L” graphic for indicating
that contractor is licenses. So this tutorial will use this scenario.
NOTE: My thanks do Don Searcy at www.insidethepropertyline.com for allowing me to use this
portion of his website's user guide for this general user guide.
Uploading Media
For reasons of file management, I suggest uploading any images into the Media Library first. This is
up to you. You can certainly upload images into a post directly from your hard drive while you are in
the post's Edit Window. Over time, you will develop your own preference. This tutorial is built around
my preference. (continued...)
(adding media continued)
1. Select Media…Add New.
2. From the resulting screen choose Select Files
3. Browse your computer until you find the file you want, then upload it.
4. When the upload is done, a screen will appear offering you several fields that you can populate
such as Title, Caption, and Description. Do nothing with them. Click Save All Changes.
5. You are now forwarded to your Media Library, and your image is in the list.
Inserting Media in a Post
In this example, we will assume you wish to insert the “L” graphic into a post, and that the image has
already been uploaded to your Media Library. Lets also assume you wish the “L” to be on the left
side of the page, with text alongside the image.
1. Place your insertion point to the left of the first line of text. In this
example I actually put an extra space before the “S” in “Safe” just so
I can better see what I’m doing.
2. Click the Add an Image icon, shown here boxed in red.
3. Choose the Media Library tab, and then select the desired image by clicking on its Show link
on the right side of the list.
4. At this point you have some options:
a. If you want this image to link to a website, enter the website address (such as
http://www.google.com) in the Link URL file.
b. Select the desired alignment in relation to text. The selection above shows “Left”, so it
will appear to left of text, with text wrapping around it.
c. Decide if you want to use the full size of the image, or if you want to resize it. For best
quality, always accept the default, “Full Size”.
5. Once you are ready, click on Insert into Post
The result is shown below. Next we need to insert the “L” into the Excerpt field.
Inserting Images into the Excerpt Field
You will need to copy/paste the HTML code generated by inserting a graphic into the editor screen
as discussed in the previous section. When you inserted that graphic, you did it using the Visual
tab, not the HTML tab. But now you will need to switch to the HTML and grab the code. You don't
need to write any code, you just need to recognize it and copy / paste it.
1. Click on the “HTML” tab in the Editor.
2. You will see a screen that looks similar to the one shown below. I have selected the text you
need to copy.
As you can see, any image HTML starts with <img
(using CTRL+C is the best way) the image code.
and ends with /> So, highlight, then copy
3. Scroll down your screen until you see the Excerpt field. Position your insertion point in that field
where you would like your image to appear. Then paste the code in (my preference is to use
CTRL +V). The result will look similar to what you see below.
4. You will need to publish the post to see how this looks on screen because you need to see
how the image looks when the Post is listed and when you are drilled down into it.
Creating A Text Link to Another Website.
1. Highlight the text that will become the link.
2. Click on the Link button.
3. Type in the address of the destination website.
4. If you want the link to open in a new browser tab or window, select “New Window” from the
Target field. Otherwise, just click UPDATE.
5. Back at the Visual Editor, you can see that your new link has been created.
Creating an Image Link to Another Website.
1. Click on the image. In this case we're going to use the “L” graphic.
As you can see, two small icons will appear. The Red Cross-out Circle and the Edit Image
Square next to it. Click on the Edit Image Square.
2. The resulting screen provide edit controls for images. You are interested in scrolling down the
screen until you see the field Link URL. Type in the desired web address and then click Update
Now your image is linked to the target web address.
If you want to have the link open a new browser tab or window, then perform the steps above,
except before clicking update:
1. Scroll back to the top of the screen and click on the “Advanced Settings” tab.
2. Scroll down the bottom of that screen and click on the check box “Open Link in New Window”.
3. Now click Update.
Insert or Updating Audio
Your website has the capability to play audio files using a unique Media Player embedded right on
the page. Lets take a look at what you will need to know to manage the audio in these areas of
your website. You will be using copy / paste (ctrl + c / ctrl v) for this operation and you will be
looking at HTML code I have already setup for you.
Your Media Players are “wrapped” in code that causes the surrounding text to wrap around the
Media Player. This approach is standard on the web and is used throughout your site. So, once
you see how to do this, you will always be able to repeat the approach.
The Code
Lets edit a post that has a Media Player embedded in it. Once you have the post ready for editing,
switch to HTML view.
Scroll down the Edit screen until you see a line of code that starts with this:
[mp3player
This “tag” is surrounded by code, similar to what is shown below:
This block of code starts with <div style= and it is this “div” tag which creates a container around
your Media Player. The div tag ends with the code </div>. Everything in between these two tags is
“contained” within the div.
OK, so why do you need to know this? Well, you will not be doing anything to the div tags, but it is
important you know they are needed in case you want to copy / paste all of this into a another post
where you need the Media Player. I've set this up for you so you can simply copy / paste.
Now onto the interesting part. Lets tell the Media Player where to get it's .mp3 file from.
Using Your MP3 File In Your Media Player
In the code block below notice these lines of code:
[mp3player width=150 height=100 config=fmp_jw_widget_config.xml file=/wpcontent/uploads/2010/01/ss05142008.mp3]
That is actually the statement which tells the Media Player where to get your .mp3 file from on
your web server. Its similar to the path to a file on your own PC, only this is how it looks when your
targeting a file on your web server.
Previous to this you must upload your MP3 file into your media library, or it won't exist on the
server and there will be nothing for the code to find.
This line of code, within the above line of code, is the path to your .mp3 file:
file=/wp-content/uploads/2010/01/ss05142008.mp3
And the file itself is ss05142008.mp3 Notice the path leading up to your .mp3 file includes the
date the upload occurred. This is the 2010/01 segment of the code. It means that on January 1st
2010 the file was uploaded. WordPress organizes your media files on your server into folders that
are named by the date on which the upload occurs. This makes it easy for you to figure out what
the path should be. If you know the path and the file name, all you need to do is type that into the
path, overwriting what is currently in that segment, and you are set.
What if you don't know the file name or the path? Fortunately, WordPress can show that to you
right from the Media Library.
Go to your media library and locate the audio file in question. To filter by Audio Files, you can use
the “Audio” link at the top of the list.
NOTE: If I have uploaded your audio files directly to your server you won't see them listed here. If
that's not good, just let me know.
Once you spot your audio file, click on its EDIT link. (continued on next page)
Your screen should have an area in it, toward the bottom, like the one below:
Notice the field above the words “Location of the uploadedfile”. You want to copy / paste this code
into path we discussed above. However you don't want to grab the entire line. You only want to
grab the segment of the path that corresponds with the segment you are replacing. For example,
your path in our example on the previous page is:
/wp-content/uploads/2010/01/ss05142008.mp3
So in the screenshot above you would want to start selecting text starting at /wp-content. Make
sure to grab that slash symbol ( / ) just before the phrase wp-content.
Now paste that line into your path in the post you are working on, replacing the old segment with
the new, update the post, and view it in a browser to make sure you got it right.
NexGen PhotoGallery Enhancement
Please read this entire carefully. I know it's a bummer to read lots of intro text, but this is important
stuff.
If you've requested the ability to artfully display photo galleries on your site, then you've got
something called NexGen Gallery installed. This is a very sophisticated, safe, and stable
enhancement which provides a fast loading, Flash Media based photo gallery. Most importantly,
it's easy to use the basic features. This user guides covers the basics...which are pretty cool!
Let's use what I've already setup for you as the model you can follow going forward. My thanks to
Don Searcy at www.insidethepropertyline.com for allowing me to use his configuration as the
model. Don's site makes heavy use of this enhancement, and just uses the basic features.
File Sizes and Quality
Images are another dimension of web design that differ drastically from the print world.As I've
probably told you in our meetings, anytime you are updating content yourself you are doing light
web design. If you're familiar with inserting images into PowerPoint, Microsoft Word, or
OpenOffice.org you'll find none of that knowledge useful here! I say this to prepare you with an
open mind. Here's what you need to keep in mind:
1. Keep image file sizes below 100K. Although you can upload file sizes up to 2mb (or more if
we've had to setup your server to allow it), the time it takes to load a page increases dramatically if
you use images larger than this.
2. Keep file size width and height no greater than 400px on the longest side.
Given the above, you're going to need to learn two things:
3. How re-size an image prior to uploading it.
4. How to crop an image if it's just too large and contains extraneous areas you don't need.
Number 3 and 4 are often the stumbling blocks for beginners. The programs on the market that can
do this best are PhotoShop, Fireworks, and Google Picasa. Picasa is free from google.com,
PhotoShop and Fireworks are not. My recommendation is Picasa unless you are going to be doing a
LOT of professional image modifications. Using the re-size and crop features of these tools is outside
the scope of this user guide.
OK, lets get to it!
Step 1: Create an Image Gallery
In the left rail of your Dashboard, toward the bottom, click on Add Gallery / Images.
Step 2: Give Your New Gallery a Name
In this case, I am calling it art1. Now click Add Gallery.
Step 3: Now click on Upload Images
Step 4: Select the Gallery that will receive the images.
Step 5: Upload Your Image
Click on the Browse button and selecting an image. Once you have selected your
image, click Upload Image.
NOTE: If you wish to upload a zip file containing multiple images, choose the “Upload
A Zip File” screen, instead of this one. Keep in mind that your server may not be set to
receive files larger than 2mb. If your images are each less than the recommended max
file size of 100K, you should be able to get about 15 images into a zip file and upload it
without hitting the max file size barrier.
Step 6: Now click on Manage Gallery
Step 7: Gallery Overview
From the list of galleries, select the one you just created. In this case, art1.
Step 8: Picture Details
Once inside your gallery, you will be presented with the page shown below. Scroll
down the screen until you see your pictures listed, and review them to make sure they
are what you want.
Excluding an image, but keeping it in the gallery database, is accomplished by clicking
on the Exclude check box to the right of each image, and the clicking Save Changes at
the top or bottom of the list.
If everything looks OK, you don't need to do anything on this screen.
Step 9: Embed the gallery in a page or post.
Open a post or page for editing and prepare a new line to receive a snippet of code
which you are going to place on the page. The code snippet will include the numeric
identifier of your gallery. This ID is displayed on the Gallery Overview page (see screen
shot for step 7). In this case I wish to place the art1 gallery on a page. It's Identifier is 1
(shown in the ID column). So, below shows the code snippet I would use:
If you wish to display the gallery as a slideshow, replace the word “gallery” with
“slideshow” in the code snippet.
Step 10: Evaluate the Results
You should evaluate the results in FireFox 3.5, Internet Explorer 7 and Internet
Explorer 8 if you wish to assure a consistent experience for visitors to your site. These
are the top three browsers as of this writing.
Notice the two orange links in this screen shot “Show as slideshow” and “View with
PicLens”. The PicLens option is very appealing to FireFox users that have the popular
PicLens plug-in.
Moving Content from Microsoft Word or OpenOffice.org into a WordPress
Page or Post
Word processors are not web posting tools. They use their own hidden code to format the pages you
create. While you can create some pretty cool layouts in these programs, they don't produce results
that are always portable to the web. The internet uses a special language to format text and pages
called HyperText Markup Language (HTML). This is a universal language that all browsers
understand. Word processors don't do a very good job of translating what you do into HTML, so the
results can be unpredictable if you attempt to copy / paste from a word processor directly into
WordPress.
I mentioned that if you are willing to learn new things you can get a lot of power over your website.
For better or worse, you are in fact engaged in light web design anytime you work on a page in
WordPress. WordPress uses the Visual Editor, which you are by now familiar with. However, it can
only do so much to shield you from the need to know some HTML code in order to provide consistent,
predictable presentation results to the big three browsers of Firefox and Internet Explorer 7 & 8. To
make matters worse, these three browsers interpret HTML differently. As of this writing FireFox is
considered a “compliant” browser, while Internet Explorer is considered a “non-compliant” browser.
As you can imagine, the label “non-compliant” is NOT a compliment.
Even if you don't use one of the word processors mentioned in the title of this chapter, the procedure
is the same.
Quick commands to know:
CTRL + C = Copy (hold down the CTRL key and then hit the X key)
CTRL + V = Paste (hold down the CTRL key and then hit the V key)
Now that you have a system which allows you to write and publish your own content, my advice is to
stop using your word processor for composition as soon as possible. Otherwise you will be faced
with the somewhat tedious task of transferring your content every time using the steps shown in this
section.
Here's the Mantra: “The web is not a word processor”. FireFox is not Microsoft Word. It is a browser.
Internet Explorer...same idea. Learn it, live it, be one with it, lest chaos and evil reign over your
website all the days of its life.
Using WordPress's “Paste from Word” feature
Your results may vary...wildly...but some people have learned through trial and error how to get the
most out of the “Paste from Word” feature.
Step 1:
Highlight the text you wish to copy, then hit CTRL + C. Nothing will appear to happen, but you have in
fact copied your selection into memory.
Step 2: Position yourself in WordPress where you wish to past the text.
Step 3: Click on the “Paste From Word” icon.
Step 4: When the following screen appears, follow the directions it displays
Step 5: Evaluate your results.
You should evaluate the results in FireFox 3.5, Internet Explorer 7 and Internet Explorer 8 if you
wish to assure a consistent experience for visitors to your site. These are the top three browsers as of
this writing.
NOTE: Creating bullets in HTML can be somewhat tedious, and the Paste From Word function often
works best for this purpose if the bullet formatting is simple....no images in the bullets, font colors,
different font sizes, or underlines.
Recommended Approach to Paste Content from a Word Processor
This is going to seem a bit tedious at first, but once you get the hang of it you will fly right past those
using the Paste from Word feature who must now wrestle unexpected results (sometimes) in the big 3
browsers.
This approach will not copy images. The internet requires images to be stored in the Media Library
and then inserted on the page later. Please see the chapter Inserting Media to learn how to do this.
QUIRK ALERT: WordPress always strips out multiple Return key spacing between lines of text. If
you hit the return key several times to insert extra spacing on your screen, then when you Publish or
Preview your work, those extra Returns will be removed.
Step 1:
You are going to open up your Windows Notepad (Mac users open the equivalent) because this
program is going to be the middleman. It will automatically strip out all the unusable hidden formatting
code that comes over during a copy / paste from a word processor.
Step 2:
Switch to your word processor and copy your text into Notepad. I suggest you take this slow at first,
copying only one paragraph to begin with. Do not copy any bullet lists. (covered in next section)
Step 3:
Now copy the text in Notepad and paste it into WordPress.
Step 4:
Now add text formatting such as bold, italic, underline and so on.
Copying / Pasting Bulleted Lists from a Word Processor
If you haven't been convinced by now to stop using your word processor for composing content that
will go into WordPress, then this section should do the trick. Bulleted lists can be really hard on the
patience when pasting them from a word processor. Here is the best way to do it, but it is not a lot of
fun.
1.
Copy and paste your bullet list into Notepad. Immediately you will notice a problem. Lots of
space between the bullet (or numbered bullet) and the sentence. You need to remove this space
manually on each line, including the bullet. This might not be a problem if you are using
OpenOffice.org, but Word 2007 definitely has this issue as shown below.
2.
After removing the space and the bullets, your screen should look like this:
3.
Now copy / paste into WordPress.
Step 4: Add bullet formatting
Highlight all the items that will become bullets and click on the Bullet icon (ordered list or unordered
list)
Step 5: Review the results
Hmmm. Not ideal. Notice that only the first item took the bullet but the others did not on subsequent
lines. This is because of the way HTML works. You're going to need to make some small adjustments
to fix this.
Step 6:
You need to delete the space between the top line and the line below it, bringing both lines into the
same sentence. You can use the delete key or back space key, whatever works best for you. But you
want your screen to look as below:
Step 7:
Once you have that done you need to reverse course, and hit your Enter or Return key to pop the line
back down again below the first line. This action will clarify to WordPress where the first bullet ends
and the next begins.
Step 8: Sub-bullets
To create an indented sub-bullet list beneath an existing bullet, place your insertion point on the line
to be indented and then click on the Indent icon.