The Ultimate Guide to a WordPress Website 6

WordPress powers 28% of all websites on the Internet and yet creating a website with WordPress requires no coding HTML skills. But this is not to say that the process is straight forward. As the Swiss army knife of web design, the WordPress dashboard can be difficult to navigate. It is sometimes easy to get lost in the flurry of options available and miss the big picture. I created this ultimate guide to a WordPress website so you can focus on the basics: write content, format it well, and add pictures into a nice looking gallery. We’ll also look at how to embed content, and add a menu to your site. This webpage explains all the basics of a WordPress site so be sure to bookmark it!

Here is a quick menu to navigate this how-to guide:

1. Front End and Back End
2. Navigate your WordPress Dashboard
3. Write Content
4. Format your Text
5. Add a Nice Photo Gallery
6. Embed Content from Other Sites
7. Add a Navigation Menu

Ultimate Guide to WordPress Website

By the time you are done with this article, you will know all the fundamentals required to manage your WordPress site!

1. Front End and Back End

A key fact to understand is that your WordPress website has a public side (the front end) and a private admin dashboard (the back end). Therefore, I find it crucial to open the front and back ends in two separate tabs to remain productive (and sane). In a couple of steps:

1. Login to your website, access the dashboard and edit a post. [BACK END]
2. In the menu bar at the top of your Dashboard, right click on View Post and select Open Link in New Tab. [FRONT END]

Keep public and admin sides in separate tabs

This very simple trick will give you a nice view of both sides so you can quickly edit an article and view the changes right away without having to rely on Preview.

2. Navigate your WordPress Dashboard

WordPress is the Swiss army knife of web design. It has been around for a long time and it can be used for many different purposes. This versatility brings about a bloated interface which can be rather confusing at a glance. To navigate your WordPress dashboard, I encourage you to focus only on these areas:

1. Menu Bar
2. Posts
3. Appearance

WordPress Dashboard

1. MENU BAR

Menu Bar

Pay attention to the menu bar at the top of your screen. Its options are contextual, meaning that they change based on the wider context, e.g.: from your Dashboard, you can easily access the public view of your site, from the public view of a post, you can quickly edit it.

2. POSTS

Posts

This is where you will write all of your content. So make it a habit of going there when you log in. Also under Posts, you can manage your Categories. Think of Categories as the structure of your website. It is with Categories that you will build and efficient navigation menu.

3. APPEARANCE

Appearance

So much going on in this little menu. Under Appearance, you will find your themes so modify the look of your entire website, the menu, see below on how to add a navigation system to your site, and your widgets which control the content displayed in your sidebars.

But what about the other stuff?

• Pages You only need a limited number of pages, e.g.: the About Me page, all the rest should be written into posts.
• Media – You can upload and add photos to your articles with the Media button when writing a post.
• Links, etc. – Really no need.

Another important interface to master is the one you will use to write articles, you will examine this next.

3. Write Content for your WordPress Website

If you want to write an article for your website, WordPress calls this step Add a New Post. Once again, it is important that you see through the busy interface and focus on the important These are the steps you want to pay attention to for your new post:

1. Title
2. Editor
3. Publish
4. Categories
5. Tags
6. Featured Image

Add New Post

1. TITLE

The title you write here will become the URL of your article. It will also be featured on the front page of your website as a link. Make sure you pick a clear title which explains very well what people will find when they click on it.

2. EDITOR

The editor is where you will write the content of your article. It is a basic editor but we will see below how you can format your text, add images, and embed elements from other websites.

3. PUBLISH

The publish panel on the right side toolbar is very important. First it allows you to save your work in progress which is very important especially if your Internet connection is unreliable. Don’t forget to click on Save Draft from time to time to avoid unpleasant surprises.

Second, you can click on Preview to open a separate tab and see a preview of your work. The preview is a mock-up and as such is different than the front end of your website we mentioned above.

Third, the Publish button is the final step you will click on when everything is ready to be posted on the web.

In the Publish panel you will also notice options for Status, Visibility and Publish. These are features which we will explore in a more advanced guide.

4. CATEGORIES

We will use categories to build a menu for your website (see below) so it is important that you think of categories as the skeleton for your website. Create categories for each of your site’s main theme, then select the appropriate category for your articles. it is best practice to only pick one category per article.

Categories

5. TAGS

Tags are less important and some websites omit them entirely. They may be useful though if you want to cross-reference your writings. You can select multiple tags for one article.

Tags

6. FEATURED IMAGE

This is a paramount piece of design that many writers forget! You should definitely add a nice featured image to your post. This image will be picked up to become the thumbnail for your article. When your post is listed on your site such as on your home page, visitors will be able to click on the image to access it. Without a featured image, you will be left with just the text description. With a featured image, your website will be more welcoming and easier to navigate.

Featured Image

4. Format your Text

Format Text

By default the formatting bar of a WordPress post does not let you change the color of the text. In order to change the font color, add a horizontal line, add an indent or decrease an indent, you need to toggle the toolbar by clicking on the second to last icon from the right of the editor toolbar.

Another feature which you need to learn how to use is text styles. The original style for your text is paragraph, but when you have section headers, you should click on the dropdown and choose Headings 2 and further. These styles, very similar to the ones you can find in Google Docs, have implications with search engines. For this reason, you should not use Heading 1 which is reserved for the title of the post. Preformatted is typically use to showcase programming code, but you may be able to use it when you want to highlight a step.

5. Add a Nice Photo Gallery

When you click on the Add Media button above your post editor, you will be able to upload photos to add to your article. You can add photos one by one, or you can create a gallery with a collection of photos. The default gallery in WordPress is quite drab though, with a very simple table layout of photo thumbnails. But if you activate the jetPack plugin, you will be given access to much nicer design including photos in round bubbles, a mosaic of pictures, and when you click on an image, it will pop up in a large format and allow you to navigate back and forth using the arrow keys.

To enable nice photo galleries for your WordPress website, follow these steps:

1. Go to WordPress.com and create a free account (you do not need to create a site).
2. Go back to your own website, and under Plugins, install and activate the Jetpack plugin.
3. Now that Jetpack is installed, click on its shortcut in the left sidebar (top left, under Dashboard) and click on Connect to WordPress
4. Once Jetpack is connected successfully, click on jetpack > Settings and under Media, enable the option to Display images and galleries in gorgeous, full-screen browsing experience.

Next we will look at how to add a gallery:

1. Write a new post or edit a post you already wrote.
2. Click on Add Media above the post editor.
3. Click on Create Gallery
4. Select or upload your images. For a gallery, the more, the better. 8 or 9 images are a good starting point.
5. Under Gallery Settings, click on the Type drop-down menu to choose between: thumbnail grid (old boring style), tiled mosaic (my favorite), square tiles, circles, and tiled columns.

Here are the different types of photo galleries available for your images with the Jetpack plugin activated and connected:

NOTE ABOUT PHOTO LINKS

When you add a photo individually or as a gallery, you should select the option Link to Media File. This will create a quick and direct access to the original image. The other option will link to an individual post containing the photo, a rather confusing option in my opinion.

Check this option

6. Embed Content from Other Websites

Content created on other websites can easily be embedded into a post on WordPress. You can create a movie on YouTube, a presentation on Prezi or Google Slides, an interactive image on thinglink and then add it directly on your website. From the original website, you should see an option often called embed or share. Clicking on this option will present you with a code, such as the following for Google Slides:

<iframe src="https://docs....>...</iframe>

Here is a quick guide on how to add content from another website onto your site:

1. Find and copy the embed/share code from the website of origin.
2. Go to your WordPress post, and switch the Post Editor from Visual to Text
3. Find where you want to place the content and paste the code
4. Switch back from Text to Visual
5. Click on Preview to see the embedded content

The embed code will often have options for width and height which you can play with in order to adjust the size of the content you are adding.

7. Create a Menu to Navigate your Site

The easiest way to create a menu for your website, is by using categories (see Category above). There are 4 layers to creating a navigation system:

1. Create categories
2. Create a menu
3. Add the menu to your website
4. Adding posts to categories

1. CREATE CATEGORIES

Here is how to create categories for your articles:

1. Go to Posts > Categories
2. Under Name, write the name for the category (e.g. Skills, Frameworks, Apps, Innovations are Tekiota’s categories)
3. Click on Add New Category

When you add category X as a parent of category Y, category Y becomes a sub-category of category X. This will turn category X into a drop-down menu and make category Y an item in that drop-down menu.

Create Categories

2. CREATE A MENU

Here are the steps to create a menu for your WordPress website;

1. Go to Appearance > Menus
2. Under Menu Name, write MainMenu
3. Click on Categories > View All
4. Check all categories & subcategories and click on Select All and Add to Menu
5. Organize the subcategories by dragging them under each category
6. Click on Save Menu

Create a Menu

3. ADD the MENU TO YOUR WEBSITE

And finally, to add the menu to your site, follow these instructions:

1. Go to Menu Location
2. If it says your theme does not support menu, choose a different theme
3. Under Primary Menu, choose the menu you saved as MainMenu
4. Click on Save Changes

Add Menu to Website

4. ASSIGN CATEGORIES to EXISTING ARTICLES

1. Go to Posts > All Posts
2. Choose a post, click on  Quick Edit
3. Check the category and subcategory and uncheck Uncategorized
4. Click on Update

Assign Categories to Posts

How-to Ultimate Guide

This concludes our ultimate guide on WordPress. It is a lengthy article but it contains all the information you need in one spot. Here is a quick video summary of all the skills we learned today:

We will detail more advanced practices in another article.