- Getting Started
- Install the Demo Data
- Recommended Plugins
- Install Jetpack
- Customizer Settings
- Widget Areas
- Create a Gallery or Video Post
- Page Templates
- Create the Contact Page
- Add Subtitles to Pages and Sections
- Add a Store with WooCommerce
- Finding Good Photos
Once you’ve activated Atomic, you’ll be forwarded to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, browse frequently asked questions, and activate your theme’s license to enable theme updates.
We strongly recommend that you add your theme’s license key in the Getting Started page. By adding your key, you activate seamless theme updates which lets you update your theme in seconds. With theme updates enabled, you’ll get a notification on your Themes page whenever there is an update available. You can update right in your WordPress dashboard, keeping your site healthy and secure.
You can find your theme’s license key by signing in to your Array dashboard and visiting the Downloads page. Click the Manage License link on your theme to view the license key. Copy this key and enter it into the sidebar of your Getting Started page and click the Activate License button. Your license key should now be active!
Theme Demo Data
When you first activate Atomic, it will look like simple blog with your existing posts. This is expected since Atomic needs you to modify a few settings before it will look like the demo. Optionally, you may install our Atomic demo data, which will populate your site with the pages you see on our live demo. This can give you a head start in setting up your site. Once you get your site setup and get the hang of it, you may delete the unwanted posts or pages as you see fit.
You’ll want to install and activate both the Jetpack plugin (if you want the Featured Content Carousel) and WooCommerce (if you want a store) before importing the demo data so those posts are also included in the import.
Download the Atomic demo data here. You can install this XML file by going to Tools → Import → WordPress and click Choose File. Upload the xml file and follow the steps to import. When the demo data is finished importing, you should have several new posts and pages to work with going forward. Hooray!
There are a few features used throughout the theme demo that are added by a plugin. These plugins are entirely optional, and won’t take away from the performance of the theme. Here is a list of plugins and what they add to the theme.
These plugins can also be installed via your theme’s Appearance → Getting started page. Just click the Plugins tab to see the recommended plugins for your theme.
- Jetpack – Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Jetpack adds the portfolio, testimonials, sharing features, and extra galleries to Atomic.
- WooCommerce – WooCommerce lets you sell physical or digital goods on your website. Check out the Shop on the Atomic demo.
- MailChimp for WordPress – This plugin let’s you collect email subscribers via a MailChimp widget or shortcode placed in your content. You can see an example of this in the footer of the Atomic theme demo.
- Shortcodes Ultimate – With this plugin you can easily create tabs, buttons, boxes, different sliders, responsive videos and more. See the Shortcodes page on the theme demo to see a few examples.
- WPForms – This plugin allows you to quickly and easily create contact forms with a drag and drop editor.
Install and Setup Jetpack
Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Atomic uses several of the Jetpack features to add things like sharing icons, related posts and sweet photo galleries.
- Install Jetpack by going to Plugins → Add New and search for “Jetpack”. Install and activate the plugin.
- After activating Jetpack, you will be asked to connect to WordPress.com to enable the Jetpack features. Click the connect button and log in to a WordPress.com account to authorize the Jetpack connection.
- If you don’t yet have a WordPress.com account, you can quickly create one after clicking the connect button. This will allow you to use Jetpack for Atomic or any other theme in the future.
Once installed, activated, and connected to WordPress.com, you can visit the Jetpack settings page, which is now available at the top of your admin menu. You will need to activate the following Jetpack features by clicking Settings tab at the top of the page, and clicking the Activate link next to each feature. For the best performance, we recommend deactivating all Jetpack features by default and only activating the features that suit your site.
- Carousel – The Carousel adds a beautiful lightbox carousel to your gallery images. Learn more about the Carousel
- Contact Form – Add a contact form to your site by activating the Contact Form feature. Learn more about the Contact Form
- Custom Content Types – Custom Content Types adds portfolio and testimonial features. Learn more about Custom Content Types
- Tiled Galleries – Add a tiled or square mosaic gallery to your projects with the Tiled Galleries feature. Learn more about Galleries.
- Sharing – Add sharing buttons to your blog posts to give your readers the ability to easily share your content with Twitter, Facebook, and a host of other services. Learn more about Sharing.
- Related Posts – Show your visitors related posts they might be interested in. Related posts will automatically be output on your single post pages upon activation. Learn more about Related Posts.
Atomic comes with several Customizer settings that you can use to customize your site to your style.
Theme Options → General Settings
- Header Title: Add a large text title to the header on the Homepage. See here for an example.
- Header Subtitle: Add a subtitle to the header on the Homepage. See here for an example.
- Footer Tagline: Change the footer tagline found at the bottom of your site.
Theme Options → Front Page
- Front Page Sections: Here, you can assign pages to show up as sections on the Homepage template. Check out the Homepage section of the help file to learn how to use these settings.
- Number of portfolio items to show:: Select the number of portfolio items to show on the Homepage. See the Portfolio section to learn how to setup the portfolio for use on the Homepage.
- Number of testimonials items to show:: Select the number of testimonials to show on the Homepage. See the Testimonials section to learn how to setup the testimonials for use on the Homepage.
- Number of blog posts to show:: Select the number of blog posts to show on the Homepage. See the Blog section to learn how to setup the blog for use on the Homepage.
- Number of services to show:: Select the number of services to show on the Homepage. See the Services section to learn how to setup the services for use on the Homepage.
- Number of team members to show:: Select the number of team members to show on the Homepage. See the Team section to learn how to setup the team section for use on the Homepage.
Site Title, Tagline & Logo
The following settings can be found in Appearance → Customize → Site Title, Tagline & Logo.
- Site Title & Tagline: By default your site will display a site title and tagline, which can be customized here. You also have the option to hide the site title and tagline if you’d rather use your own logo image.
- Logo: Upload your own logo to use in place of your site’s title and tagline.
- Accent Color: Change the accent color of buttons and typographical elements found in the theme.
- Background Color: Change the background color of the site. (Visible on resolutions bigger than 1480px wide.)
- Current Header: Choose an image or multiple images to be shown in the header. Use the Randomize uploaded headers button to rotate through multiple images in your header area.
- Homepage Header Height: Change the height of your header area with this slider.
- Header Image Opacity: Change the opacity of the image in your header. You might want to reduce the opacity of the image if it interferes with the text in your header.
- Header Background Color: Change the background color of your header. You will only be able to see the color change if the Header Image Opacity is dialed down.
Please note that Jetpack must be enabled before the Featured Content panel is available in the Customizer.
- Tag Name: Select the tag of the posts you’d like to feature in the header. Start typing to search for your tag or to create a new tag. Once you’ve selected a tag with associated posts, the Featured Content header will appear at the top of your blog, as seen on the Atomic demo.
- Hide tag from displaying in post meta and tag clouds: This option can be checked to ensure that the tag selected for Featured Content doesn’t show up in that post’s list of tags or the Tag Cloud widget. Your tag’s archive will continue to be displayed in normal fashion.
- Display tag content in all listings: This option can be checked to ensure that the Featured Content tag will display in all pages and archives.
Atomic 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. Atomic 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.
Add a call to action button to the main menu
Using a CSS class, you can change one of your menu items into a call-to-action style button, as seen on the demo. To do this, you’ll need to go to Appearance → Menus and add the class menu-cta to your menu item, as seen here. If you don’t see the the CSS Classes field on your menu item, click Screen Options in the upper right hand side of the screen and make sure CSS Classes is checked in the Show advanced menu properties section.
Atomic comes with a few different widget areas you can use to customize your site.
Footer – This widget area can be found in the footer of your site. There are four widget columns that you can use to add widgets to the footer. The footer widget columns have a dynamic width, meaning if you only choose to use two or three columns, the column width will adjust to display the columns evenly in the footer.
WooCommerce Shop Archive Sidebar – This widget area can be found on the Shop archive page of your WooCommerce store. If you do not add any widgets to this sidebar, it will not be shown. This sidebar is intended for adding some of the WooCommerce product widgets such as WooCommerce Product Search, WooCommerce Average Rating, WooCommerce Price Filter and WooCommerce Layered Nav. You can add any widgets to this sidebar, but these widgets will improve the usability of the Shop page.
Create a Gallery or Video Post
Atomic includes support for Gallery and Video post formats. Post formats allow you to change the style of your content to more closely match the type of content you are creating. For Video and Gallery post formats, Atomic will take your post’s first video or gallery and display it at the top of the post in place of the featured image. Check out a video and gallery sample here.
Gallery and Video post formats rely on WordPress’s embed/oEmbed feature for videos and the standard gallery shortcode for gallery posts. See here for a list of available embed options for video.
Create a Video Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Video.
- Next, let’s add a video. In the same way you embed videos normally, add your embed code or link to the top of your new post. Remember, only video embeds supported by WordPress (oEmbed links or iframe video) will work here.
After you’ve added your video to the top of your post, you can continue adding content as seen below.
- Publish your post when you’re finished and preview the results.
Create a Gallery Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Gallery.
- Next, let’s add a gallery. In the same way you create galleries normally, add your gallery to the top of your new post.
After you’ve added your gallery to the top of your post, you can continue adding content as seen below.
- The Gallery post format supports standard WordPress galleries, as well as the extra gallery styles provided by Jetpack, such as Tiled Mosaic, Tiled Column and Square Tiles, which are used on the Atomic demo. To activate Jetpack’s extra galleries, go to Jetpack → Settings and turn on the Speed up images and photos setting in the Media section. Once activated, you will see new gallery styles in the Type field when creating a new gallery.
- Publish your post when you’re finished and preview the results.
Atomic comes with several page templates to help you create a powerful website. Let’s go over each of the templates and how to set them up properly to get the most out of each page. Setting up the pages properly will also help us create the Homepage layout.
You may also use the Atomic demo data to import the pages you see on the demo with the page templates already assigned, but you should go over the template info below to see how each page template works.
The Blog template isn’t actually used to create a blog page (the blog page doesn’t need a template), but it is used to help us create the Blog section on the Homepage. If you are not going to use the Homepage template and instead are going to use your Homepage for blog posts, you can disregard this template.
Otherwise, you need to create a new page (or use an existing page) and assign the Blog template to this page. That’s all you’ll need to do for now, until we set up the Homepage below.
The Full Width template uses the entire content area in your page instead of a two column layout with the title in the left column.
The Page Builder template is a blank canvas for you to use with your favorite page builder plugin. This template is similar to the Full Width template, except it has all margins and paddings removed from the content area. This lets you create your own sections with columns and various layouts with your page builder without style restrictions.
The Portfolio template is used to display your latest Portfolio items. The portfolio items are provided by the Jetpack plugin. To get started with the Portfolio, create a new page (or use an existing page) and assign it the Portfolio page template.
Creating Portfolio Items
To create portfolio items, first you’ll need to install and activate the Jetpack plugin. Once you’ve done that, go to Jetpack → Settings and activate the Custom Content Types feature. This will provide us with the Portfolio functionality. Once you’ve activated the Custom Content Types, you’ll notice there is now a Portfolio menu item.
Similar to the way you add new blog posts, you can add a new portfolio item under Portfolio → Add New. Portfolio items are ordered by the date they’re created, with the most recent project displayed first.
Adding a Featured Image to each project is highly recommended. Each project’s featured image is displayed on the Portfolio archive and the Homepage template.
Create your portfolio item by adding any combination of images, videos, galleries or audio files. Atomic will handle the styling of these elements on the front end. Activate Jetpack’s Tiled Galleries feature to add some additional gallery styles as seen on here on the Atomic demo. When creating a gallery, you’ll see a few new gallery options in the gallery type select menu.
Portfolio items also support video and gallery post formats. Using these you can create media-rich portfolio items where video and galleries are featured at the top of your post, in place of the featured image. See the Post Formats section to learn how to use these.
These Portfolio items will now show up on the main Portfolio page as well as the Homepage template (if you choose to show them on the Homepage).
The Services template is used to display the services you provide. This template will display the child pages of any parent page in a 3-column grid. You can use the Services template for services or any kind of page content you’d like to have a in grid layout.
Before adding service pages, you need to create a main Services page to be used as the parent page for these services. Create a new page or use an existing page and assign it the Services page template.
Next, you can start adding individual service pages. Create a new page for each service you provide (i.e. design, web development, photography). Assign your main Services page as the parent page to each service, as seen below.
Make sure each service has a Featured Image and Excerpt to represent the page on the Services page and Homepage, as seen below.
These service pages will now show up on the main Services page as well as the Homepage template (if you choose to show them on the Homepage).
The Team template is used to display your team members. Similarly to the Services template, this template will display the child pages of any parent page in a 3-column grid. In this case, any child pages of your Team page will be displayed in a team member grid.
Creating Team Members
Before adding team member pages, you need to create a main Team page to be used as the parent page for these team members. Create a new page or use an existing page and assign it the Team page template.
Next, you can start adding individual team member pages. Create a new page for each member of your team. Assign your main Team page as the parent page to each team member, as seen below.
Make sure each team member has a Featured Image and short bio to represent the team member on the Team page and Homepage. You can also add social media links for each team member using the markup below.
<div class="social-navigation"> <a href="http://twitter.com/team-member">Twitter</a> <a href="http://facebook.com/team-member">Facebook</a> </div>
Paste this markup in the Text view of your post editor. The theme will automatically convert these links into social media icons as long as the links are in the social-navigation div. The following icons are supported: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, Slideshare, Medium, Apple, RSS and Email.
These team members will now show up on the main Team page as well as the Homepage template (if you choose to show them on the Homepage).
The Testimonials template is used to display your latest testimonials. The testimonials are provided by the Jetpack plugin.
To create testimonials, first you’ll need to install and activate the Jetpack plugin. Once you’ve done that, go to Jetpack → Settings and activate the Custom Content Types feature. This will provide us with the testimonial functionality. Once you’ve activated the Custom Content Types, you’ll notice there is now a Testimonials menu item.
Similar to the way you add new blog posts, you can add a new testimonial under Testimonials → Add New. Testimonials are ordered by the date they’re created, with the most recent testimonial displayed first.
Add a Featured Image to be used as the testimonial avatar and post content to be used as the testimonial text. The testimonial title will be used for the name of the person giving the testimonial.
These testimonials will now show up on the main Testimonials page as well as the Homepage template (if you choose to show them on the Homepage).
The Homepage template brings in up to six different pages as sections on your Homepage. Although you can use any six pages, we’ve included styles and functionality for portfolio items, testimonials, services, team members and blog posts. For the quickest setup of the homepage, ensure the individual pages above are set up first, since those pages populate the homepage.
Creating the Homepage
First, you need to create a new page (or use an existing page) to be used as the Homepage and apply the Homepage template to this page. Next we can start to setup the header and individual sections of the homepage. Go to Appearance → Customize to get started.
Start by visiting the Static Front Page panel and select your Homepage to be the Front page and your Blog page to be the Posts page, as seen here. Make sure your Blog page is using the Blog template before you set it as the Posts page.
Next, visit Theme Options → General Settings and create a Header Title and Header subtitle to appear in your header area.
Next, visit Theme Options → Front page to start creating your Homepage sections. Alternatively, if you are using the latest version of WordPress, you can click the Homepage placeholder boxes to jump to the Front Page settings. These placeholder boxes are only visible in the Customizer and not visible on your site.
Using the six provided page selectors, you can choose which pages to populate the Homepage and which order you would like them to be in. If you would like to have a site like the Atomic demo, you’ll want to select your Services, Portfolio, Team, Testimonials and Blog page to populate the Homepage. If you set these up properly in the steps above, they will populate the Homepage without any extra steps needed.
Below the page selectors, there are settings to control the number of Portfolio items, Testimonials, Services, Team Members and Blog posts on the Homepage.
Finally, if you’d like to have a contact form on the Homepage, you can create a Contact page and add a contact form provided by Jetpack. See the Contact Page section to learn how to setup this page.
Create the Contact Page
The Contact Page uses the WPForms Lite plugin, which can grab for free on the WordPress plugin repository. See installation instructions above. Once installed, you’ll see there is a WPForms link in the left hand sidebar of your WordPress admin.
- If you haven’t already, create a new page called Contact.
- Go to the WPForms menu on the left admin menu to configure your contact form. The form creation process is pretty simple, but you can check out the WPForms documentation here for help and tips.
- After you’ve configured and saved your contact form, you will be given a shortcode like this: [wpforms id="161894"]. Copy your shortcode. We’ll use this to add the form to our Contact page.
- Now head back to your Contact page. Paste the shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.
Add Subtitles to Pages and Sections
On the Atomic demo, you’ll notice that some pages and sections on the Homepage have subtitles below the page title. This can be added to any page by using the Excerpt box in the page editor. Any text added here will be placed below the page title.
Add a Store with WooCommerce
Atomic supports the popular WooCommerce eCommerce plugin. We’ve simplified the Lenscap and WooCommerce integration so there aren’t any additional steps other than following the WooCommerce setup steps. The WooCommerce setup steps will help you create the Shop, Checkout, Cart and My Account pages needed to run WooCommerce. Once you’ve gone through the setup, you can begin adding products just as you would on any WooCommerce site.
Atomic supports widgets on the Shop archive page. See the Widgets section to learn how to add widgets to the Shop page.
Browse the WooCommerce documentation site for tips and tricks on working with WooCommerce.
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.
Atomic comes with a few different CSS text styles (such as pull quotes) that you can use for more expressive typography. Each require the use of the Text tab in your post editor, but fear not, they are simple to add!
Text highlight simply adds a yellow background to your text, useful for in-paragraph emphasis. To highlight text, you need to switch over to the text view of your post editor and wrap your text in a span with the class highlight. See an example below:
<span class="highlight">This text will be highlighted.</span>
Pull quotes are similar to block quotes, but are reserved for less text. See Atomic’s Style Guide to see the suggested usage. To use a pull quote, you need to switch over to the text view of your post editor and wrap your text in a span with the class pull-left or pull-right. See an example below:
<span class="pull-left">This text will be pulled left.</span>
<span class="pull-right">This text will be pulled right.</span>