Creating Website Pages & Blog Posts

Posts

Entries in this area are posted to the blog on your website. If you don’t have a blog page you may not need this section in WordPress, you will use pages instead. If you do have a blog this is where you go to make new entries or edit existing posts.

When you go to Posts the landing page has all of your current posts titles, it tells the author, the category it was posted in, and the tags you added to the entry. Roll your mouse over the title and you will see options to make a “quick edit, edit, trash or view.

    1. Quick edit- has a smaller preview with all the areas you may wish to edit quickly in full view on the screen. This is a great to use when making chagnes on multiple pages, setting up parent pages for sub-page navigation, turning off comments on specific pages, etc.
    2. Edit – has the title, body, full WYSIWYG editor, in expanded view.
    3. Trash – deletes the post completely.
    4. View – allows you to look at the post as it appears live on your blog.

graphic showing where quick edit, edit, trash and view are located

You can select the posts you want to edit by clicking on the box in front of them. The bulk action drop down box at the top of the dialog box allows you to trash or edit all of the posts you have selected (those which have check marks in them).

Categories

Before you start adding a lot of blog entries, try to determine the categories where your posts should be applied. The default category is blogroll but you can create as many categories as appropriate to your content. For instance for this sample site we have set up blog categories for student hand outs, presentations and social media. We could add more, like student samples, WordPress updates, WordPress templates, etc.

Tags

The words you have included in your post that may be used in searches. By identifying them before you add your blog post it helps anyone searching for those keywords find the posts that reference them easier.

 

The following Instructions cover both Posts and Pages

Add New Post or Add New Page

By creating pages instead of just posts we get into using WordPress to be more than a blog and actually building a website

Title – Enter the title you want people to see when they visit your website – this is viewable on screen live. Keep in mind the title of your blog posts is what comes up in searches most. Take some time to come up with a title that is clever or that would be a search term for your topic. For instance if you are sharing information on how to create a website you might title it: Tips on how to create a website in one day, or How to create a website for free, etc. Think in terms of how people may search for this content – title it that way and your entry will come up higher when people search that way.

When you title your Page post, this title should be short because it will be added to the page navigation of your website. For instance this page is titled ‘Blog Posts and Website Pages’ the following graphic shows how it shows up in the navigation at this stage.

 

WYSIWYG Editor (What You See is What You Get): 

Graphic of the what you see is what you get editor without expanded  kitchen sink Above is a sample of the basic wysiwyg editor, without the kitchen sink! The small circle shows what you click to expand the editor to have more styling options. The large circle in the sample above is what you will click to ‘upload/insert’ media. Use this area for all media including; photos, audio, videos, and image files.

 

Below is a sample of an expanded wysiwyg editor with the whole kitchen sink showing.

what you see is what you get editor graphic (WYSIWYG editor)

Descriptions of the Highlighted Actions in the WYSIWYG Editor Above:

Bold and Italic – highlight the text you want bold or italic and move your mouse to click on the B or the I in the editor.

Upload/Insert – see further down.

Flush left – select your text that you want to be aligned on the left of the page.

Center Text – centers all the text (and media) you have selected in the box.

Flush Right – Aligns your copy on the right side of the page, select all your text and then click on the icon in the editor.

Justified Text –  in the second row between the U (underline) and the A (colored text).  is the command to force justify your text. Justify forces your text to align with both left and right ends. Be careful, the web doesn’t alway break words properly and may stretch out your line of text and make it difficult read… plus make it look could look bad!

Text color -Highlight your text that you want to have another color and click and choose the color you want. BE CAREFUL! Don’t go crazy with the colors! Use of too many different colors turns into a distracted unprofessional mess. Try and use just two or three colors that match the look and feel of your website.

The ‘Paste as Plain Text’ and ‘Paste from Word’ icons as explained previously. Clicking these prior to placing your text in the content box will launch another window. Paste your text in the pop up box and it automatically populates into the main copy box. that you then paste your copy into.

Body Text -You can type right in the body text box or you can paste your copy into the box. You have options on how you can paste it in from the editor that are important as mentioned above. You can paste it right in the box from your word processing program, or you can use the editor and select ‘paste as plain text’ or ‘paste from Microsoft Word’. When you paste from Word, Word brings the extra formatting, you have added and sometimes it brings in code and characters that you don’t want in your content too. I recommend to bring in your text as plain text and format it in your post/content area. If you are using text from another website or from someone else that has already done the formatting, please drop it into the ‘paste as plain text’ area to strip it of the formatting. The wysiwyg editor allows you do all the formatting you need.

If you do not do this regularly your blog will start to look sloppy with a variety of fonts, type sizes, color, etc. The inconsistency looks unprofessional and is distracting the viewer. Keep it clean and polished, take a few extra steps, that is what the editor is for.

Hyperlinks – How to hyperlink text in your blog.Copy the URL you want your text to link to. You may need to open the website page, go to the title bar, select it all and copy. Next, select the text that you have in your blog post that you want to link to another web page. Click the hyperlink icon in the editor and paste the URL in the box.

Example: I want to hyperlink to connectiongraphics.com.

I open the website in another tab, highlight, then copy the entire URL.

Next I click the text in my blog entryhyperlink-pop-up graphic that is referring to our website, such as ‘visit our sister site’ and highlight it.

Then click the hypertext icon in the editor. A pop up box will launch (at left). Paste the URL in the box that says URL. If you are linking to a site that will take the visitor away from your site I recommend clicking the box that says ‘Open in a new window/tab’. If you are leading the visitor to another page within your site the web standard is not to have it launch a new tab or window. Always check your links before posting your blog or page!

Upload/Insertscreen capture of the pop up add media box

To add media, including a photo, graphic, audio or video file, first click inside text block at the end of the sentence where you want the media to go. (For instance to place the graphic on the right I clicked at the end the subhead Upload/Insert

  • Go to top left of the WYSIWYG editor and click on Upload/Insert.
  • screen capture of upload media detailsSelect the file you want to load. You can add photos, videos or audio media through this link
  • Add the aternate text and explain what the media is so when visitors with disabilities visit their screen readers catch it. See example circled on right.
  • You can either leave the link URL as the default that loads or if you want the graphic/media to link to another website or page when visitors click on the media paste the destination URL in the URL box instead.
  • Add a caption if desired (watch your spelling!)
  • Next determine where you want your media to be placed, on the left of the text, right of the text or centered in the text.
  • Click Insert into post.

HTML Editor

The html editor is helpful if spacing or sizes get out of whack when using the wysiwyg editor. You should have some introductory understanding of html if this view will be helpful to you. If you make edits through the html editor and you do know code well, I strongly recommend previewing your work before you update or post If it is not as you expected remember you can always undo!

Media Library

Shows all media you have uploaded to the site. You can add manage all media here.

NOTES: 

How to SET YOUR HOME PAGE and a SPECIFIC BLOG PAGEScreen capture of reading settings to set home page blog page

Once you have the majority of pages set up you want to pay attention to the placement of the pages in the navigation. IN the settings section under Reading Settings is where you choose a static page for the front of home page and the page for your blog. Above shows you the tile of the page I created for my home page is Welcome. The title for my Blog is Blog.

How to REMOVE COMMENTS OPTION on WEB PAGE:

  • Go to All Pages
  • Mouse over the page title
  • Click ‘Quick Edit
  • Right column – click  Allow Comments to disable – defaults to allow)
  • – you can change the order of the navigation by typing in a number in the order box in the right column
  • Be sure to click Save Changes.