1. Knowledge Base
  2. >
  3. Results
  4. >
  5. WordPress - Themes and Blocks

WordPress - Themes and Blocks

Guide to WordPress Themes and Content Layouts with Blocks

WordPress is an excellent content management system for building a website, either for business or hobby. Its popularity has allowed numerous themes to be created which are either free, offers a paid upgrade, or is a premium theme. Themes can be found either directly from the WordPress.org repository of themes (available through your dashboard) or 3rd party websites.

Regardless if it is a free or premium theme, there are 2 ways in which you can add a theme to your WordPress site. This article will address these 2 ways on how to add a theme to your WordPress website in addition to 

Add a Theme via WordPress Dashboard Themes

WordPress allows you to search for themes based on specific keywords and/or features. To begin searching from your WordPress Dashboard:

  1. In the left-side navigation menu, hover over Appearance and then select Themes in the sub-menu.

    WordPress Dashboard Apprearance > Theme

    The Themes page shows the installed themes which may be applied to your WordPress site. You are only allowed to have 1 theme active within a single WordPress installation.

  2. On the next screen, you will have the ability to select from Premium Themes, WordPress.org Themes, Upload, search for a specific theme, or search for themes with specific features.

    WordPress Dashboard Add Theme

    Many of those themes are free or offer upgrade options for purchase. From here, you can browse all available WordPress themes or search by a specific keyword, author, or tag with the top menu options.

  3. Please hover your mouse over the theme's thumbnail to show the choices to preview the theme, read its details, and install.

    WordPress Dashboard Theme Thumbnail

  4. After installing a theme to your WordPress site, an Activate button will appear.
  5. Click the Activate button if you wish to apply the new theme to your WordPress site.

    WordPress Dashboard Activate Theme

Downloading and Installing a Theme

After downloading a theme through your preferred method to your computer, there are two possible ways to install the theme on your WordPress site.

Note: Not all WordPress themes are compatible with the latest version of WordPress. Be sure the theme being installed is compatible with the version of WordPress installed.

WordPress Theme Installer

Install a downloaded WordPress theme through the WordPress dashboard:

  1. Log in to the WordPress Dashboard.
  2. From the left-side navigation menu, hover over Appearance and then click Themes in the sub-menu.

    WordPress Dashboard Apprearance > Theme

  3. On the Add Themes page, click the Upload button.

    WordPress Dashboard Upload Theme

  4. On the next page, click Upload Theme.

    WordPress Dashboard Upload Theme

  5. Click the Choose File and navigate to the appropriate file on your computer.

    WordPress Dashboard Choose File

    Note: Be sure the files are compressed in a .zip format.
  6. Click Install Now.

    WordPress Dashboard Install Button

  7. Click Activate.

    WordPress Dashboard Activate Button

Note: If you get an error when you go to Install Now, ensure that the zipped file you are uploading only contains the theme files. Sometimes a theme developer may include extra files in the zipped folder.

Manual Install

If you experience issues with the theme installation, it is possible to manually install a theme by uploading it directly to your server.

To manually install a WordPress theme, you need to upload your theme directory to your WordPress themes directory:

  1. Open File Manager in cPanel or connect to your server with an FTP client.
  2. Navigate to the themes directory inside of the wp-content directory in your WordPress document root:

    File Manager wp-content Theme Folder

  3. Upload your compressed theme file into the /wp-content/themes folder:
  4. Uncompress your theme file within the /wp-content/themes folder by:
    1. Right-click on the theme file and select Extract.

      Extract File

    2. Click Extract File(s) on the pop-up.

      Extract File

    3. Wait for the Extraction Result and then click Close.

      Extract File

After successfully uncompressing your theme into the WordPress themes folder, you can activate it using the following steps:

  1. Log in to the WordPress Dashboard.
  2. Hover over Appearance in the left-hand menu and select Themes in the sub-menu.

    WordPress Dashboard Apprearance > Theme

  3. Hover over the theme's thumbnail image and click the Activate button.

    WordPress Dashboard Activate Theme


If blank pages are encountered after installing a new theme, please refer to the following article for additional information:

Content Layout Options - Customizing Blocks

With the release of WordPress 5.0, WordPress is using the new Gutenberg editor as the default content editor. The new Gutenberg editor, also known as a block editor, allows more customized options when creating and adding content to a WordPress site.

So what is a block exactly? A block is each piece of content you would use to construct the information on a page or post. A block could be a title, content, video, image, image gallery, buttons, and more. Each block acts independently of the other. This allows you to customize the blocks to fit your needs and layout better.

When creating pages and posts within WordPress, you will add, remove and customize each block. The following steps will go over these basic functions when using the block editor.

Adding a New Block

To add a new block to a page:

  1. Log in to the WordPress Dashboard.
  2. In the left-hand side menu, select Pages if you want to create static page content like an About, Contact, or Services page.
    Select Posts if you want to create a blog entry that is dynamic content.
  3. A listing of the current pages or posts, pending what you selected, will appear.
  4. Click the Add New button at the top of the page to create a new page or post, depending on your initial selection.
  5. To edit an item already created, hover your mouse over the title:
    • A list of hyperlinks will appear under the title.
    • Click Edit.
  6. Once in the editor, click the + in the top left of the page/post.

    Add Block Plus Icon

  7. You will be presented with a list of your most-used blocks.
  8. You can select one of these, use the search bar quickly to find a specific block type, or scroll down to reveal other block categories.
  9. If you opt to scroll down and view other block categories, click on the category title to expand and reveal the available blocks.
  10. Click on the block you use to use, and it will be placed on the page/post.

Below you can find a brief description of popular block categories:

  • Inline Elements- This allows you to insert an image or media into the current text block so that it all falls in line.
  • Common Blocks - Contains the basic and commonly used blocks such as a quote, an audio block, or an image gallery.
  • Formatting - Provides formatting blocks like a table, HTML code, and text formats to stylize quotes, verses, and preformatted blocks.
  • Layout Elements - This lets you edit the layout of your page content by implementing a page break with automatic pagination, spacers, columns, buttons, and more.
  • Widgets - This allows you to use widgets similar to how widgets were used before the Gutenberg editor. You can use this block type to implement shortcodes from plugins and other blog-type features like archives, categories, recent comments, and latest posts.
  • Embeds - Allows you to embed external content from various social media such as Facebook, Instagram, Tumblr, Reddit, and more.


Customizing a Block

Many customizations can be done directly within the block itself. When editing content in an individual block, a formatting bar will appear and provide options to edit the current content. In the right-hand sidebar, there is a tab called Block. This tab provides additional formatting options for the currently selected block.

When adding blocks to your page or post, you may find it beneficial to rearrange them. To do this:

  1. Hover your mouse over a block.
  2. On the left-hand side of the block, navigation buttons will appear.

    Customizing Block

  3. Click the arrow up or down to move the block above or below the adjacent block one at a time.
  4. Click and hold your mouse to select the dots. This will allow you to grab the block and move it to your desired location within the page content.

Removing a Block

To remove a block, select the block that you wish to remove. Click the vertical 3 dots button in the block's individual menu bar. In the drop-down, select Remove Block.

Other Useful Block Options

Other Useful Block

  1. Add New Block - Located in the upper left-hand corner or when you hover over the space at the bottom of the page/post content. These two buttons will allow you to add new blocks.
  2. Undo - This button will allow you to undo a change, addition, deletion, or any other task you wish to revert.
  3. Redo - Similar to the undo button, the redo button will allow you to revert to a change that you had previously undone.
  4. Page Information - This information button will reveal details about the page you are editing, such as the content’s word count, headings, paragraphs, and the number of blocks on the page.
  5. Block Navigation- This button provides a drop-down list of the blocks used on the page/post. Select the block from the drop-down to jump to it within the content.
  6. Switch to Draft - If a page/post is already published, this option will allow you to switch it into draft mode quickly. This will unpublish the page/post and allow you to work on it without it being active on your website.
  7. Document - This tab provides the page/posts specific settings. Within this section, you will have the option to set the visibility, a publish date, view revisions (if more than 1 update to content), change the permalink, add a featured image, and more.
  8. Block - This option will reveal the advanced options for a selected block. Depending on the block chosen, these options may include font style, color, additional CSS, and formatting.