Atomic Blocks Theme Help File

The Atomic Blocks theme and plugin is developed and maintained by Array Themes, creators of finely-crafted WordPress themes. We built Atomic Blocks to learn the new block editor and share what we’ve learned along the way. This help file will help you become acquainted with the new editor and our new plugin, Atomic Blocks.


What is Gutenberg?

gutenberg block editor

The new WordPress block editor, currently referred to as Gutenberg, is a new way to build with WordPress. Instead of relying on page building plugins, shortcodes, and the like, WordPress is bringing block-based editing to the core editor. The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives.

Please check out our Beginners Guide to Gutenberg article to become more familiar with the new Gutenberg block editor.


What are blocks?

When we refer to “blocks” or “Gutenberg blocks” we are talking anything that can be inserted into the new editor to create content. Basically, anything you insert into the new editor will be in the form of a block. The new editor comes with a handful of default blocks such as paragraph, image, gallery, and more, to help you create standard posts and pages. Developers will also be able to provide more advanced blocks to help you create even more dynamic posts and pages.

gutenberg block editor

A look at the new block-based editor.


How to use the Atomic Blocks theme

The Atomic Blocks WordPress theme can be used without installing Gutenberg or the Atomic Blocks plugin, but we encourage you to install both of the plugins to get the most out of the theme. The theme was built with the new editor in mind and is most powerful with both Gutenberg and Atomic Blocks installed.

Install the Gutenberg plugin

install gutenberg

Before you can use the Atomic Blocks plugin, you’ll need to install the Gutenberg plugin. The plugin is available via the WordPress.org repository, so you can install it in your WordPress admin by going to Plugins → Add New and searching for “Gutenberg”. You can also download it directly from the repository and install it manually. Eventually, the Gutenberg plugin will not be required once the new editor is merged into WordPress core.

Once Gutenberg is installed and activated, you’ll notice that you have a new Gutenberg admin menu item, which takes you to a nice little Gutenberg demo. You’ll also notice that your edit post and edit page views have a new appearance. There are lots of articles about the new editor and how to work with it. Check out the Atomic Blocks blog and Gutenberg News to find the best articles about the new block editor.

Install the Atomic Blocks plugin

install atomic blocks

Once you’ve installed Gutenberg, you can install Atomic Blocks in the same way. You can either go to Plugins → Add New and search for “Atomic Blocks” or download it directly from our website to install it manually.

Once you’ve installed Atomic Blocks, you’ll be redirected to the Atomic Blocks Getting Started page which provides you with all kinds of info about the plugin and theme we’ve created. You can also read the Atomic Blocks help file here.


Getting Started

atomic blocks getting started page

The Atomic Blocks theme can be downloaded via our site. Once you’ve installed and activated the Atomic Blocks theme, you’ll be forwarded to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, install the Atomic Blocks plugin, browse the latest changes to the theme and more.


Theme Options

atomic blocks theme options

The Atomic Blocks theme comes with several Customizer settings that you can use to customize your site to your style. To access the theme options, click Appearance → Customize → Theme Options in your WordPress admin.

Theme Options

  • Content Width: This setting will let you change the width of the content area in your posts and pages. Images and text will be constrained to this width unless you are using wide image styles.
  • Font Style: Choose between a sans-serif font style (Muli and Nunito Sans) or a serif font style (Frank Ruhl Libre). This will change the font displayed on the front end as well as in your post editor.
  • Body Font Size: Choose the font size you would like displayed in the main content area of your posts and pages.
  • Title Font Size: Choose the font size you would like displayed in the titles of your posts and pages.

Site Identity

  • Logo: Upload your own logo image in place of the site title and tagline. You can also choose to hide or show your site tagline.
  • Site Icon: Upload an icon to be displayed in the browser tab of your site.

Colors

  • Accent Color: Change the accent color you see throughout the theme such as links, buttons, and more.
  • Background Color: Change the background color of your entire site. Please note that changing this could require you to change the colors of fonts and other elements that may conflict with your new background color.

This theme has two different menus that can be used throughout the theme.

  • Primary Menu – This is the main menu found in the header of your site.
  • Social Icon Menu This is the social media icon menu found in the footer of your site. See the instructions below to set up the Social Icon Menu.
    • To add a social icon menu, go to Appearance → Menus.
    • On the left side of the Menu page, click the Links menu item to add to your social links.
    • Add the URL for each of your social profiles and a label for the link. The theme will detect which site you are linking to and display a matching graphic. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, Slideshare, Medium, Apple, 500px, RSS and Email. If there is a popular service that isn’t supported and has an icon on FontAwesome, let us know and we’ll add it to the theme!
    • Now that you have the menu created, you need to assign it to the Social Icon Menu in the Theme Locations section
    • Save the menu when finished.

Footer Widget Area

atomic blocks footer widgets

The Atomic Blocks theme comes with a footer widget area that you can use to customize your footer. There are three widget columns that you can use to add widgets. The footer widget columns have a dynamic width, meaning if you only choose to use two columns, the column width will adjust to display the columns evenly in the footer.


Media Alignment Options

One of the aims of the new block editor is to let you build outside of the box, so to speak. One way to do that is by adding wide image styles to your media such as images, galleries and videos. The Atomic Blocks theme provides wide and full-width media styles for you to use. Please note that you will need to have the Gutenberg plugin installed to take advantage of these new styles.

atomic blocks alignment

Wide image alignment.

After you’ve added a photo, gallery or video to your post in the new block editor, you’ll get a toolbar above the content, as seen in the screenshot above. The toolbar have several alignment options including left, center, right, wide, and full width. Using these, you can determine the width and alignment of your media.

atomic blocks wide styles

Full width image alignment.

Clicking wide alignment will make the content go almost the full width of the page, but it will not hit the edge of the page. Instead, the media will have a padding on the left and right side of the page.

atomic blocks full screen style

Full width image alignment.

Clicking full width alignment will take your media to the very edge of the page, giving you an edge-to-edge, full-screen display.

Eventually, wide and full width alignment will be available for more than media, letting you create sections that expand to the full width of the page to accomodate more dynamic layouts.


Updating the theme

Right now, the Atomic Blocks theme requires a manual update, meaning you’ll need to upload the zip file to install the latest version. Soon, the theme will be available on the WordPress.org repo, which will let you update the theme right from your dashboard like you do with other themes.

In the mean time, using the Easy Theme and Plugin Upgrades plugin. This plugin will allow you to easily update the theme from the WordPress dashboard. Once installed, you can go to Themes → Add New → Upload Theme and upload the latest Atomic Blocks theme zip. While updating, a backup copy of the old theme or plugin is first created. This allows you to install the old version in case of problems with the new version.


Learn more about Gutenberg

If you’d like to learn more about Gutenberg, please visit our Beginner’s Guide to Gutenberg and visit our blog which will have regular tutorials and resources. We also publish a blog called Gutenberg News, which is a curated collection of Gutenberg tutorials & resources!


Finding good photos

Finding good photos for your site can be tough and expensive, but we’ve got a few sites that offer really nice photography for free. Feel free to browse these sites and find some photos that highlight your content.