Friday, March 29, 2024

Inside The Genesis Framework

In this article we’re going to look at the process of setting up a StudioPress theme, powered by the Genesis framework.

If you’ve never looked at these themes before the terminology can be a bit confusing. Using the analogy of a car, here’s how it’s explained on the StudioPress site. Imagine that WordPress is the engine of your car. Genesis is the framework, which you can think of as the frame and body. In practical terms the Genesis framework takes care of the design, security, SEO and core code. The child theme is the design element that sits on top of the Genesis framework. You can think of it as custom paint job and you can easily change the theme to create a different look and feel.

After Purchasing

I chose the Generate theme and partly for the reasons of building an email list. As I’ve said many times before, building an email list is the most important thing you can do with an online business because you can sell to the same clients over and over again over time.

As part of the download, I received the Genesis framework, the Generate theme and a Genesis sample theme. On the downloads page, instructions are posted with each theme. In addition, at the top of the page, there are two links to tutorials and code snippets.

Above are two screenshots with some of the options available to you.

At this point I decided to install the Genesis framework and the sample theme. According to the instructions, before you do so, you need to download and install the Simple Social Icons and the Genesis eNews Extended plugins.

Doing so is a snap with the Install Plugins page at: Plugins: Add New.

After that, you’ll need to install the Genesis framework and the sample theme at: Appearance: Themes: Add New.

Here’s the new theme. As you can see, nothing fancy – yet.

Next, it’s time to configure the theme, which can be a bit confusing at first. The path is: Genesis: Theme Settings. It took a while to realize that I wasn’t to go to the Appearance section and instead, look for the Genesis heading. Once I did, it was easy to begin the configuration. In order, here are the steps covered:

  • Content: Sidebar – How you want the sidebar configured in this case, a right-aligned sidebar
  • Set the Content Archives Post Navigation to Numeric
  • Save your settings.

Next, you set the title and tagline for your blog at: Settings: General and save your settings.

Now it’s time to set the navigation. In the sample theme, only the primary navigation is used. Go to Appearance: Menus: Manage Locations. In the Primary Navigation Menu, choose Blog and save your changes.

Now it’s time to create a custom widget. The first step is to create a menu. Go to Appearance: Menus; create a new menu and add the pages to the menu. Save your changes.

In this section you drag the Custom Menu widget from the Available Widgets and place it under Header Right. After that, choose the custom menu you created and click on the blue Save button.

Now it’s time to configure the home page. To do so, go to Settings: Reading. Set the Front page displays to: Your latest posts and the Blog pages show at most: 5 posts or another number of your choosing. Save your settings.

Now, we move onto the settings for the Primary sidebar. Earlier, I loaded two plugins: Genesis eNews Extended Widget and the Simple Social Icons Widget. These will be used in combination with the Recent Posts Widget. Go to Appearance: Widgets. Drag these over from the Available Widgets section.

Here’s what it looks like.

At this point you can configure each widget, though for the sake of this review, I’m only going to do so with one, the Simple Social Icon Widget. Here are the settings:

  • Icon Size: 42 pixels
  • Icon Font Color: #333
  • Icon Font Hover Color: #fff
  • Background Color: #eee
  • Background Hover Color: #f15123

Leave the other settings at the defaults.

Here’s what the site looks like so far. Again, it’s nothing fancy. It will be interesting to see how much further one can go, with some of the more advanced settings, but that’s the topic of another article.

Accelerating the Learning Curve

One of the options you have is to upload the demo file of the finished result and work backwards to understand how the theme is configured. This is really useful for learning the inner workings of the theme.

Pricing

There are several price points available:

  1. Buy Genesis by itself if you already have a child theme ($59).
  2. Buy Genesis and a child theme together. Prices vary here from around $80-$100 per package
  3. Buy The Pro Plus Package. This gives you access to all the themes now and for the future, for $399.

Conclusion

Overall, setting up this theme was fast and straightforward. It will be interesting to see how flexible the theme is as I delve deepe

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured