24/7/365 Support(866) 96-GATOR
  1. Knowledge Base
  2. >
  3. Design Tools
  4. >
  5. WordPress - Themes and Blocks

WordPress - Themes and Blocks

Guide to WordPress Themes and Content Layouts with Blocks

When building a website either for business or hobby, WordPress is an excellent content management system to use. 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 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 side menu for Appearance and Themes selected in submenu
  2. 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.
  3. To view additional WordPress themes, click on the Add New button at the top of the Themes page.
    WordPress dashboard button to add themes screenshot
  4. The Add Themes page shows themes that are available through the WordPress.org repository of themes. Many of those themes are free or offer upgrade options for purchase.
  5. From here, you can browse all available WordPress themes or search by a specific keyword, author or tag with the top menu options.
  6. Hover your mouse over the theme's thumbnail to show the choices to preview the theme, read its details, and install.
    WordPress Dashboard option bar to search themes screenshot
  7. After installing a theme to your WordPress site, an Activate button will appear.
  8. Click the Activate button if you wish to apply the new theme to your WordPress site.

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 into the WordPress Dashboard.
  2. From the left-side navigation menu, hover over Appearance and then click Themes in the sub-menu.
    WordPress Dashboard side menu for Appearance and Themes selected in submenu
  3. Along the top of the screen, click the Add New button.
    WordPress dashboard button to add themes screenshot
  4. On the Add Themes page, click the Upload Themes button.
    WordPress dashboard option to upload new theme
  5. Click the Choose File and navigate to the appropriate file on your computer.
    Note: Be sure the files are compressed in a .zip format.
  6. Click Install Now.
  7. Click Activate.
Note: If you get an error when you go to Install Now, make sure 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 simply 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:

    Location for WordPress theme directory.
  3. Upload your compressed theme file into the /wp-content/themes folder:
  4. Uncompress your theme file within the /wp-content/themes folder as shown below:

    Extract compressed file.

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

  1. Log into the WordPress Dashboard.
  2. Hover over Appearance in the left-hand menu and select Themes in the sub-menu.
    WordPress Dashboard side menu for Appearance and Themes selected in submenu
  3. Hover over the theme's thumbnail image and click the Activate button.
    WordPress themes menu.
Problems?

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 that 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 each other. This allows you to customize the blocks to better fit your needs and layout.

When creating pages and posts within WordPress, you will be able to 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 into 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 which 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 pending what you initially selected.
  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.

    Location for WordPress New Block.
  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 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- 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 - Lets you edit the layout of your page content by implementing a page break with automatic pagination, spacers, columns, buttons, and more.
  • Widgets - 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.

  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, simply 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

Location for WordPress New 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 that you wish to revert.
  3. Redo - Similar to the undo button, the redo button will allow you to revert back to a change that you had undone previously.
  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 quickly switch it into draft mode. 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 and color, additional CSS, and formatting.