WordPress 102: Adding New Pages

The majority of the tutorial will cover this area of your site. There is a lot more that you can do with a WordPress site than what we will be discussing here, but to avoid overwhelming you, we will just try to cover the basics.

The first thing you should do is create a new page to get accustomed to the way the WordPress software works.

You may have noticed by now, but there are often several ways within the WordPress module to do the same thing. The repetition is for ease of use, not to confuse you. If you are more comfortable with adding a new page by the link in the sidebar under Pages > Add New, you can use that. If you’d prefer to open the Pages screen by clicking the word Pages in the sidebar, checking to be sure the page doesn’t already exist, and pressing the “Add New” button at the top of the screen, it will do the same thing.

Once you go to add a new page, by your preferred method, you will get presented with a page like this:

If your site was last accessed by someone who knows code, chances are, the Add New Page will show the HTML editor view. Select the Visual tab in the top right of the editor box, and your screen should be set up very similarly to how it is in the screenshot above.

The buttons available to you in the visual editor may be different depending on the setup of your buttons in the Tiny MCE Advanced section, under Settings in the sidebar. If this section is not available to you, ask your project manager and they will allow access to it in the WordPress Dashboard so that you can customize the buttons you may want in an order that makes sense to you.

The text you type into the Title Bar at the top of the center column will do two things – it will determine the name of your page in the navigation, and also determine the name of the link. If you type “About Us” into this area, visitors to your site will see About Us show up in the navigation bar. The name of the page, for other linking purposes, will then be: http://your-link-name.com/about-us/

The large text area box is where you will be adding in all of your content. I will go over this more later.

If you look at the Attributes section in the right-hand sidebar, you will see two things that I’ve highlighted in the picture above: Parent and Exclude Pages. Parent determines where in the navigation the page will fall. If you don’t have an About Us page and want it to appear on the main navigation bar, leave the Parent section as Main Page (No Parent). If you already have a page called About Us, for example, and you want to add something like Our History as a drop-down link in that category, you will choose “About Us” as the parent.

If you want to create a page that doesn’t show up in the navigation bar at all, un-check the Include Pages in User Menus under the Exclude Pages section. This is helpful if you are creating many sub-pages for your site that you want to link to eachother, but don’t want them to appear in the navigation.

Now, on to the more detailed edits that you can do to your text. If you are in the Visual editor, you should see a series of buttons very similar to what I have in the picture below. (Remember that yours may be set up differently than what is shown here, depending on the options that are chosen through Tiny MCE Advanced.)

If you have worked with programs like Microsoft Word or Open Office Writer, or created emails that have formatted text and images, many of the above buttons should be familiar to you already. If you hover over these buttons with your mouse cursor, you will see a more detailed explanation of what each button does.

As with above, these buttons will only be visible to you if you are on the Visual tab of this screen.

First, press the blue square box in the top-right under the word Visual. This expands the editor to full screen so that you can more easily see what you are doing when you are creating your pages. To the right of that box, you will see a button with several rows of colored squares. This is the Show/Hide Kitchen Sink button. It will allow you to see all of the editing options available to you, and not just the ones that have been chosen by default in the Tiny MCE Advanced settings.

The Upload/Insert series of graphics will allow you to add Images, Movies, Music, and Media, in that order. Images can be files of any default image type, such as .jpg or .png. Movies work best with .avi files. Music works best with .mp3 files, but you should avoid adding too many music or movie files to avoid slowing down the performance of your site’s pages. The Media files can be anything from .pdf documents to .doc forms to .zip files.

When you click the Add an Image button in the Upload/Insert section of the visual editor, a pop-up window will appear with the above options. You will normally be adding photos that are already on your computer to your site, as linking to images on other sites, or “hot linking” is generally very discouraged in the internet community. Press the “Select Files” button and navigate to where the image is saved on your computer.

Once you choose an image and press “upload”, you will be presented with a series of options for that image:

When you are done selecting the options that you want set for your image, press the Insert into Post button, and you will see your image on your site. Once the image is placed, if you wanted to change any of the options you picked above, or if you wanted to adjust additional attributes of the image, select the image with your mouse cursor. You will see two buttons appear above the image:

If you press the Edit Image (left-side) button, you will be presented with the same pop-up window that you used to add the image attributes when you uploaded it to the page. There is also now an “Advanced” tab on the pop-up window. The Advanced options are mostly CSS style formatting choices, but they include things like margin, spacing, border, image size, class, and style. You are also now presented (on both the regular and advanced tabs) with the option to resize the image by a percentage. This will not change the actual file size of the image, but just the appearance of its size. You can go up to 150% or down to 40%, and this can be done multiple times to adjust the image exactly as you want it.

The Create Link and Remove Link buttons will be grayed out until you have selected text to turn into a link within the main content text area. Let’s say you had the text “Wikipedia” in your content, and you wanted to make the word “Wikipedia” a link back to their website. Take your mouse cursor and highlight the word “Wikipedia” and select the first chain link button for Insert/Edit Link.

In our example here, since you want to link “Wikpedia” to their website, you will put their address in the Link URL box. The only other option here that you really need is the Target drop-down. If you have the link open in the same window/frame, it will open the link above your website, effectively directing traffic away from the page the user was on. You only want to do this with internal links on your site. All outside links, like the Wikipedia link in the example above, should be opened in a new window. The other options aren’t really anything you need to worry about. Once you have the link options set, press the Insert button, and the highlighted text will now be a link.

If you linked the wrong text, simply highlight it and press the Remove Link, or broken chain button. If you want to change the link, select the text and press the Insert/Edit Link, or connected chain button.

Once you are done with all text, images, tables, etc., it’s time to see how your page looks!

In the right-hand sidebar of the editor screen, you will see a box with the Publish heading. (If the sidebars are not visible to you, remember to press the blue square or Toggle Fullscreen Mode button to go back to the Dashboard from the fullscreen editor window.)

Always, always, always Preview your site before publishing it. If you have pasted text into your page from Microsoft Word or from another website, it is highly likely that you also copied code into the HTML of your site that could make things look differently than what you were expecting.

Preview allows you to view your new/edited page in another window or tab without overwriting the old page or publishing it to the world.

The Save Draft button allows you to stop working on a page and pick up from where you left off at a later date.

The Publish button is the only one that will make your page visible to the outside world. Once you press this button, your page is now “live”. This can be changed later in the Quick Edit options from the Pages screen.

Click here for more WordPress tutorials.
Share and Enjoy:
  • email
  • Facebook
  • Twitter
  • LinkedIn
  • MySpace
  • Google Bookmarks
  • Google Buzz
  • Tumblr
  • del.icio.us
  • StumbleUpon
  • Digg
  • Reddit
  • Yahoo! Buzz
  • Add to favorites
  • RSS
This entry was posted in Uncategorized by Jackie. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>