How to Integrate Editus with Genesis | Part One

Integrating Editus into any existing WordPress theme is easy. In fact the process takes less than five minutes, from start to finish.

In this two part series, we’ll cover how to get Editus integrated into Genesis, as well as how to get Genesis customized to work with Aesop Story Engine and it’s full width components. With Editus, Aesop Story Engine, and Genesis, you have the tools to build incredibly interactive articles without ever leaving the front-end. Let’s dive in!

Setup Article Editing

Editus requires the CSS class of the post, so it knows where to work. We take this approach so that the editor can be loaded onto any element, not just posts or pages. Although this is a technical challenge, it’s a minor one, and we do our best to educate users on how to use Chrome Inspector to locate these classes. Firefox has similar tools, but this short tutorial will only cover Chrome.

get-article-class
Using Chrome Inspector to locate the CSS class of the article container in Genesis theme for Editus.

Let’s start by heading to any post, then right clicking on the page, and choose “Inspect Element.” Congrats, you’ve just loaded up the Chrome Console! If you hover over the different elements, you’ll see the light up on the page. What we’re looking for, is the inner most article container; the container that holds all the text and stuff for the post.

Using Inspector in Chrome, we can see that the class that we need is called .entry-content. Now, let’s take that CSS class and enter and save into the Editus settings under Article CSS Class.

lasso-settings-genesis
This is what the settings should look like when integrating Editus with Genesis theme.

That’s it! When you head back to a single post, and you click the pen icon to open the editor, you should now be able to type into the area and save your post. It’s just that easy.

Setup Title Editing

Editus also supports updating the title of the post, and for this, we also need to know the CSS class of the title area. So, let’s head back to the front-end, and onto a single post. Right click and open up Chrome Inspector, and locate the title of the post.

get-title-class
Using Chrome Inspector to locate the CSS class of the title heading in Genesis theme for Editus.

We can see that the CSS class for this is predictably named, .entry-title. Let’s take this CSS class, and save it into Editus’s settings.

Head back to the single post, open up the editor, and click into the title area. Change the title, and when you click out, the title is automatically saved. Currently we don’t support formatting options in the title, however this may change as time goes on.

lasso-settings-genesis
This is what the settings should look like when integrating Editus with Genesis theme.

Summary

So within five minutes, we’ve gotten Editus integrated with Genesis, and we never have to return to the back-end post editor again! Next week, in part two of Integrating Editus with Genesis, we’ll cover installing Aesop Story Engine, and modifying our single post CSS so that we can take advantage of those beautiful full-width Aesop Story Engine components.

Do you have a favorite theme that you’d like us to write up an integration tutorial for? Sound off on Twitter below!

Share your email with us and we'll email you about news and updates.