Helping features

For efficiency, a number of small features are reunited on this page. This is about exporting and importing data, configuring scroll offset and a CSS smooth scroll effect, adding the page slug as a class name to the body element for Custom CSS, uppercase and extended conversions for page slug readability, allowing HTML markup on category pages in term descriptions, WPTexturize, line-wrapping URLs that may happen to be long and bulky and disturb the layout, and relative positioning of appended features.

AMP Compatibility

The A.N.R.GHG Publishing Helper is designed to be fully AMP compatible.

Hueman Theme used on the A.N.R.GHG Publishing Helper’s website is not yet AMP compatible due to its sidebar display script for intermediate viewports. That is why this website is in transitional mode: AMP for mobiles, non-AMP for desktop.

Alternatively, see how it works with the current WordPress theme in AMP Standard mode.


Both templates and settings are automatically backed up in JSON format additionally to being stored in the database. By default, a new file is created whenever the settings page or the template editor is accessed and when it is saved.

Creating a new file can be deactivated individually for templates and for settings:

Backup settings while deactivating backup history for configuration values

Both data can be previewed after clicking the collapsed preview’s bar:

The expanded preview cannot be resized, to ensure it stays collapsible.

Export and import

Exporting and importing settings or templates is an easy way to configure new WordPress instances based on preexisting ones. Other options are supported, too. The process works one option at a time, either predefined or configurable. There is one page to export and another page to import. Both may be accessed in multiple ways:

In the installed plugins list

The least invasive option is always available. Admin menu items at any level are not added by default. To mitigate potential issues, there is an easy way to access any of the plugin’s options pages from any one of them, unless the optional main menu item with its submenu is active:

Plugin-internal navigation bar on this website
Fits on mobile too, including the (provisional) format conversion page
Export page on mobile emulator
Import page on mobile emulator

An intermediate solution is Admin submenus under Settings and Tools:

Here, the Settings submenu is displayed on hover while the Tools submenu is expanded

The export page supports all option names saved to the WP-Options database table: its own settings and templates natively, and any other option if its name is known and filled in the input field under Custom:

Settings and templates may be previewed, custom data cannot.

The same holds true for the import page. Importing and overwriting data is destructive. That is why these buttons are red. Their font size is also increased, and the caveats are displayed in bold:

Templates may be added by importing a handy set. Settings are always overwritten — or erased so that their default values are used. The same may be done for templates in case it should:
The custom option is at the bottom; merging is not supported as it is rarely desired.

Importing is also a way to back up the data, although that is done automatically as configured in the settings.

Scroll behavior

Smooth scrolling

If the active theme not already provides it, the “Smooth scrolling” setting in the “User experience” section is a way to activate CSS-based smooth scrolling:

Activating the smooth-scroll feature

Conversely, in themes where smooth scrolling is the default, turning this setting off sets a rule to override this style rule and set the scroll behavior to auto for abrupt, instant scrolling.

These rules are ineffective, however, when scroll behavior is driven by JavaScript.

Scroll offset

All scroll targets are given a configurable scroll offset preventing them from hiding behind top bars. If undesirable, this scroll offset can be zeroed in the “User experience” settings section:

Editing the scroll offset in pixels

This is not only about the added features. For a consistent user experience, scroll offset is universal.

URL slug as a CSS selector

There are two ways of adding style rules to a particular post:

  1. Internal CSS: the rules are in an HTML <style> element on the page;
  2. External CSS: the rules are in an extra file.

The first way, rules are added in a style element in an HTML block:

The block with only a style element is invisible. This is how it looks in the editor.

That is why on this page, headings are green. The following examples are purely informative.

Some themes, among which Twenty Twenty-Two, remove style elements, preventing this method from working. But the second way can still be used.

The second way, rules are added to Custom CSS in the theme customizer or in a child theme’s style sheet with the number of the post or page as a selector. The number is prefixed with postid- for a post, or page-id- (with an extra hyphen) for a page:

.postid-123 h2 {
	color: green;

With the “URL slug as a CSS selector” feature active, page or post doesn’t matter with the first added selector, using the number prefixed with id- throughout. The feature’s switch is at the end of the “Interoperability” settings section. It also has a quick access link in the Settings table of contents:

On hovering the quick access link to the “Slug body class” setting at the end of the Settings table of contents
Activating the URL slug as a CSS selector

Slugs starting with a digit 0-9 or with a hyphen-minus followed by a digit 0-9 or a hyphen-minus will be prefixed with a configurable string, by default an underscore _ to make valid CSS class names out of them, as a more easy-to-use alternatve to escaping the digit.

The slug of the post or page may be used instead as a more mnemonic alternative:

.test-post h2 {
	color: green;

There are two ways of generating those class names based on slugs, and both are added to the body classes:

  1. With Unicode characters beyond ASCII;
  2. Without Unicode characters beyond ASCII.

The second way is supported by WordPress’ default processing. The first way is consistent with the CSS specification ruling class names and identifiers. But it is available only after switching off the accent removal, and turning on alternative slug generation, in the “Localization” settings section:

After turning off the accent removal setting under “Localization”
After scrolling down a bit and turning on alternative slug generation

The conversions applied or skipped for fragment identifiers will be so for slugs, too, except that slugs are always lowercase. Titlecase in URLs can cause 404 errors depending on server configuration, and it is considered bad for SEO.

Example page for extended slugs:

Conversions for slug readability

This feature is documented for the “Paragraph links” feature in this paragraph. These settings are in the “Localization” section:

Various options help fine-tune the rules of slug generation.

Rich-text term descriptions

Editing category pages to make the description a fully fledged post is an often requested feature, and the code making it possible is available and can be activated:

Active by default, the feature may be deactivated using this switch.

Many plugins, including ‘Yoast SEO’, are working around the same limitation.

For a seamless editing experience using the Classic Editor, please turn this feature off and use the ‘Visual Term Description Editor’ plugin instead.

Using the Block Editor instead is the subject of an issue on GitHub.

Control WPTexturize

Keeping ASCII punctuation as-is may be desirable in the presence of appropriate input methods:

Active by default, not using WPTexturize requires opt-out using this switch.

WordPress is able to convert a number of ASCII strings to strings containing non-ASCII characters. The use of a keyboard layout extensively supporting Unicode gives full control over the character representing an instance of a quotation mark or a dash.

This feature is based on code from The Web Flash.

Line-wrap URLs

When URLs are visible, line breaking issues may disturb the layout. This feature adds markup making them breakable anywhere. It targets URLs regardless whether they are link text or not:

With this feature, active by default, issues are less likely to occur.

Applied to URLs displayed in notes, sources or references, this prevents long URLs from hanging out of tooltips, and prevents lists from being expanded beyond the window edge with a need to scroll horizontally.

Control relative positions

Several features append elements to the post. Each one of them has a priority setting to control the order:

Priority level of the Thank You message, one of the five available priority settings

This priority level determines the position relative to other features. The greater the number, the lower the insertion point. WordPress default is 10. Negative levels are allowed.

If a priority level is higher than 11 (its number is less than 11), the WordPress function adding paragraph tags is automatically deactivated to prevent it from disturbing the already added markup.

Thank you for reading it all!
Last updated: