Blog

Whether you’re creating new content for your blog, updating product information, or adjusting the messaging on your homepage, keeping content current boosts credibility and can help your site perform better in search results, and making that easy removes frustration from your day.

When it comes to an ExpressionEngine (EE) site, what’s the best way to make this quick? Two popular options are EE’s built-in Front-End Editing and the Hop Edit This add-on. Each offers different benefits depending on your editing style and workflow.

EE Front-End Editing

ExpressionEngine’s native Front-End Editing is built directly into the CMS. It adds a small pencil button next to each editable field of content, directly on top of your live site content. Clicking one of these edit buttons summons up a form where you can edit content in place.

You can only see these buttons if you’re logged in with an account with the appropriate permissions. Visitors will not be able to see them or edit your site. The pencil icon appears next to every field tag in your template that is a content block configured for front-end editing. These “edit” buttons allow you to make quick changes on the fly without ever needing to go into the EE Control Panel. Changes can be saved with a single click and they immediately reflect on the page.

EE Front-End Editing is ideal for content editors who are visual thinkers and want to see exactly where their edits are happening and how they’ll look on the live site. This feature is useful for teams that frequently update headlines, body content, or modular blocks on key pages or sites that prioritize in-context editing to speed up the review and publishing process.

Pros of front-end editing:

• What you see is what you get editing since you’re working directly on the live page.
• No need to have access to the EE backend, which can be sometimes intimidating or confusing to non-technical users.
• Extremely helpful on highly modular landing pages where you want to edit multiple blocks of content quickly in small ways.

Cons of front-end editing:

• If your site has many editable fields, it can look a little cluttered. Your pages can become filled with edit pencils, which might be distracting when navigating or reviewing content.
• You must have the EE dock enabled to get front-end editing; you can’t have one without the other
• You need to have field configuration set up. Only fields explicitly enabled for front-end editing will display these buttons, which requires initial setup and planning.
• You end up with a lot more of your code and brain dedicated to turning on and off the links for individual fields and pages, because there are at least 9 (yes 9) ways to enable or disable front-end editing that we can think of.

Hop Edit This

Hop Edit This is our very own ExpressionEngine add-on that helps grant access to the backend editor without cluttering the front end. When this add-on is installed, a small pencil icon appears on the page at the point where the tag is in the template (usually near the title, or sometimes floating attached at the corner). Clicking the icon takes you straight to the corresponding entry in the EE Control Panel.

Our “Edit This” pencil icon links directly to the backend editing screen for the entry that generated the current page—or you can point it to a front-end editing page, too. Once in the backend, you access the full field layout, including structured fields, relationships, custom tabs, and more. You make your edits, and you can preview the entry (using EE’s preview functionality) to check how your changes will appear on your live site before saving or publishing.

This add-on is easy for tech-savvy users or editors who are comfortable with the Control Panel and want quick access to the backend editing tools for the right entry without having to navigate through the entry list page.

Pros of Hop Edit This:

It’s a tidy front-end experience. Unlike front-end editing, there’s no clutter of buttons, just a singular, discreet pencil icon or styled link that you control.

Editing stays separate from viewing, which may be useful for quality control.

The edit link only appears to someone who does have editing authority that that entry.

Easier to use complex field types, tabs, or matrix fields in the back end; they may be more difficult to edit in a smaller front-end form.

Less time to set up and configure, or to troubleshoot why it isn’t working—it’s just not as complex.

It’s easier to work around page caching issues with Hop Edit This. (see below)

Cons of Hop Edit This:

• Less in-context visual feedback. EE’s preview function in the Control Panel shows live how your edits affect the live view, while the front-end editing doesn’t show changes unless you reload the page, but does show you exactly what you’re editing and where. Call this one a tie.
• The placement of the pencil icons are up to you. Sometimes the icon will appear in a less-than-ideal spot, particularly on certain templates, but you actually have better control of them than of the FEE icons. Still, it’s a con.
• You can’t edit individual field blocks the same way. Unlike front-end editing you’ll be taken to the entire entry rather than a single block.

A Quick Code Fix: Gil’s Magical Workaround

If you are using static caching (which is great), you might run into issues with not being able to see the edit pencils. Here’s an example of how to dynamically load Hop Edit This using JavaScript. This code snippet fetches the HTML content from `/defer-load/edit-this` and injects it into the page, allowing for dynamic updates without needing to refresh the entire page.

Include this script in your HTML file where you want the edit functionality to appear. You only need to define the function once, and it will handle the fetching and injecting of the HTML content when called.

<script async>
    function fetchAndInjectHTML(url, scriptElement = null, shouldInject = true, callback = null) {
        return (async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const htmlContent = await response.text();

                if (shouldInject && scriptElement) {
                    const container = document.createElement('div');
                    container.innerHTML = htmlContent;
                    scriptElement.insertAdjacentElement('afterend', container);

                    scriptElement.remove();
                }
                if (callback) {
                    callback();
                }

                return htmlContent;
            } catch (error) {
                console.error('Error fetching and injecting HTML:', error);
                return null;
            }
        })();
    }
</script>
<script defer>
    fetchAndInjectHTML('/defer-load/edit-this/{entry_id}', document.currentScript);
</script>

 

And create a template at `/defer-load/edit-this` with the following content:

Choose What Works For You

Ultimately, no matter which tool you use, whether EE Front-End Editing or Hop Edit This, you’ll be equipped to update your EE site more confidently and conveniently. It ultimately comes down to how you prefer to edit.

Looking for a more visual, in-context editing experience? Choose EE Front-End Editing.

Prefer a minimal, backend-driven workflow? Hop Edit This is for you.

Or, try out both and see which one works for your site and editing needs! Both options will allow you to keep your site content accurate, fresh, and flexible (at the end of the day, that’s what really matters).

If you’re still unsure which option would work best for you, send us a message. We’d be happy to offer our expertise!