Using Editus

Editus

Let’s get started with installation. Editus is a WordPress plugin, and thus is installed just like any other WordPress plugin. There are two ways to install; both are covered below.

Easy Installation

Install editus.zip using the WordPress plugin uploader.

  1. In your WordPress administration area, under the Plugins tab on the left, select “Add New.”
  2. At the top of the page, select “Upload Plugin.”
  3. From the Add Plugins page, select “Choose File” and upload.

Not-so-easy Installation

Install editus.zip using an FTP program such as Filezilla, or Transmit.

  1. FTP into your server
  2. Unzip editus.zip and upload to your wp-content/plugins directory

1. Activate

Activating Editus is different depending on if your site is a WordPress multi-site and you want all the sites to share the setting, or if your site is a non-multi-site install.

Regular

After installing Editus, activate the plugin within your WordPress administration area. A new tab will be created labeled Editus with sub-pages for settings, license key, and status check. After activation, you’ll be directed to a page in the Editus tab that will run a status check to ensure your installation experience is a success.

Multisite

Editus can be network activated, if you want all of the sites on the network to use the same settings. When Editus is network activated, a settings panel will appear under the Network Settings tab.

License Key

Automatic updates are provided so long as your license key is saved and is valid. You can obtain your license key within your download receipt, as well as by accessing your dashboard. Editus will remind you on the status page if your license key isn’t entered, or isn’t valid. A license key is not required to use Editus, only to provide automatic updates.

  • activate if a normal site
  • network activate if it’s multisite

2. Configure Settings

At the minimum, Editus needs to know where at in your post to work. For this, it uses something called a CSS class. CSS classes are applied to HTML to style and make elements look different in your browser. Your theme has lots of CSS classes, but there’s only one that we need. We need the CSS class of  your post container.

Picture a house, in a neighborhood. Each house has a specific address; so in this context, we need your houses address! Each address is unique as is each theme’s post container CSS class. It’s super easy to find this class, if Editus doesn’t already support your theme by default.

Supply CSS Class

For the sake of this help article, we’ll be referring to Chrome, however Firefox also has a similar utility. Open up your Chrome browser, and go and view a single post on your site.

  1. Right click on the page, and choose inspect
  2. Hover over items will highlight them in the Elements tab
  3. Locate your post container (it could be .entry-content)
  4. Then locate the CSS class for that post container

[aesop_image lightbox=”off” captionposition=”left” caption=”Using inspector in Chrome to find the article CSS class to provide Editus with in order to operate.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/03/using-inspector-css-class.gif”]

After you’ve located the css class (it should look similar to above), type it (including the little dot before), into the Article Class setting within Editus–>Settings. Once this is done, visit a single post, and look for the toolbar at the bottom. Click the pen icon, and then click into some text and start typing!! If you’re getting an error, make sure that the CSS class is correctly entered, and saved. If you need help, just reach out to us and we’ll get you squared away! Send an email here.

Supply Title CSS Class

Editus can update the title of your post by clicking into the title. At this time formatting options are not available for the title, however we hope to make this possible soon.

In order to utilize this feature, provide the CSS class of the title just like you did above with the post container class.

After you’ve located the css class, type it (including the little dot before) into the Title Class setting within Editus–>Settings.

Supply Featured Image CSS Class

Editus can update your post thumbnail on a post. The post thumbnail is also referred to as the posts “featured image.” Your theme may not be compatible with this feature. The image must be set as a “background-image” using CSS.

In order to utilize this feature, provide the CSS class of the featured image just like you did above with the post and title class.

After you’ve located the css class, type it (including the little dot before) into the Featured Image Class setting within Editus–>Settings.

  • the Article CSS class is required
  • everything else is optional

3. Activate Aesop Story Engine

This step is completely optional, but is required if you wish to utilize the drag and drop story components. Aesop Story Engine is a free plugin (made by us) and provides 13 different “components” that range from full-width quotes, to complex galleries and maps with markers.

  1. Head to the plugins tab in your WordPress administration area
  2. Click Add New, then Search for Aesop Story Engine
  3. Activate Aesop Story Engine

You can use Aesop Story Engine from the backend of your post edit screen, in addition to the front-end.

Editing with Editus

Go to a single post on your site while logged in. At the bottom you should notice a black toolbar with three icons.

Pen Icon – Clicking this icon will enter edit mode. Text cannot be edited without first entering edit mode.
Settings Icon – The middle icon is the settings, and when clicked will bring up the available settings for that post or page.
Add Post Icon – The last icon is the add post or add page icon. If you are on a post, it will be Add Post. If on a page, it will be Add Page.

  • Click the pen icon to enter the editor
  • Press escape to escape the editor
  • Click save to save the content

Formatting Text

Editus provides options to make text bold, underlined, italicized, or strikethrough.

  • Highlight (or double click) a piece of text
  • Click a formatting option

[aesop_image lightbox=”off” captionposition=”left” caption=”Formatting text within Editus.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/03/formatting-text.gif”]

Making Links

Making links is similar to formatting text.

  • Highlight (or double click) a piece of text
  • Select the link icon
  • Type in a link, then click the blue check button

Editing links can be done by highlighting (or double clicking) an existing link. The link will pop open into the area where you initially pasted it allowing you to edit, and re-insert.

[aesop_image lightbox=”off” captionposition=”left” caption=”Making links within Editus.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/03/making-links.gif”]

Inserting HTML

HTML can be inserted by clicking the <> icon, and inserting the HTML you need, then inserting it into the post. At this time, HTML cannot be edited from the front-end once inserted (yet). You’ll need to go into the standard WordPress post editor for this.

[aesop_image lightbox=”off” captionposition=”left” caption=”Inserting HTML with Editus.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/03/inseting-html-C.gif”]

Building with Editus

Editus integrates tightly with the free Aesop Story Engine plugin available from the WordPress.org plugins repository. Without Aesop Story Engine, Editus is just a front-end text editor.

[aesop_image lightbox=”off” captionposition=”left” caption=”Activate Aesop Story Engine to get drag and drop story components.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/03/building-with-lasso-C.gif”]

  • Click the “+”icon to open the component tray
  • Drag a component from the tray, into your post
  • Click the “move” icon in the component to move the component

Working with Maps

The map component is part of Aesop Story Engine, and is currently limited to one map per post.

  1. Drag the map component into a post
  2. Click the map component to add a map marker
  3. Click the map marker to edit the map location name
  4. Zoom out, or adjust the view as you see fit
  5. Click the blue “Save Locations” button in the map component
  6. Save the post

To edit a map, you currently have to delete the map component, and re-add it. This doesn’t delete the markers, this only re-initializes the map editing. This is something that we hope to eliminate as we get closer to a Version 1.0 release.

A Technical Note on Saving

This is the part of the instruction manual that gets somewhat technical. Although we’ve tried to make Editus, and our documentation user friendly, in the end there is some type of technical knowledge involved in order to understand this plugin and how we handle compatibilities.

The number one thing to remember, is that Editus saves the HTML of the post or page as it’s shown. This is great because it means that what you see, is what you get. However, it also means that any plugins that add things to the content area will get saved as HTML as well.

We get around this in a couple of different ways. The first way is by supplying a CSS class ( .editus–ignore ) that can be added to elements and will prevent Editus from saving them as HTML. What this means is, it will remove them from the editor when you go into edit mode. It doesn’t delete them, it only removes them so they aren’t saved as HTML. If you’re unable to add a CSS class, then you can list that objects CSS class in the settings within Editus.

As time goes on we’ll be compatible with more and more plugins and themes. Those (as well as those that are not compatible) will be updated regularly on our compatibility page.