September 10, 2020

WordPress A to Z Tutorial: A Beginners overview to WordPress

WordPress Tutorials

the website architect

By

wordpress a to z in 24h

Introduction

WordPress is big and has a lot to it. I don’t believe WordPress is something that can be learned in a day or so because theirs so much to cover. This blog post is an overview of the notable things that make WordPress what it is, from A to Z.

Admin Bar

The WordPress Admin toolbar only appears when you’re logged into a WordPress site. This bar provides you with helpful quick access to common functions like creating a new post or page, viewing the homepage, or to log out.

wordpress admin bar

Sometimes when you install plugins new items may be added to the admin toolbar. It’s common when installing a caching plugin that a “clear cache” link is usually added.

You can even add options to the toolbar yourself if you so feel inclined. To do it you would either have to install a plugin like WPMU DEV’s or you can add it items yourself through custom PHP code.

If you don’t like it the toolbar, it can be disabled quite easily. To disable the toolbar, go to Users > Profile in the left WordPress menu and then uncheck the box where it says “Show Toolbar when viewing site”. Hit save, and its gone!

Blogging

WordPress is great for blogging. In fact, that’s how it all started. Blogging was once thought to be the future of the internet, which to an extent it still is today but it’s now so much more than that.

You may even forget that WordPress is built for blogging if you make websites that aren’t built around it like small business websites.

old wordpress dashboard
WordPress version 0.72

If you browse through WordPress you can see it really does prioritize blogging. The first item the admin menu is Posts (excluding dashboard), the settings are mostly blogging-related like comment moderation, users, post links, profiles, and login restrictions. Even by default, your homepage is set to your show your latest posts.

Customizer

wordpress customer options panel

The Customizer has some of WordPress’s options and settings. You can get to it by going to Appearance > Customize in the WordPress left side menu.

By default, the Customizer has settings for things like the site logo, tagline, menus, Widgets, and default page settings. Some themes (if installed and activated) can add some options to this area to further customize your website beyond the basic settings it offers by default.

The Customizer also contains one of my favourite features of WordPress, Additional CSS. The Additional CSS area enables you to type in CSS code with a live-view of the website all on one screen, which becomes very helpful when developing, or customizing a WordPress website.

WordPress’s Additional CSS

Dashboard

The dashboard is the first page to you log into your WordPress website. Personally, I find it gets very little use. But every now and again ill need some information that the dashboard can give you really quickly like the WordPress version.

The dashboard can be customized to show:

  • Recently published articles
  • Links for common quick actions
  • The total sum of posts and pages
  • A quick post-draft box form for making quick posts
  • WordPress related events on meetup.com
  • WordPress news
  • Site health status

Sometimes when you install a WordPress plugin they will add a widget to the dashboard.

You can customize the dashboard by toggling on and off certain Boxes or widgets, including ones that plugins may display.

wordpress dashboard settings
Customizing the dashboard with the Screen Options tab at the top

You can further customize the dashboard by using different WordPress plugins. With those plugins, you can turn your dashboard into the ultimate personalized quick access page perfect for you by adding it more widgets and your own links.

Editor (history)

The WordPress editor has seen some changes over the years. It’s been improved drastically in both the user interface and functionality. The content editor for a post used to be just a simple text area.

old wordpress content area
The old content editor in WordPress version 0.72

Later an update came to the simple content editor that made it more user-friendly and appealing. It also added an emphasis on the use of different heading types (h1, h2, h3, so on…) and added more features like the availability to change between visual and code-based editing views.

wordpress classic editor
The older basic content editor in WordPress. It’s still getting use today, but is slowly being replaced with the newest version.

Today the default WordPress editor has been transformed into its own stand-alone builder so you can make more advanced layouts with more rich content elements like direct video embeds & file download buttons. This new editor is called the Gutenberg editor and it came out in WordPress 5.0 on December 6, 2018. Since then. they’ve been improving it and making it a solid contender against the other big page builders out there like WPBakery and Elementor.

gutenberg editor

You can tinker with the live demo of Gutenberg to learn more about using it.

Featured Images

A featured image is the primary image that WordPress associates with your post or page. Featured images are also seen as a post’s thumbnail or a pages header background.

Featured images aren’t available by default in WordPress. This is something that has to be enabled through using PHP. If you downloaded your theme, chances are they are already enabled. But if you are interested this is the code to enable featured images in WordPress (to be added to your functions.php file):

add_theme_support('post-thumbnails');

To set a featured image on a blog post, edit the blog post and on the right-side column there fill be a “Featured image” dropdown. Click the add image button and choose what you want to be your featured image from your media library.

Gutenberg

Gutenberg is WordPress’s newest version of the default page or post editor. It was introduced in WordPress version 5 in December 2018 and its aim was to completely overhaul the basic default editor.

When it first got released in 2018, it felt a little premature for most. It didn’t have all the features and stability that it has today and it was completely new so site owners were reluctant to use the new Gutenberg. Plugins were soon made after its release to revert WordPress back to having the old editor, just to have something familiar to use.

gutenberg editor

Gutenberg has gotten a lot better since its release. Its more stable, faster, robust, and feature-rich. The builder now competes with some of the bigger builders like WPBakery and Elementor.

Some WordPress users still go out of there way to avoid it using the new editor, but its growing on some WordPress users – like me.

Hackers

Ah WordPress security, a misunderstood big aspect of WordPress. You’ll see trending articles about WordPress sites getting hacked and they can mislead you into thinking WordPress is actually not a secure framework.

The reality is WordPress as a framework is very secure. They are always updating and patching the new security exploits monthly to help make the framework more and more attack-proof.

People think that you need to install WordPress security plugins just to have a secure site, but really that’s not the problem.

Where the vulnerabilities come in are when people start installing plugins from random websites are fail to update the existing ones.

There are mainly 3 ways for your WordPress website to hacked:

  1. Outdated plugin with a vulnerability
  2. Installed a plugin from an unofficial source that has malware
  3. Weak username/password combination

#1 Is by far the most common cause of websites being hacked. Your websites can be safe is you use a minimal amount of up-to-date plugins and have a security username and password combination.

Image Sizes

WordPress uses images in a smart way. Normally when you link in the image with HTML, it’s to a single image with certain image quality. With WordPress, they use different sizes of the same image so you can pick what size can appropiatly be placed for the given situation.

When you upload an image to the WordPress media library, WordPress will automatically generate that same image in 3 different additional sizes, thumbnail, medium, large. These generated images will appear as one in your Media Library but will be there in the folders that house your images in the WordPress file structure.

The purpose of these different file sizes are so you can speed up your website by using the appropriately sized image for the size where it’s going to be placed.

wordpress image sizes

You can change the size of the image by changing it in the block settings in the right-side column in the Gutenberg editor.

Just Another WordPress Site

“Just another WordPress site” is the default tagline used in WordPress websites.

Its become a really common phrase in the WordPress community because of its prevalence.

how to change just another wordpress website tagline

You can change the site tagline in the Customizer under Appearance > Customize > Site Identity.

Keyboard shortcuts

WordPress has a big list of helpful keyboard shortcuts built into the backend to help you work faster and more effeicent.

Some basic text editor keyboard shortcuts are:

ctrl + c : Copy
ctrl + v : Paste
ctrl + a : Select all
ctrl + x : Cut
ctrl + z : Undo
ctrl + y : Redo
ctrl + b : Bold
ctrl + i : Italic
ctrl + u : Underline
ctrl + k : Insert/edit link

You can learn more about keyboard shortcuts on the official WordPress support website.

Login Page (/wp-admin)

The login page is the page used to login into the backend of your WordPress website.

By default to, to get to your login page you go to your homepage and add /wp-admin after the homepage base URL.

wordpress login page

The login page is pretty boring as it comes, but it can be customized.

You can add in your own logo using CSS in your functions.php file or by using a plugin. You can also add CSS to the page itself to change the colors, fonts, and spacing.

This is the code to change your logo through coding in CSS, to go in your functions.php file:

function my_login_logo() { ?>
   <style type="text/css">
      #login h1 a, .login h1 a {
       background-image: url(LOGO_URL);
       height:65px;
       width:320px;
        background-size: 320px 65px;
       background-repeat: no-repeat;
       padding-bottom: 30px;
     }
   </style>
<?php }
add_action("login_enqueue_scripts", "my_login_logo");

Be sure to change the LOGO_URL with the actual logo of your URL, found in your media library.

For added security, you can also change the URL of your login page with a WordPress plugin. This makes your site less susceptible to bots that are aimed at scanning for and using login pages to gain access to WordPress websites.

Media Library

The WordPress media library is where all your images, videos, and documents are stored. To get to your media library click on Media in your left WordPress menu.

By default, the media library has some restrictions like file types. PHP may even put a restriction on the size of the file you can upload to WordPress. To make WordPress support more file types like SVGs (which it doesn’t normally) you would either have to install a plugin or modify your WordPress’s function.php file to enable those extensions and file types.

Here’s how to enable SVG images with PHP, to be included in your themes function file:

function add_file_types_to_uploads($file_types) {
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes);
    return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Other than that, the media library is pretty straightforward. Drag and drop files in or upload them by file browser, and then you can use them anywhere in your WordPress website.

Navigation Menu

The navigation menu is the menu that WordPress uses in the header of your website. At any time you can add, remove, or edit items in your WordPress menu with ease.

wordpress menu customization

To edit your menus, go to Appearance > Menus in the left WordPress menu.

There are plugins that you can install that adds more features to WordPress’s menu editor, which add things like the ability to add icons, or creating column layouts inside an item’s dropdown.

Open Source

WordPress as a framework is open-source. Because WordPress is open source it means that you can distribute it, or modify it in any way you want. That means you can customize WordPress as much as you want without running into legal trouble.

You can download the latest version of WordPress on the official site.

Plugins

Plugins are add-ons/extensions for your WordPress site that add functionality or customization to it. At this point, there are plugins for almost anything you could want. Instagram feed? Plugin. Image slider? Plugin. Entire social network? Plugin.

Most of the time when you install a plugin it will add an option in your main WordPress menu found on the left side of the screen when you’re logged into your website.

The vast majority of plugins are free to download, with only some having a dedicated website for downloading from. Plugins may come with premium versions that do cost money that add even more features and customization to that plugin.

wordpress plugin store

Here’s some different kinds of plugins you can download:

  • Slider/carousel plugins
  • Gallery plugins
  • Speed optimization plugins
  • Social feed plugins
  • and many many more

Queries

WordPress queries are used to get data from your website’s WordPress database. This is only important to understand when you’re creating your own WordPress theme, and so it involves some PHP and HTML coding.

The most common information that’s pulled with queries is WordPress blog posts or blog categories.

Here is a basic example of a WordPress query that gets all the posts that have a category that has the ID of 2.

<?php
	$args = array(
	     'posts_per_page' => -1,
	     'cat' => 2
	);
	$q = new WP_Query( $args );
?>

RSS feed

RSS feeds are used to subscribe to new posts on a website. WordPress has RSS feeds built in the available widgets you can add to the sidebar of your website.

The idea is that a RSS feed client would house/retrieve all the blogs your subscribed to and display for you all in one place.

WordPress connects to RSS feeds by your site’s URL /feed. For The Website Architects RSS feed, its located at https://thewebsitearchitect.com/feed/

You can see WordPress automatically generates the XML code that the RSS client would use to get the recent content from your website.

Shortcodes

Shortcodes are a small pieces of code used to inject things like widgets or plugin features into your WordPress page or post. Shortcodes are generally placed into text blocks with a WordPress page builder or can be run directly using PHP.

A an example of a shortcode would be:

[gallery id="12"]

Assuming that the shortcode was setup, the shortcode above would inject a gallery with an ID of 12 depending on where you put the shortcode.

Shortcodes are used very commonly with plugins that add new on-page frontend features like galleries, calculators, or sliders. They robust enough to place anywhere, while still being simple enough that anyone who doesn’t know code can understand.

Shortcodes can have attributes with them. These are used to customize what the shortcode would inject. Like in my previous example, the id represents what specific gallery its to output. Depending on the plugin that created the shortcode determines what kind of attributes it may have.

Themes

Themes are the heart, body, and soul of every WordPress site. If this post wasn’t in alphabetical order, themes would go first they are that important. Themes are a very important collection of PHP and CSS files (and a lot more) that determine how your WordPress site will look and function.

You can buy and download themes off of sites like ThemeForest or Envato Elements that you can use on your own WordPress sites. You can even get some free themes, though those ones typically have little features and offer little customization.

You can change your WordPress theme under Appearance > Themes in your WordPress menu. When you activate a different theme, it will instantly change the way your entire site looks.

Usually, the theme area of WordPress gets very little use after you install your theme. Swapping between themes can sometimes be used as a tool to find out what’s causing a WordPress error you may be facing. Changing themes doesnt hurt your site as you can easily change back.

Users

Visual Composer

Now called WPBakery, Visual Composer is / was a popular WordPress plugin that gives you a drag and drop page builder, along with some other powerful tools like templates, add-ons, and pre-made elements.

There’s been some interest surrounding the name change of Visual Composer, and why it happened. To summarize from a post from the plugin creates themselves; They were trying to push a new page builder product that would be under Visual Composer, but they couldn’t sell another product having Visual Composer name attached to it due to “marketplace restrictions”. So they created WPBakery, a newer stand-alone page builder.

Today, WPBakery is one of the most popular and used page builders for WordPress. It’s robust, it works, and it has a lot of features which makes it a solid choice for building your pages.

Widgets

Widgets are little features or pieces of content you can add website. Widgets are most commonly used in your blog’s sidebar and website footers columns.

wordpress widget list

Some of the most used and notable widgets are:

  • Text – Arbitrary text.
  • Custom HTML – Arbitrary HTML code.
  • Image – Displays an image.
  • Navigation Menu – Add a navigation menu to your sidebar.
  • Search – A search form for your site.
  • Categories – A list or dropdown of blog categories.

You can code and create your own widget with PHP, or you can install a plugin that can do that for you.

XML Export

WordPress has a feature built in where you can export an import site data from one site to another.

You can find these features under Tools > Import and Tools > Export in the left WordPress menu.

By default, You can export/import these different kinds of website content:

  • All Content
  • Posts
  • Pages
  • Media

There are plugins that when installed add an export/import content option to this area, like Contact form 7 which allows you to also import/export your contact forms.

This tool is very helpful if you want to quickly and manually back up your WordPress website without the use of plugins.

Yoast

Yoast is another popular plugin in WordPress that has over 5,000,000 installs.

The plugin offers many SEO related options you can use to start making your website appear higher in search results.

Yoast allows you to:

  • Customize snippet data
  • Have an automatic generating sitemap
  • Easily be able to edit your .htaccess and robots.txt files
  • Have control of what kinds of pages are indexed or not
  • Add keywords to your post or pages

Overall the plugin offers a lot of features, but it has been known to slow down websites. There are alternatives to Yoast that are worth looking into like All In One SEO Pack.

Zip Download

WordPress is free to download and super easy to install. You download WordPress off the official website, and extract the zip onto your route server directory and you’re ready to go through the setup process.

The WordPress ZIP is just 13.9 MB in size, and as a whole can be installed in just 5 minutes.

WordPress can be even easier to install with one-click installers in some hosting platforms like SiteGround (the one I use) and BlueHost.

Conclusion

Well that’s it, WordPress A-Z for beginners. I believe this post offers a lot of insight into what a WordPress user is familiar with some of the things that make WordPress great.

If you’re interested in having your own WordPress website done by a professional, you can contact The Website Architect to get your website up and exactly the way you want it!

By

the website architect profile picture

I'm The Website Architect, just another web developer in Toronto, Canada. I'm passionate about Web Design, WordPress, and anything to do with websites. My goal is to make the Internet a more beautiful and usable place, one design choice and website at a time.