Lesson 5 – The Anatomy of WordPress

What we’re going to cover

After this lesson you’ll have a solid understanding of the WordPress backend and how to tweak your site.

**Please note: WordPress has recently given the backend a nice facelift, so your admin section may look a little different – all the navigation is exactly the same ; )

1. The elements of a WordPress site

Every theme is unique, so comes with different options. The are however some core WordPress elements that will remain somewhat consistent across all themes.

We’re going to go over the consistent elements.

For more “theme specific” info you should refer to your theme documentation, which is located in the original file you downloaded from ThemeForest and unzipped. (Assuming you downloaded the “MainFiles” as opposed to the “WordPress Install File”)

WordPress is broken down into roughly 7 main sections.

  • Pages: Permanant content, such as contact pages, about us, privacy policies and landing pages displaying blog posts etc
  • Posts: Used for frequently updated pieces of content, such as blog posts or news. Posts can also be organised into categories.
  • Menus: The navigation of your site. Menus include your main navigation, footer navigation and so on.
  • Widgets: Widgets are cool little add ons such as email signup forms, social media writemyessayfast.co.uk boxes for displaying all your cool Facebook friends, highlights for the most popular posts on your blog and so on.
  • General settings: There are two sets of “settings” here. Sitewide settings that you will generally set once, and plugin settings. Some plugins (we’ll cover these in the next lesson) will be controled via this area.
  • Theme settings: Here you will edit things like the colour and general set up of your theme. Many themes also have other options such as social media buttons controlled in this section.
  • Plugins: Add ons that allow your site do pretty much anything you want. From taking payments to creating contact forms. (We’ll cover this next lesson.)

2. How to edit WordPress elements

To kick off, login to your WordPress site backend (www.yourwebsite.com/wp-admin)

Creating pages in WordPress

We’re going to create a “Contact Us” page

  1. Hover over “Pages” in the sidebar then select “Add New”

    2. 1-Creating-Pages-In-Wordpress

  2. Under “Enter title here” type “Contact Us” without the “”
  3. In the main body type whatever, perhaps, “We’d love to hear from you…”
  4. Select “Publish”

    5. 2-Creating-Pages-In-Wordpress

  5. You can then “View page” to have a look

Creating posts in WordPress

  1. Hover over posts then select “Add New”

    2. 1-how-to-create-a-post-in-wordpress

  2. Under “Enter title here” type “My first post!” without the “”
  3. In the main body type whatever, perhaps, “This is some really interesting content, don’t you think?”
  4. Next, we’ll organise your post. Select “+ Add new category” on the right sidebar

    5. 2-Creating-posts-in-wordpress

  5. Give a relevant title then click “Add new category”

    6. 3-Creating-Post-Categories-In-Wordpress

  6. Then scroll back up and “Publish”

    7. 4-Creating-Post-In-Wordpress

  7. Nicely done.

Now let’s create your main navigation bar

  1. Hover over “Apperance” and select “Menus”

    2. 1-Creating-Menus-Wordpress

  2. Type “Main Menu” for the “Menu name”
  3. Then “Create Menu”

    4. 2-Creating-Menus-Wordpress

  4. On the left you’ll see “Theme Locations”. This will determine where your menu will be placed. The placement options will be determined by your theme. Under “Header” or something similar select your new “Main Menu and “Save”.

    5. 5.5-Creating-Menus-In-Wordpress

  5. Now, scroll down to the “Pages” box, select the “Contact Us” checkbox and “Add to Menu”

    6. 3-Adding-pages-to-menus-wordpress

  6. Under “Categories” do the same but with your new category

    7. 4-Adding-Categories-to-Menus-Wordpress

  7. Scroll back up to edit your menu
  8. You can customise the label by clicking the downward arrow and editing the “Navigation Label”
  9. You can leave the “Title Attribute” blank for now.
  10. Click “Save Menu” to finish up

    11. 5-Creating-Menus-Wordpress

  11. To check out your new menu hover over “My Website” up the top left and click “Visit Site”

    12. 6-Creating-Menus-Wordpress

  12. As you’ll see below, the new menu has successfully been added.

    13. 7-Creating-Menus-Wordpress

Widgets

As mentioned, widgets are handy little add ons, perfect for displaying social media feeds/friends or adding email signup forms.

We’ll touch more on widgets in the plugins lesson, but for now we’ll just briefly go over how to add/delete/move widgets.

  1. Hover over “Appearance” and click “Widgets”

    2. 1-How-to-install-widgets-wordpress

  2. On the righthand side you’ll see “Default Sidebar”. This will contain all your active widgets
  3. The large area titled “Available Widgets” contains all the currently installed widgets ready for use. To add a new widget, simply drag and drop it into the “Default Sidebar”

    4. 2-how-to-install-widgets-on-wordpress

  4. You can edit active widgets by clicking the downward arrow to display that widgets options. The options will vary based on the widget. Just make sure to click the “Save” button when you’re done
  5. If you wish to remove a widget, expand the options and select “Delete”

    6. 3-how-to-change-widgets-wordpress

  6. If you only want to temporarily switch the widget off and keep the settings, drag it to the “Inactive Widgets” area down the bottom of the screen. This ensures no settings are deleted

    7. 4--how-to-make-widgets-inactive-wordpress

  7. Aside from the “Save” button for individual widget options, all other updates/changes save automatically

General settings

Site title and www

  1. Hover over “Settings” on the sidebar and click “General”

    2. 1-how-to-change-wordpress-settings

  2. Your “Site Title” text will typically be used in place of a logo unless you upload a specific image instead
  3. Your “Tag Line” will generally be added along side your site title in a more subtle font (this is theme dependant)

    4.  
    Adding www infront of your domain

  4. By default wordpress removes the “www.” infront of your domain when displayed in peoples browsers. Call me old fashion, but I like the look of the www. – if you do too, manually input “www.” for both “WordPress Address” and “Site Address”

    5. 2-how-to-add-www-infront-of-wordpress-site-address

  5. Make sure you “Save” down the bottom

 
Changing permalink strucutre
This sounds complicated, but “permalinks” are simply how wordpress generates your urls for pages other than the homepage. E.g. www.yoursite.com/?p=123 vs www.yoursite.com/how-to-hug-a-panda.

Not only will your urls be more memorable, but Google will love you for it, too.

  1. Back under “Settings” on the sidebar select “Permalinks”
  2. Select “Custom Structure” and add “/%category%/%postname%/” without the “”

    3. This will add the category of your post followed by the post name. If you’d like just the post name to appear directly after your domain, use “/%postname%/” with the “”

    how-to-add-category-to-permalink-structure-wordpress

  3. Make sure you “Save Changes”
So that’s a brief overview of the anatomy of the WordPress backend.

As with many things in life, 90% of what i’ve learnt has come from tinkering over and over again.

WordPress is great, but it’s inevitable that you might come across some tricky things.

Luckily, another massive benefit of WordPress is the sheer amount of people using it. Meaning, if you have a problem, someone else has most likely encountered it, solved it and shared the solution.

So whenever you’re your stuck just head to our trusty friend Google.

Next lesson

Up next, we’re going to supercharge your site with plugins. These plugins will drastically enhance the backend of your site and prepare your for online domination.

 

 

Where to next?

1 Comment

  1. Lesson 7 | Essential Website Content | Mighty Little Startups says:
    June 14, 2013 at 2:27 am

    [...] you’ve forgotten how to add menus head back to Lesson 5 – The Anatomy of WordPress and scroll down to “Now let’s create your main navigation [...]