<< Back to examples

See the notice just above the page title? That’s it, the grey box reminding you to check out the other examples…

I added that using the Hooked Editable Content plugin. I created the page content in the normal way as a user with the Editor role, and then I added in the notice using the hooked editor – which appeared below the normal content editor on the Edit Page screen:

Hooked Editor for displaying a notice
Hooked Editor for displaying a notice

The back-end

The site notice editor settings, as set by an Administrator user, are shown below. Note that I’m using the same action as the “Images after main menu” hooked editor – hootubix_template_main_wrapper_start – but I’ve set the priority to 15 this time, so this content will always be displayed below anything added using the “Images after main menu” editor.

Settings for Hooked Editor
Settings for Hooked Editor

Left like this, the notice would appear OK, but I wanted it to appear in a standardized box with a background colour to make it stand out a bit more. So I added some styling to my child theme stylesheet. Whenever content stored in a Hooked Editor against an action (not a filter) is displayed, the content is wrapped in a div like this:

<div class="hec-content hec-content-[Hooked Editor Title]">[Content]</div>

..where the [Hooked Editor Title] is made all lower case and has spaces replaced by hyphens.

So in this case to target the site notice I need to use the selector .hec-content-site-notice. I just gave the notice some very basic styling (it could be a lot prettier I know) consisting of a grey background, some padding and margins, like so:

.hec-content-site-notice {
    margin: 1em 1em 0 1em;
    padding: 0.5em 0.5em 0 0.5em;
    background-color: #dddddd;
}

One last thing to point out. As shown in the settings above, I’ve chosen to ‘Disable wpautop’. The default for a WP Editor is to replace line breaks with p tags, but I didn’t want that in this case because the default theme styling gives margins to p tags which just didn’t look right in the notice. The alternative was to leave wpautop enabled and add some appropriate styling with the .hec-content-site-notice p selector. Either works fine…

<< Back to examples