Get Into WordPress

In This Course

What is WordPress

Simply put, WordPress is a free, open-source content management systems (CMS) that allows users to create simple or complex websites from the ground up or with little to no coding experience. WordPress offers a wide variety of free and paid themes, plugins and e-commerce solutions that assist with the development process. 

  • Themes control the overall style of a site. (fonts, colors, logo, etc)
  • Plugins allow you to add more functionality to a site. (the bells and whistles)
  • E-commerce is the store/shop functionality on a site (Woocommerce)

With over 30+ million sites built on WordPress, it takes the title as reigning champ for most used CMS on the world wide web, by a very long shot.  #JobSecurity 

Credit Website Setup
Play Video

Setup Hosting & Install WordPress

I’ve used many of the available hosting providers and have found Siteground to provide the most value in terms of UX, automation, reliability and support. WFA will be providing you with dev hosting until November 2022. We set it up this way so if you wish to continue web development then you’ll be able to purchase your own hosting plan at a discounted Black Friday / Cyber Monday rate. 

Follow along the video below to begin your set up

Play Video

Steps outlined in above video 

  1. Sign into Siteground
  2. Go to Websites > Collaborators
  3. Go to Site Tools
  4. Go to WordPress > Install and Manage
  5. Security > SSL > Install Let’s Encrypt SSL
  6. Go to HTTPs Enforce – Enable
  7. Go to WordPress > Install & Manage
  8. Fill out form – Click  Install
  9. Make sure you are able to sign into your site by going to yourdomain.com/wp-admin

Important Habits To Set 

Before we dive into the backend of your WordPress site, let’s go over good habits to set now that will save you both time and headache. 

Read Developers Documentation

Good software should have great documentation that clearly explains how to utilize the software correctly. If you are unable to figure out a feature or setting then go to the developer website and read their documentation on the plugin or theme you’re having issues with. Not only will this help you resolve the issue at hand, but you may learn about additional features that could be beneficial to your development.   

On the other hand, poor documentation is your red flag to go find a different solution. 

Back Up Your Site

Always make sure that you create backups of your site through out your development process. Especially at the beginning of your development career where you are more likely to . Not every client will provide you with a site that has automatic backups like Siteground. It is YOUR responsibility as the developer to ensure you’re able to safely restore a back-up in the event of critical error.

All in one WP migration (recommended) 

This is the plugin I‘ve been using for nearly a decade without issue. It’s super easy to pull local back ups and save to your drive, computer, dropbox or whatever file system you use. You can get away with using the free version if your site is small, but will need the pro for large sites. Well worth the investment.

7 Alternative Backup Plugins

This article outlines other backup alternatives. You can read through the pros and cons and see which might work best for you. What might be super intuitive for one developer, may not suit another.

NEVER update your wordpress installation, theme or plugins without backups !!
WordPress is built by a community of people from around the world. Not every plugin or theme will work harmoniously together. Make sure you have a recent back up of your site before performing any updates on your site.

WP Security

It’s incredible how quickly a new site can get hacked now-a-days. It’s also incredibly easy to avoid it. In addition to installing an SSL certificate, every site you set up needs to have basic security installed. Some hosting providers offer free security plugins with their hosting, others offer paid plans.

Wordfence (recommended)

This is my go-to free security plugin. It does a great job at alerting you of suspicious activity, embedded malware, and spam threats. It can be used on any site regardless of who’s hosting it.

SG Security 

This is a newly offered plugin by Siteground and can only be used when you host your site with them. 

Tab Organization

You’ll easily find yourself with multiple browser tabs that edit the same page. This causes problems when you make edits to Tab #1 and hit save, then make another round of edits on Tab #2 where your last edits were not made. Once you hit save, you’ll lose whatever was done on Tab #1.  Keep only one tab open at a time for the page editor. Check out the video below if you’d like to see what I’m talking about

Play Video

Incorporate Keyboard Shortcuts

Keyboard shortcuts are available everywhere and using them can significantly speed up your workflow. If you take a look at Google docs or Microsoft Word top menu and click Edit, you’ll see to the far right of each option the command symbol for Mac users, or control for Microsoft, plus another character or two. Those are the shortcuts for that function. So when you find yourself doing repetitive tasks, see if there’s a keyboard shortcut available to speed up your process.

Keyboard Shortcuts

WP Dashboard Overview 

This overview covers the most important parts of your WordPress dashboard. Please read through it and explore your dashboard while you do so. There is a video overview available at the end too.

Log In

Let’s login to your site enter the following in the web browser address bar: yourwebsite.com/wp-admin 

 

Admin Bar

The top admin bar will stay visible as long as you’re signed into wordpress but will not be visible to the public. It’ll have quick links to sections of the backend and will also allow you to edit the page/post that you’re currently viewing.

 

Dashboard Left Sidebar

The most common way of moving around in the admin area is by using the navigation links in the left sidebar. Some of these are used much more frequently than others, particularly posts, pages and comments.

The menu items in the sidebar will vary, depending on the role assigned to you as a user. Admin users will have access to everything whereas other roles will have various limitations depending on your set up. 

 

Dashboard

  • Home – Here you can organize your dashboard to show important information such as recent posts, security notifications, useful links, etc. If your dashboard home looks different from above, scroll to the bottom and look for the “set to default” link to be able to customize it.
  • Updates – Here is where you will see updates for the wordpress install, themes, and plugins.

 

Media

The Media Library can display items in a grid view, as thumbnails only, or a list view, which is more like the Page and Post lists that you just saw. A column that’s unique to the Media Library is Uploaded to. This tells you on which page or post a particular item is being used. This column may be blank if the item was uploaded directly to the Library and not attached to a page or post. This is useful for housekeeping by being able to quickly identify and remove media assets that are no longer in use.


 Posts 

A post is dynamic web page, meaning it can be used and shown in many different ways (in a blog page, shared on social media, etc). Posts can be organized with categories and tags..

Watch the following videos to understand the similarities and differences between Page and Posts. 
Play Video

Watch the following video to learn how tags and categories are used to organize your Posts

Play Video

Pages

As mentioned in the video, this is where you create the main static pages for your site such as Home, About, Contact, Services, etc.

The pages list is similar to the Posts list but has fewer columns. This reflects the simpler nature of pages vs. posts. Notice how pages are static and are not listed by date. They don’t have tags or categories, and you can change the template unlike Posts. 

Open and look at the Page list page when you’re in your WordPress dashboard. When you click on the title of a page, it will open in the editor. However, notice that when you roll the mouse pointer over the title of a post, additional links appear below the title. These include Edit (same as clicking on the title), Quick Edit, Trash, and View. Some plugins add more links here as well.

  • Quick Edit allows you to change much of the meta-information about the post, without opening it in the editor. 
  • Trash moves the post to the trash folder for 30 days before deleting permanently automatically

 WP Page List

 

Comments

If you have a blog post that allows users to comment, they will show up here where you can then approve them, mark them as spam, reply to them or delete them.

 

Appearance (visible after theme install)

  • Themes – Where you go to activate or change your theme.
  • Customize – Where you can update site information, customize certain themes and add your custom CSS.
  • Widgets – This is typically where you would find your footer sections and sidebar sections. Since we are going to use Elementor, we will not be editing the footer here.
  • Menus – Here is where to create and edit your site navigation. You are able to create multiple menus for different menu locations throughout the site. I.e Header, Footer, Mobile, Sidebar, etc

 

Plugins

Here is where you add and manage your site’s plugins. Try to keep your plugin count under 25. The fewer plugins, the less bloat your site has and the faster it will load.

 

Users

Update your profile, change password, add new users and permissions to the site..

 

Tools

Import/export options for site content. Great for moving or bulk updating content from one site to another.

 

Settings

  • General – Update site Title and Tagline (what shows on the tab and in search engines google), the site Admin email, Timezone, Language, Date format.
  • Reading –  WordPress is set up in such a way that by default the front page displays the latest posts from your blog. Having a static page is a feature that will be useful for those who desire to keep their blog in a separate location within their site. If are not creating a website specifically for blogging, then you can create a new page called “Home” and set it here.
  • Permalinks – Controls the way site URLs are shown. Click on the link found in the paragraph at the top of this page for further details.

 

Privacy

Sites are required to inform their users on how their information is used. Please read through text on this page.

 

Screen Options Tab (IMPORTANT)

The Screen Options tab appears on most administrative pages and it allows you to control the elements that appear on the page. These are the elements that appear to you. When other people log in to the Dashboard, they will see the selections that they have chosen.

Click the Screen Options tab from the top and you’ll see a list of the administrative widgets that are available on that page. Each widget has a checkbox to control its display on that page. Different pages will have different selections and some pages, like the Editor, have a lot more than this. It is common for a screen to be missing information (for example, the post excerpt section is simply not showing.)  This can be a frustrating experience and the screen options tab can be the solution.

Play Video

What Is WP Gutenberg?

Gutenberg is the new default block editor of WordPress where you write your post or create your page content.  It was launched in December 2018, with WordPress version 5. It’s still relatively new so has a lot of room for improvement but it is likely going to be the choice editor in the future.

While we won’t be building our sites with Gutenberg, it is important that you become familiar with it now. So please watch the video below and do the below exercise after completing your quiz.

Play Video

Lesson 1 Quiz

10

Begin your quiz for Intro to WordPress Development: Lesson 1

1 / 10

Will your default WordPress install have a static front page?

2 / 10

What is the best option for associating multiple keywords with posts?

3 / 10

What are categories?

4 / 10

Can Posts be Categorized?

5 / 10

Can pages have tags?

6 / 10

A post is which of the following?

7 / 10

8 / 10

If you find that there is a section on one of your dashboard pages that is missing, the FIRST thing you should do is:

9 / 10

A post is which of the following?

10 / 10

What is the difference between posts and pages?

Your score is

The average score is 84%

0%

Lesson 1 Exercise

This exercise isn’t intended to teach you everything needed to build pages, but instead, it is to have you spend time playing around with and exploring the page and post default Gutenberg editor. Familiarize yourself with it the best you can, have fun and add different elements. Follow your intuition and see what you can come up with! 

Again, we will not be building our sites with Gutenberg, but it’s important you have a basic understanding of how this block editor works.

If you have questions, shoot me a message on slack or schedule a call and I’ll be happy to help!

Add a Post 

Learn how to create a blog post by selecting the proper tools and using Lorem Ipsum to add content. We will delete these posts later so have fun with them! 

  • Create a post.
  • Give the post a title.
  • Fill the post with content using Lorem Ipsum.
  • Explore other builder elements and add them to your page.
  • Open the List view observe your block editor structor.
  • Add a Featured Image.
  • Choose tags and categories.
  • Publish and View Post.

Add a Home Page and Blog Page

Learn how to create a web page by selecting the proper tools and using Lorem Ipsum to add content. We will delete these pages later so have fun with them!

  • Create a page.
  • Give the page the title “Home”.
  • Fill the page with content using Lorem Ipsum.
  • Explore other builder elements and add them to your page.
  • Open the List view observe your block editor structure.
  • Add a featured image.
  • Publish and view page.
  • Go to your dashboard Settings > Reading
  • Set homepage to your newly created static page “Home”
  • Visit your sites front end and see page.
  • Repeat the above steps to create a Blog page, titled “Blog” and set your new Blog page as your posts page under Settings > Reading.