Mar 5

WordPress Interface Overview

Tags:

———————————————————————
– OVERVIEW / THOUGHT PROCESS –
———————————————————————

HOW TO USE WORDPRESS

Wordpress Dashboard

WordPress Dashboard

 

The following tutorial is designed to be a reference guide. If you’d like an all around big picture aspect of WordPress, this is your place. This writing is designed to break apart each of the default installation’s buttons and explain to the reader how they can best use them.

The first thing that you’ll want to do is log onto your WordPress site by adding ‘wp-admin’ after your domain name.  So the URL in the browser window should read: https://www.servertheories.com/wp-admin

Now that you’re there, you should see a dashboard similar to the above reference picture.  And now it’s time to learn how to use WordPress.

NOTE:  I highly recommend having two browser windows open to learn WordPress.  One browser window will reference this page.  The other will have your WordPress site so that you can test each theory.  If you want to take it a step further, you can open a third browser window showing your site as you change it.  If you do that, you will have to refresh the site each time you change something.

Here we go…

OVERVIEW

  1. The Buttons !!! Explanation
  2. Dashboard
  3. Posts
  4. Media
  5. Pages
  6. Comments
  7. Contact
  8. Appearance
  9. Plugins
  10. Users
  11. Tools
  12. Settings

↑Top Of Page↑

———————————————————————
– THE BUTTONS !!! EXPLANATION –
———————————————————————

Wordpress Buttons

Each of the buttons on the left side of the screen have unique properties. As a general rule, you will simply look for what you want to do, then click on the button that looks like what you want. Then follow the instructions on the main screen to the right. This is not always true, however. In some instances, you will find that the ‘Settings’ button and the ‘Appearance’ button have similar aspects. I’ll talk about these types of things in the sections below.

Some of the sections that you see in this tutorial are what’s called ‘Plugins’ which add some capabilities to the already existing buttons. If you see setting in your WordPress installation that are not identified here, you should visit the official WordPress.org webpage to find out more.

↑Top Of Page↑

———————————————————————
– DASHBOARD –
———————————————————————

Wordpress Dashboard

The Dashboard is simply an overview of what’s happening with your WordPress website. The ‘Right Now’ section will show totals for both your content (pages and posts) and your discussions (comments). If you are a user with elevated privileges, you will be able to approve comments as strangers write them onto your website. The ‘Right Now’ section will give you a quick view of comments that you will need to approve or disapprove.

In addition, the Dashboard can be used to show statistics information, post a quick blog, show all posts that are currently in draft status, and receive news feeds for the latest information on WordPress. When you are first getting started with WordPress, you will most likely skip over this page for administration. However, as you get to be a more advanced user, there are many advantages to the information this page yields.

Mess around with this page as much as you want to, because guess what, nothing is permanent in WordPress… it can always be changed back. So enjoy yourself and don’t be afraid to try!

↑Top Of Page↑

———————————————————————
– POSTS –
———————————————————————

Wordpress Post Add New

WordPress Post Add New

 

Wordpress Posts All

Depending on how you would like to deploy your website, ‘Posts’ can be the most used and most important button in your WordPress installation. For basic users, there are two types of informational pages that WordPress has to offer. Those are titled as ‘Pages’ and ‘Posts’ and each are similar in feel, but different in use.

To give you an example, the tutorial that you are viewing right now is a ‘Post’ and is given a category which will group it with other postings of the same category. It will also be archived under a date which can be referenced with all other posts published around that same date. A ‘Page’ on the other hand, is what we call static content and is used to portray a particular message in the same way, all the time, with no groupings. Examples of ‘Posts’ include tutorials, blogs, new retail products, and news articles. Examples of ‘Pages’ include the home page of this website, biographies, contact-us pages, and photo galleries. Pages will be explained later in the tutorial.

To create a post, there are quite a few options. The two most common are the button link on the left side of the screen, and the +New button on the top of the screen. Each of these can be clicked when a user with sufficient privileges has logged onto the WordPress site. Each of those links will bring you to the same page where you will be able to populate your entry with any data of your choosing.

The ‘Add New Post’ link, referenced in the picture below, is where you will populate your data into the post. The title can be whatever you’d like and will be in plain text. The large box blow the title, however, offers quite a few more options.

 

Wordpress Post Add New

WordPress Post Add New

 

If you simply start typing into that large box, the words that you type will show up on your website, just as you see them in the box. That can be good in some instances, but I’m guessing that you want your website to be a bit more than just some typed text, which is why you see many more buttons available to you. Let’s take a look at those now.

Wordpress Editor Buttons

The first thing that that you’ll notice is the large ‘Add Media’ button sitting on top of the other editor buttons. This is a fantastic way to upload pictures and other media types to your post. The exact mechanics of doing this will be covered in the Media section of this tutorial, so we’ll move on to the other editor buttons.

Wordpress did a wonderful job of making the editing environment feel like your favorite word processing program. Each of the buttons offer a brief description if you hover your mouse over them, so if you are not familiar with a word processing program, use that trick to help you. Some of the buttons, however, are not offered in such software, so we’ll go over them one by one.

———————————————————————

Wordpress Button Fullscreen Editor
The ‘Distraction Free Mode’ button is a great tool if you want to hide all of the crazy stuff on your screen. There’s no need to go in any further detail because I know you’ll give it a try right now to see how it works. To exit from full screen, simply look for a link on the top left of the screen that says to do so. The tool bar will hide itself from you, so simply move your mouse around and it will come back.

———————————————————————

Wordpress Button Kitchen Sink

The ‘Kitchen Sink’ button will give you more options for editing, and to be perfectly honest, I’m not sure why these aren’t shown by default.  Click that button and we’ll go through a couple more uncommon editor buttons.

———————————————————————

Wordpress Button Paste Text From Word

Two uncommon buttons that you will use frequently are the ‘Paste as Plain Text’ and the ‘Paste from Word’ buttons. My technique is to always use the ‘Paste as Plain Text’ button and never the ‘Paste from Word’ button. Simply speaking, there are other parts of data that are contained in a word document that I would prefer to not have in my posts. But as always, experiment with it and see what you like. Soon enough, you will find your own routine.

To use these buttons, you must first copy the text from your source.  This can be any text that you are able to copy from a source that allows it.  Once the data is in your clip board, you can then use these buttons to paste the information into your website.

Yes, it is possible to simply paste the information directly into your editor, but there are many headaches that come with that particular technique… and I don’t know about you, but I hate headaches!

———————————————————————

Wordpress Button Remove Formatting

The last uncommon button to talk about is the ‘Remove formatting’ button, which is just to the right of the ‘Paste from Word’ button. If you ever see something that doesn’t look quite right, you may have thoughts of erasing it and starting over. It may not be necessary to go through that pain, however. In many cases, all you will need to do is highlight the particular text and click the ‘Remove formatting’ button to bring the highlighted text back to its original configuration.

As an example, if I were to start typing these words just like this, but I didn’t mean to bold, italicize, or even underline them, I can simply highlight them and click that button to return the words to simple text.

———————————————————————

Once you are done inserting and formatting your text, you will need to either save the draft for future publication, or publish it to the web. Those two options are visible and obvious. Another option is to use the ‘Publish immediately’ link just above the blue ‘Publish’ button. This will ask you to enter a date at which time the post that you just created will automatically show up on the web. This is done through a module that you’ll find on the right side of the screen that looks like this:

 

Wordpress Button Publish

NOTE: If you have made your browser window smaller, the module boxes may shift. If this is the case, simply scroll down the page till you see the ‘Publish’ box which will contain the same options as described above.

Other modular boxes include the ‘Format’ box, the ‘Categories’ box, the ‘Tags’ box, and the ‘Featured Image’ box. These are the most commonly used boxes, however they can be removed by using the drop-down ‘Screen Options’ at the top of your browser window.

 
 

Wordpress Posts and Pages Screen Options

WordPress Posts and Pages Screen Options

 

↑Top Of Page↑

———————————————————————
– Media –
———————————————————————

Wordpress Media Library

The ‘Media Library’ is where WordPress is going to store every picture that you are uploading to your website. At the time of this writing, WordPress 3.5.1 was the latest release. I say that because there is most definitely a better way to group images that are uploaded. Right now, all of your media is presented in a list when you click on the ‘Media’ link. Therefore, we are going to talk about my personal technique for uploading media.

To upload media into WordPress, simply click on the main ‘Media’ button on the left side of your screen and use the ‘Add New’ button located in the upper portion of your window. Following this, you will see a window that states ‘Drop Files here’ or ‘Select Files.’ You can either drag/drop files from your computer directly to this area, or your can click on the ‘Select Files’ button to do a traditional upload.

 

———————————————————————

CHECKLIST — UPLOAD MEDIA:

  1. Media Button (main menu)
  2. Add New Button (top)
  3. Select Files Button
  4. Locate your media on your computer
  5. Click Choose/OK (depending on OS)
  6. Wait for file to upload
  7. Click Edit (to right of file)
  8. Fill in all four blocks
    1. Name
    2. Caption
    3. Alternative Text
    4. Description
  9. Click Update
  10. View your list of media

 

———————————————————————

 

Wordpress Media New

When your media is on your computer, you can name it whatever you’d like. When you upload your media to WordPress, it also allows you to name it whatever you’d like and doesn’t limit you to the name that was on your computer. In addition, when you are looking at your list of media in WordPress, you can do a search which will only show related items to what you searched. Therefore, my technique is to re-name every photo that I upload to WordPress using a logical and searchable naming scheme. In most cases, this is not very difficult.

 

When media is uplaoded, it will be shown in a list just below the drop area and will have an ‘Edit’ link to the right. When you click it, you will see the attributes of the image that you just uploaded. WordPress, by default, gives the file whatever name you had on your computer.

 

Wordpress Media Information Editor

When I name a file after I’ve clicked the ‘Edit’ button, my technique is to type out the entire name as I like it in the top name blank section. From there, I will copy/paste the same name into the ‘Caption,’ ‘Alternative Text,’ and ‘Description’ sections. These additional naming blocks will tell search engines and browsers more information about the media and will make your website stronger as a whole.

Currently, using this technique, you will have to go back to your media library after you have finished editing one file, and click on the next to repeat naming it. Unfortunately, this can be rather meticulous and confusing. Therefore, I have a suggestion that might make life a bit easier…

 

Wordpress Media Insert Media

SHORTCUT: Upload the files exactly the same as before, however instead of clicking the edit button, simply create a new post and insert media. (This post will be deleted when done). After clicking the ‘Add Media’ button in your post, you will see your media library. As you click on each media item, you can see the same four naming boxes to the right of your screen. Simply click on your uploaded media, change these items, then click on the next one that you would like to edit. This way, you’re not going from page to page to edit those items.

 

↑Top Of Page↑

———————————————————————
– PAGES –
———————————————————————

Wordpress Page Add New

WordPress Page Add New

 

Wordpress Pages All

WordPress Pages All

You may not have known this, but in the POSTS section above, I was actually teaching you how to use the PAGES section as well!  You see, other than the differences I spoke of referring to what you can do with Pages and Posts, there are no differences in how you create them.  Let’s do a quick review of what I said above, so you don’t have to do any scrolling:

EXCERPT FROM POSTS:  Depending on how you would like to deploy your website, ‘Posts’ can be the most used and most important button in your WordPress installation. For basic users, there are two types of informational pages that WordPress has to offer. Those are titled as ‘Pages’ and ‘Posts’ and each are similar in feel, but different in use.  To give you an example, the tutorial that you are viewing right now is a ‘Post’ and is given a category which will group it with other postings of the same category. It will also be archived under a date which can be referenced with all other posts published around that same date. A ‘Page’ on the other hand, is what we call static content and is used to portray a particular message in the same way, all the time, with no groupings. Examples of ‘Posts’ include tutorials, blogs, new retail products, and news articles. Examples of ‘Pages’ include the home page of this website, biographies, contact-us pages, and photo galleries.  END EXCERPT.

Use the POSTS section as your tutorial, but keep a few points in mind as you do.  Many of your menus (explained under the APPEARANCE section) may be linked to pages that you create.  This is not the case for posts because posts will be referenced by their category.  Also, Pages will be static in nature and will be a main focus for your website.  Posts are referenced at times, but are not your main source of information for static content.  Therefore, when you create a Page, make sure that the information is clear and concise.  Make it look as nice as you can, because most likely, you will be wanting your viewers to see the Page more often than the Post.

 

↑Top Of Page↑

———————————————————————
– COMMENTS –
———————————————————————

Wordpress Comments On Website

WordPress Comments On Website

 

Wordpress Comments All

WordPress Comments All

Comments are a great way to get a feel for what your viewers think of your content.  I will be very honest with you, however; comments are going away with the wind on most websites, but are still very useful in some cases.

A comments section will show up at the bottom of all of your pages and posts by default.  They are easy to turn off, but it must be done manually.  But before we go talk about how to turn them off, let’s talk about how to manage them.  If you leave them on, it’s fairly obvious what can happen.  Your website could be tarnished with foul language and random marketing adds left there by lifeless ‘bots’ which are programs that people write to spam websites.  In order to mitigate the possibilities, you can go to the SETTINGS section and select Discussion.  There, you  have plenty of options which will help keep the bots away.  One of the most important of these is to allow the administrator to approve all comments.  To further protect you, you should also check the box that says to email you whenever a comment is posted.  The following picture will show each of the options that you have when it comes to posting comments.

 

Wordpress Settings Discussion

WordPress Settings Discussion

Each of these are self explanatory, so I’m not going to go through them.  But I do encourage you to set the to however you feel is the most secure for your website.  The way that they are checked in this picture is the WordPress default, and is generally good enough for security.  However, the one that I will emphasize is ‘An administrator must always approve the comment’ as well as making it email you for each comment.

There’s nothing worse than bad comment clutter when you don’t even know that it’s going on.

Wordpress Posts Comments Bulk Change

WordPress Posts Comments Bulk Change

So now let’s talk about how to disable comments.  The easiest way that I’ve found is to disable it for all posts and pages using the Bulk Actions drop down.  This action assumes that you won’t want comments available on any post or page at any time.  If this is not the case, and you’d only like comments on two or more pages, you can select the pages/posts that you’d like to enable or disable the comments for and perform the same actions.  Simply select the posts/pages on the left using the check boxes, select Edit from the Bulk Actions drop down, and click apply.  You will then be presented with what you see in the picture.  Use the drop down next to Comments to select ‘Do Not Allow’ and click Update on the lower right side of the edit area.  This will dis-allow comments on your selected posts and pages.  The same is also true for enabling comments.  Try it out and give it a shot to see what happens… because WHY NOT?!?

Lastly, you can also enable or disable comments when you initially create a post.  This is done with the ‘Discussion’ settings located under the main editing area when you add a new post or page.  If you are unable to see the Discussion settings (reference picture), you can enable this setting by using the ‘Screen Options’ on the top of the page.  When the Screen Options are shown, there are several check boxes which will allow you to edit multiple things.  The check box that you are looking for is ‘Discussion’ which I have shown as the only one checked in the reference picture.  Once you check that box, the Discussion setting will show below your main edit area.  To allow or not allow comments, it’s as easy as checking the boxes!

Wordpress Posts and Pages Screen Options

Wordpress Page or Posts Comments Options

 

↑Top Of Page↑

———————————————————————
– CONTACT –
———————————————————————

The contact form is a wonderful option to create a secure way to have your viewers email you without giving away your information. Contact forms are not a part of WordPress by default, however. For many years, one of the first things I do when I install a new instance of WordPress is add a plugin called ‘Contact Form 7’ which allows you to create your own contact form, and add it onto your webpage via what’s called short code.

Wordpress Contact All

WordPress Contact All

To begin, install ‘Contact Form 7’ and click on the button which is labeled ‘Contact.’ From there, you will see a series of text type boxes. To create your own contact form, use the panel on the right to input your information, then copy/paste the generated short code to the left side panel. When finished, you should have at least three short codes in the left side text box. The most common ones are Name, Email, and Message.
 

When you have competed your new form, simply click save or publish (depending on version) which will generate your final short code to be used for your new webpage contact form. In the case of the screen shot below, you would place the short code onto whichever webpage you would like the contact form to be seen.

 

EXAMPLE:





Your Name (required)

Your Email (required)

Subject

Your Message

 

The example above was generated through the short code represented in this picture.

Wordpress Contact Form New

WordPress Contact Form New

As a side note and a technique, you may place the contact form short code into HTML text widget. This contact form will then show up wherever you place the widget.

 

↑Top Of Page↑

———————————————————————
– APPEARANCE –
———————————————————————

The appearance button is probably the most common button to use in WordPress. It contains several options which you will want to manipulate in order to make your webpage look exactly like you want. These options include (but are not limited to) Themes, Widgets, Menus, and the Editor.

 

Wordpress Appearance Themes

WordPress Appearance Themes

THEMES:
When you click on the Appearance button, you will see several themes listed on the right side of the screen. Any of these themes can be activated at any time, however you will want to stick with your favorite theme, and delete the rest as a security precaution. Deleting the other themes makes your site more secure, and allows for less confusion on the part of the user.

If there’s a time when you want to change your WordPress theme, you can do it here. To change the theme, you have a few options.

The first is to use FTP to upload, however unless you know what you’re doing, I would leave that up to your web administrator.

The second is to do a search. Once you’ve clicked on the Appearance button, there is a link on the top of the screen that says ‘Add New’ and allows you to search based on the criteria you are looking for. In the newer versions of WordPress, you should be able to have a small preview which will show you what each theme looks like. At any time, you can mouse-over the searched theme and select preview or install.

The third option is to upload the zipped file from your computer. To do this, simply select the link on top that says ‘Upload Theme’ which will allow you to select the zipped file from a specific location on your computer. This method is commonly used when a theme is purchased from an external website and downloaded after the transaction has gone through.


 

Wordpress Appearance Widgets

WordPress Appearance Widgets

WIDGETS:
The next button below appearance (themes) is the Widget button. This button becomes very important because it allows a very common function on each of the webpages that you create. Here’s how a widget works. With each page that you create, there will be a widget area. In this widget area, you can drag and drop any of the installed widgets which will then show up on your new webpage. In the picture example, you will see a widget area named ‘Sidebar Right’ which represents the right side of any two columned webpage that you create. If you place a widget in there, you will automatically have that widget show up and no additional work is required.

In the picture, you will also see several ‘Available Widgets’ in the left center of the page. Each of these are the widgets that you can drag and drop into the widget areas (such as the Sidebar Right). Once you have dragged them and dropped them in to the appropriate widget area, you can then manipulate the data that they contain. For example, if it is your contact information, You will only have to enter it once in this widget, but it will show up on every page that has that ‘Sidebar Right’ area.


 

Wordpress Appearance Menus

WordPress Appearance Menus

MENUS:
The next item on the Appearance list is the Menus button. Your menu is the life line of your viewers. As you create more and more webpages, you will want to make them available to your users through a link at the top of your webpage. Those links are created with the menu item represented by the picture.

As you can see in the picture, the menu items are listed on the right, and are created via a button labeled ‘Add To Menu’ located on the left. Each webpage that you’ve created will show up in a list on the left. Simply check the boxes of the pages that you want to add to the menu, and click on that button. As you do this, each page will show up on the right side of the screen in an organized list. The order of the links can be changed by dragging and dropping, and each item can be customized with a name and label.

In addition to simply having a set of links at the top of your webpage, you can also create sub-menu items, or drop-downs. You do this by dragging your manu item slightly to the right of the item above it. Note that the only item that will be seen is the item which is aligned all the way to the left. When your viewer mouses over the link, a drop down menu will apear with the items you specify spaced to the right. A representation of this is shown in the picture.


 

Wordpress Appearance Editor

WordPress Appearance Editor

EDITOR:
The last item that will be described in this tutorial is the Editor. If you are a novice to WordPress, my next statement is simple, and should be adhered to: DO NOT USE THIS!

The Editor is used to manipulate the actual HTML and CSS code located on each of your webpages. If you change anything on those pages, there is a good chance that your webpage will cease to function. In many cases, the only way to remedy this situation is to restore from a backup, or re-install the theme which can be a pain. So the best advice I have is to simply not use the editor at all. If you would like to manipulate one of your pages via changing the code, I would highly recommend using an editor on your local computer and uploading the file when it is complete. As always, back up your data before doing this!

 

↑Top Of Page↑

———————————————————————
– PLUGINS –
———————————————————————

 

Wordpress Plugins Installed

WordPress Plugins Installed

Plugins are the life-blood of WordPress. They are used to increase the functionality of your webpage, and to add things such as social media and extra security without having to write any complicated code… or even any code at all.

Plugins, because they are the life-blood of your webpage, can be a blessing and a curse. When you search for plugins to try to find something specific, keep in mind that if you install one with a vulnerability, you could make your site weaker. It’s similar to buying something off of eBay. You have never met the seller, and when you get your product, it could be in a completely different condition than originally described. The way to mitigate that risk of getting a bad product is by looking at the reputation of the developer. If the developer is well known and the plugin is mature and well kept, the chances are that you are safe to install it to your webpage. However, if the developer is unknown and created something just because they could, you take a major risk by installing that plugin.

 

Wordpress Plugins Search

WordPress Plugins Search

To install a plugin, click on the ‘Add New’ button on top of the page. From there, you can upload, or search for any plugin that you desire. The upload feature is done the same way as adding a theme to your site.

With the convenient search feature, it will create a list of plugins associated with your desires. From this list, you can simply click install to add it to your site. Again, make sure that the developer is reputable. You can look at reviews at wordpress.org, and use the stars (1 out of 5 is bad, and 5 out of 5 is good) to judge the quality of the product.

For each of the plugins, you will have to read the guide on how to use it. Each plugin is different and is manipulated in various ways. So take the time to get to know your new plugin and become efficient at it’s use.

 

↑Top Of Page↑

———————————————————————
– USERS –
———————————————————————

 

The first user was created when your WordPress site was first installed using the famous ‘5 minute install.’ This first user is an administrator and can create more users as such. If you are creating users, ensure that you are very careful with the permissions that you give out. There are a few types of users privileges that can be created, and we’ll go over those in detail because they are very important to understand.

Wordpress Users All

WordPress Users All

 

ADMINISTRATOR:
The administrator has ultimate privileges of the webpage! In other words, they can do anything… to include deleting the entire site. As such, if you are creating a new user and give them admin privs, make sure you trust them. If you don’t, here are some other options.

EDITOR:
An editor will be able to see every post and webpage that is created, however they will not be able to change the look and feel of the site. This privilege will allow the user to view and edit any other user’s posts at any time.

AUTHOR:
An author can create new posts and articles and post them by themselves, however they will not be able to edit any other user’s posts.

CONTRIBUTOR:
A contributor can write their own articles and posts, however they will not be able to post them until an administrator approves them.

SUBSCRIBER:
A subscriber can only manage their own posts and profile, but can still view the content of the webpage.

 

Wordpress Users Add New

WordPress Users Add New

When creating a new user, it is very important to think about security. A specific user’s security is only as strong as the password that you create for them… or the password that they change. By default, WordPress will allow any password to include a very weak one. As such, it is my common practice to install a plugin called ‘iThemes Security’ which will allow you to specify the complexity of the passwords allowed. You can reference the Plugins section for further details on how to install this plugin.

As a side note, there are plugins that require subscribers to be created before any comments can be added to a post. This is a good practice and will significantly reduce the amount of spam being posted to your webpage.

 

↑Top Of Page↑

———————————————————————
– TOOLS –
———————————————————————

Wordpress Tools All

WordPress Tools All

I have never used tools. If you choose to use it, the instructions and description of the functionality are listed after you click the Tools button.

 

↑Top Of Page↑

———————————————————————
– SETTINGS –
———————————————————————

As settings are extremely self explanatory, I am only going to include screen shots of each of the buttons offered under the Setting button.

As you add various plugins, many of their options will be listed under the Settings button. If you are ever unable to find the options you are looking for, this is likely the place that you want to look.

Lastly, there may be several buttons located under the Setting button which are also added because of plugin functionality. the iThemes Security plugin is a great example of this. Because this is the last default WordPress button that I will be describing in this post, I encourage you to thoroughly read the documentation for any plugin that you install to find out what the added buttons will do.

Wordpress Settings General

WordPress Settings General

 

Wordpress Settings Writings

WordPress Settings Writings

 

Wordpress Settings Reading

WordPress Settings Reading

 

Wordpress Settings Discussion

WordPress Settings Discussion

 

Wordpress Settings Media

WordPress Settings Media

 

Wordpress Settings Permalink

WordPress Settings Permalink

 

 

 

———————————————————————
– FURTHER INFORMATION –
———————————————————————

For further information, you can find explanations and examples for everything described in this post by visiting wordpress.org and clicking on the various links. There are also plenty of free themes and plugins available there. ENJOY!