New Navigation Pro Theme for WordPress: The Good, The Bad, No Ugly

What’s Included in Navigation Pro

The theme includes all the standard features you expect from a quality WordPress theme:

• Mobile responsive
• Mobile first design
• HTML5
• Search optimized
• Beautiful typography
• Secure
• Fast load time

As you’ll see, there’s a lot more besides.

Who Should Use Navigation Pro?

The theme comes with four included layout packs — more on those later. The demo shows examples of how the theme lends itself to businesses like:

• Travel
• Food
• Law
• Fitness, Health and Wellness

I also think the theme works very well for:

• Authors
• Professional Services (like accountants)
• Consultants
• Real Estate Agents
• and more

Front Page

Remember that surprise I mentioned? Here’s where I found it.

I had expected the front page to be built with widgets, as StudioPress has been doing with all its themes for several years.

Surprise! It’s built with . . . wait for it . . . Gutenberg blocks.

Yup. Gutenberg blocks. So if you refuse to use the new block editor and you still have the Classic Editor plugin installed on your site, don’t even think about switching to Navigation Pro.

If you’ve been holding off on switching to the Gutenberg block editor because you thought it didn’t give you enough room for design and creativity, well, you’re mistaken.

Here are just a few of the front page sections built with blocks.

Several of the front page sections have scrolling parallax backgrounds — you’ll see them clearly in the live demo.

So. . . Gutenberg blocks on the front page. Check.

Page Templates

The included page templates are also different from what I expected. There’s no blog page template for example (many themes are moving away from having one). Instead, they expect you to use the WordPress settings to designate your blog page.

In fact, there are only two page templates: Unboxed Content, and Landing Page.

Unboxed content

This is the page template used for the homepage in the demo. It can be used for any page to create a full-width layout.

Landing page

The landing page template gives you a page with no header or footer area, or sidebars. As a landing page should, it gives visitors the option to respond to you Call to Action, or to hit the back button.

Default layout

The default layout allows the standard blog page layout with sidebar on either the right or the left.

Menus

Navigation Pro provides two default menu locations: in the header area on the right, and at the bottom of the footer, on the left.

Colors

You have the option to specify four colors:

1. Main color, used for the site title, background, breadcrumb background, linked titles, menu links, buttons, and more
2. Accent color, used for block underlay and overlay styles
3. Before footer CTA changes the background color for the widget area before the footer call to action
4. Footer background

Widgetized Areas

There are five widgetized areas included in Navigation Pro.

1. Primary sidebar
2. After entry — this is where you’d put information or a call to action after a blog post, for example
3. Before footer CTA
4. Footer business information – this is a specific widget you’ll use to show contact information in the footer
5. Footer

Here’s what the footer business information looks like.

Extras Included in the Theme

When you use Navigation Pro, you’re also getting some extra goodies.

AMP (Accelerated Mobile Pages) – What’s AMP? It stands for Accelerated Mobile Pages. It’s Google’s plan for making web pages even faster and more accessible, especially for mobile devices.

If you want to make AMP-enabled pages available to your readers, this theme takes care of it for you. Complete instructions are available in your StudioPress Theme Setup Guide.

An Author Box on single posts, and and Author Page. The Author Box provides information on the author at the bottom of a post, and the Author Page starts with the Author Box, and then shows all of that author’s contributions. If you’re a freelancer or solopreneur doing all your own writing, this isn’t a big deal. But if you have multiple contributors, it can be a helpful tool for readers and a way to highlight each author.

Additional Block Styles. StudioPress designers have given you special styling for blocks like buttons, headings, images, paragraphs, quotes, separators, and for several of the blocks included with the Atomic Blocks plugin.

Pricing Page like the one in the demo. It’s created for you automatically if you install one of the layout packs.

EBook Cover PSD File template is also included.

WooCommerce Shop Ready. Once you install the WooCommerce plugin, you can create a gorgeous shop.

Getting Started with Navigation Pro

Purchase the theme

As with all of our themes from StudioPress, you need both the Genesis Framework and the specific child theme, in this case Navigation Pro. If you’re previously purchased the Genesis Framework, you don’t need to buy it again. You can use it, and Navigation Pro theme, on as many sites as you want.

Follow this link, and then follow the prompts to purchase it. Or, you can view the live demo.

If you’ve previously purchased themes from StudioPress, log in with your username and password to receive a significant discount (usually about 35%).

Install the theme

Follow these instructions to install the Genesis Framework first, and then the Navigation Pro theme.

Install the Genesis Framework, then Navigation Pro, and then activate the Navigation Pro theme. Do not activate the Genesis Framework.

---

Note: When I first attempted to install the theme, I got an error message that I’d never seen before. I contacted both Siteground and StudioPress support, and they were equally baffled. One of the support techs and I determined it may have been caused by a conflict with a plugin.

Hopefully they will have figured it out and fixed it by now.

If you have any issues installing the theme, check to see if you have Atomic Blocks, Simple Social Icons, WPForms, or eNews Extended installed. If you do, delete them (deactivate and then uninstall) and go through the theme installation steps again.Or, alternatively, install the theme by uploading it directly to your server via FTP.

---

Install your selected Layout Pack

Once you’ve activated Navigation Pro, you’ll have a chance to select a Layout Pack to install.

Click on one of the four Layout Packs to see a description of what’s included. Here’s what the Fitness Pack contains.

Once you click Install Pack, you’ll see this screen which shows you how the installation is progressing. Note that, in addition to installing the demo content and layout, it will also install the recommended plugins, in this case Atomic Blocks, Simple Social Icons, Genesis eNews Extended, and WPForms Lite.

When the Layout Pack and plugins are fully installed, you’ll see this message.

And sure enough, if you check your Dashboard, you’ll now see menus for these four plugins (you’ll find Simple Social Icons and eNews Extended within the Genesis menu).

Note: If you don’t choose a layout pack now, you can do it later. Look for the Child Theme Setup menu in your Dashboard/Genesis menu.

Setting up the Homepage

The homepage is built using the AB (Atomic Blocks) Advanced Column blocks and the AB Container block.

Advanced column blocks are quite versatile, allowing you to set from one to six columns per block. The Container block lets you group multiple blocks together. I plan a review of the Atomic Blocks plugin in future where I’ll go into more detail on how to use each of these blocks.

You can use the default layout, substituting your own content, or move things around and make changes.

Take a look at the image below. Note that Navigation Pro automatically pulled articles from my sandbox site into this display, instead of the articles featured in the demo. If you are installing the theme on a brand new site with no content, it will continue to display the demo content until you add your own.

Using the Customizer

Go to Appearance/Customizer to put your own stamp on the theme: colors, theme and homepage settings, and more. Most are standard, but some are specific to the Genesis Framework and the Navigation Pro theme.

Available choices include:

• Site identity – logo, site title, tagline, and favicon. These are standard, but Navigation Pro also gives you settings here for setting a separate footer logo.
• Colors
• Menus
• Widgets
• Homepage settings
• Theme settings, including some that are specific to Navigation Pro, updates, site layout, breadcrumbs, comments and trackbacks, singular content (refers to single posts and pages), content archives, and header/footer scripts are included
• Theme SEO settings. If you’ve installed an SEO plugin like Yoast SEO, these will be disabled. Otherwise, you’ll be able to set up some SEO choices here
• Additional CSS, where you can add custom CSS code

Brand it with Your Colors

Navigation Pro gives you an easy Customizer for changing four colors in your theme.

To select colors, navigate to Appearance/Customize and then select Color. Use the Color Customizer to specify your brand colors that you want to use as Main Color, Accent, Before Footer CTA, and Footer Background Color.

When I was playing around with the theme, I installed my own main brand color — here’s what it looks like.

Page Settings

With the latest versions of Gutenberg and the Genesis Framework, you may not find some settings in the places you expect.

If you’re looking to specify a page setting that’s different from your default, click the stylized G (for Genesis) logo above the sidebar on your editing screen.

Here you’ll find overrides for some of the settings you’ve set as defaults. It provides choices for:

• Breadcrumbs
• Images
• Layout
• Custom classes

Remember, StudioPress always gives you thorough documentation. Just log into your account at my.studiopress.com with the username and password you set up when you purchased the theme, then click the documentation link.

Regenerate Thumbnails

If you are replacing a theme with Navigation Pro, remember to run the Regenerate Thumbnails plugin to automatically size your images properly for use with the new theme.

Create an Online Store

Navigation Pro integrates tightly with WooCommerce for creating your own e-commerce shop. Here’s a guide to help you with WooCommerce integration.

If you’re looking for a new WordPress theme, I really like Navigation Pro. If you decide to use it, let me know!

---

Other Articles You’ll Like

• What Do You Need in a Winning Author Website?
• 7 Simple Ways to Revitalize Your Website in 2020
• WordPress Theme Styles: How to Easily Pick the Right One