WordPress Tutorial

Here is a step-by-step breakdown of how you can get a new WordPress page on its feet in no time. I’ll try to highlight the features that are most important to master, and the ones that I use most often in managing the pages that I am a part of.

Setting up your page

The first step is to create your page. Start by going to WordPress.com, and when you select the option to create your page, your first choices will follow on a page that looks like this:

Click on any picture to enlarge it

In the first line, select the name of your webpage. This is what people will type in when visiting your site. You have the option of removing the “.wordpress” portion of your web address (like we have done with http://www.bhsenglishdepartment.com), which is an annual cost of $18-$26, depending on which features you select. The second line is the title of your page – in other words, this is what will appear in the web browser, and can be more informative or lengthier than the web site’s name. The third option is the privacy level of the page – if this page is for your students, you probably want to select “viewable by anyone” because you will have a LOT of times when your students will not remember the web address, but should be able to find it via a web search. The final option, cut off from this image, is the choice for a full upgrade, which costs $99 a year, but is probably not worth it if this page is solely for your students.

The next step is to select a design for your page. Among the greatest benefits of a WordPress page is how easy it is to get the page up and running. One of the arguable drawbacks is how little control you have over the look of your page. The overall layout

Screen Shot 2013-08-17 at 12.03.59 AM

has to be selected from a list of pre-made designs, most of which are free. To select your layout, enter the DASHBOARD (click any hotlinked words to access a glossary of terms that you may need). You can enter the dashboard of your page in a number of ways, but here’s the easiest – once you have created the webpage, pull open the pulldown menu on the upper-left corner, and select Dashboard (the first option).

Only you and any other editors whom you select have access to the dashboard of your page, and it looks like this:

Screen Shot 2013-08-17 at 12.04.19 AM

Notice, I have moved my cursor onto the paintbrush icon, which is where you control the look of your page, and the first option is THEMES. Browse through the themes and select one that you like. If you wish to make your search a little easier, click on “Feature Filter,” which is on the top-right corner of the screen. Among your main choices here will be the color scheme of the page, how many columns you want the text on your page to have, and whether or not you want a CUSTOM HEADER, which is the feature on the top of this page that allows you to navigate faster around the page. A custom header takes a little more time to get used to, but it really pays off.

The Customize button allows you to change the colors of the fonts, the header image (if you opt to have one – this page features a random image of something literary or something found in the BHS English hallway) and a few other features. WIDGETS are features that fill the sidebar or the bottom of your page, like our links to the various Twitter accounts in the department, the most recent posts, etc. The MENU page is important, but I’ll cover that later.

Adding Content

First, the vocabulary:

A PAGE is a static part of your site that never radically changes or loses relevance, like a web page. This might be helpful for anything like classroom rules, links to important webpages or to homework assignments. The benefit of a page is that you can have it contain several sub-pages (e.g. having “Sioux” as a sub-category of your “Native Americans” page). You cannot structure posts to have this same multi-layered structure.

A POST is a blog entry. If your information will be something with a shorter relevance, like a list of homework assignments, or current events, you might wish to choose a post. Your posts will be displayed in reverse chronological order, with your most recent ones positioned highest on the page, and you have the option of having a widget that displays links to the most recent posts on your page.

A CATEGORY is a way of organizing your posts. When you write a post, you can link it to whichever categories you have created. This is a way of allowing your visitors to streamline the blog information you’ve posted – e.g. on this page, if you look at any of the department’s book recommendation posts, they are all in the category called “read-it,” and if you click on the name of the category, you get to see only the posts that have been placed in that category. (This element of WordPress is only useful if you will use categories in a custom header, if you feel like you will have a lot of posts that might become hard to navigate, or if you have a number of widely different topics that you’ll be handling on your website).

Creating a New Page

Screen Shot 2013-08-17 at 1.03.07 AMFirst, select the pages icon, which is the one highlighted in blue on the left. The bar at the top is where you type in the name of the page, which also becomes the web address for this particular page. You can edit the webpage address (usually for simplicity’s sake), which is the EDIT button to the left of the text highlighted in yellow. The large text box is where you type in your information. The toolbox above the text entry box is mostly standard editing features (bold print, text alignment, etc) but with a few that you might want to learn. On the top line, the pair of options that I originally knew the least about but now use most often are the chains that are linked or that are broken. To make these buttons active, highlight any of your text, and these two buttons allow you to make your text link to other parts of your website, or link to other sites on the internet. If you select the unbroken chain, you will have the option of inserting a webpage that your site can link to, or another page on your website. TWO IMPORTANT POINTS: (1) Hotlinking to other parts of your page is the easiest way to make your page more user-friendly, and (2) you cannot hotlink to a POST on your page, only to other pages.

On the bottom line of the toolbar, the important buttons are the two clipboards with the W and the T on it, followed by the eraser. If you cut and paste anything into your webpage from another site, or from a document, you will carry along with it any formatting quirks from the original document. What this often means is that your spacing will be difficult to control, or the text will be too large or too small. Unless you understand coding (which you can access by selecting the “TEXT” option on the upper-right corner of the toolbox), it can be very, very difficult to correct formatting problems. By cutting and pasting from Microsoft Word (W) or from plain text (T), you can eliminate a lot of the formatting issues. Or, highlight any text that you’ve cut & pasted into your webpage and click the eraser button, and the formatting will disappear. You might not notice any change in how the page looks in the “ADD PAGE” text box, but the actual webpage might look a lot different once you’ve published it.

In the sidebar menu, here’s a quick overview of what you probably might need to know:

VISIBILITY: Select Public unless you are working on a page and do not want it to be seen, or unless you have something that you’d like kept away from a casual visitor

PUBLISH: Useful if you’d like to write a page (or post) but not have it go live until a specific time and date

PARENT: This is a way of organizing your webpage into subpages, somewhat like the CATEGORY option for your posts. If you wish for your new page to be placed as a subcategory of another page, then it’s useful to establish your parent pages as early as you can. This element is mostly useful for pages that have a lot of information.

PUBLISH: THIS IS VERY IMPORTANT – nothing that you write will become a part of your page until you select the Publish button. Fortunately, WordPress is wise enough to have a warning box pop up any time you attempt to navigate away from an unsaved or unpublished page.

Creating a New Post

Screen Shot 2013-08-17 at 1.22.21 AMTo create a new post, select the thumbtack icon, as seen in the image on the left. For the most part, this process is identical to the creation of a new page, but with a few small differences. First, a post does not get a webpage address that you can edit, and you cannot assign it to a PARENT. You can, on the other hand, attach it to any CATEGORY that you have created (the option is in the sidebar, but is not in the image). Finally, if you wish for any of your posts to automatically link to your Twitter account, the PUBLICIZE button allows to to edit exactly what your Twitter post will look like. (Quick note – to link to your Twitter account, sign in to Twitter, click on the SETTINGS tab (second-to-last in the left sidebar), click on SHARING, and then click on the Twitter option. Authorize your Twitter account, and then that’s it!)

Editing Content

What if you post a typo??? Once any of your information (posts or pages) has gone live, it will contain an EDIT link that is only visible to you when you are signed in to WordPress. Depending on your theme, this link will either be at the very top of your page or at the very bottom.

Adding images

You can add images to your posts and pages very easily. Click the ADD MEDIA button, which is just above the text box, and then drag and drop any pictures that you wish to add. If you have a lot of pictures going onto one page, you might want to check out the CREATE GALLERY option that is on the left-hand side once you click on ADD MEDIA. Any images that you upload remain in your MEDIA LIBRARY, which you can access from the left-hand sidebar in the DASHBOARD.

Double-Spacing Weirdness
Not sure why this is the case, but the default response when you hit ENTER when composing is to add TWO lines instead of one. If you only wish for one space (in a longer post, when adding a list of things, etc), if you hold SHIFT when hitting ENTER, you will only have one line.

CUSTOM HEADER

If you want to have a header that contains links to your most important pages, here’s how you edit it: Click on the Appearance icon (the paintbrush) that is in the left-hand sidebar of your DASHBOARD, and select MENUS. A MENU in WordPress is basically just a configuration that you have created. Some pages allow you to have more than one menu, and if you have distinctly different webpages that you’d like to house under the same website (e.g. a sports coach might have a page for the hockey team and another for the softball team), then this is where you can toggle between these two pages easily (Very few pages will realistically need more than one menu). Screen Shot 2013-08-17 at 1.44.51 AM

What you will see looks like the image on the left. You will create and name the menu. The naming of the menu is purely for your sake – it does not appear anywhere on the website. You can add pages, categories, or links to external websites to your menu. If you wish to add a page that you have created, click on the “pages” tab on the left-hand side, and select the correct page. If you have a lot of pages, you can find the page you desire through the “search” option. Adding a category is essentially the exact same process. If you click on the “LINKS” option, you will be able to insert the URL of any webpage that you wish to link to. If you select the “Literary Map” in our header, you’ll be taken away from our website to a map of literary locales in the books that we teach at BHS.

You will also notice in this menu that the information presented in the header is staggered, with some items on the left-hand margin, and some items indented. Anything on the margin will appear in your main header. The indented information drops down from the header when the cursor is placed over it. So resting the cursor on “FACULTY” on our page brings up all of the teachers’ names in the department, and beyond, resting the cursor on my name (Lally) will bring up a drag-down menu of all of my classes, etc. Whenever you add anything to your menu, it will appear at the very bottom of the menu, but repositioning it is a simple drag and drop procedure. Like with posts and pages, no changes become live until you select to save your work, and WordPress will always remind you if you attempt to leave a page without saving.

Finally, this tutorial only scratches the surface of what you can do with a WordPress page. If you are interested in a more thorough overview (actually, 50 different tutorials of varying depth) can be found HERE. I hope this has been helpful, and if you have any questions, feel free to email me, or to stop by if you are in the high school. I hope this is helpful information, and good luck!

The advanced tutorial will finish any portions of this page that I did not get a chance to complete. I will also show you how to create a slideshow gallery, how to embed videos, a peek inside how to remove formatting weirdness, and how to have text boxes pop up over your images. I will also answer any specific questions that you have, or help troubleshoot any problems that you are running into on your page. Thanks!

4 thoughts on “WordPress Tutorial

  1. I’m not that much of a online reader to be hoest buut your
    blogs really nice, keep it up! I’ll go ahead andd bookmark yoour website to come bzck later on.
    Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s