Naked Cat Plugins

Marco Almeida | Webdados

This plugin aims to ensure that any language change in a page’s content is indicated to assistive technologies at the container block level, helping a website comply with WCAG guidelines.
This feature is available on the core block editor only at a text formatting level after code from <a href="https://wordpress.org/plugins/lang-attribute/" rel="ugc">Jb Audras plugin “Lang Attribute for the Block Editor”</a> was merged into core. The objective of this plugin is to provide the same functionality at a container block level (Group – including all its variants, Columns, Cover, and other specific block types) so that the language applies to all child elements, no matter the kind of content inside.
The plugin also supports setting the language at the page or post level, both on the blocks and classic editor. When an entire page is written in a different language than the website’s default, you can override the HTML <code>lang</code> and <code>dir</code> attributes for that specific page directly from the Document Settings sidebar, without needing to wrap everything in a container block.
This plugin is heavily inspired by the Jb Audras plugin (including this readme file). The development started at WordCamp Europe 2025 Contributor Day, by Marco Almeida from <a href="https://profiles.wordpress.org/nakedcatplugins/" rel="nofollow ugc">Naked Cat Plugins</a> / <a href="https://profiles.wordpress.org/webdados/" rel="nofollow ugc">Webdados</a>, and the help from <a href="https://profiles.wordpress.org/welcher/" rel="nofollow ugc">Ryan Welcher</a> on the code side and <a href="https://profiles.wordpress.org/alh0319/" rel="nofollow ugc">Amber Hinds</a> on the accessibility compliance side.
For more context: this plugin helps you to make your website compliant with the Web Content Accessibility Guidelines (WCAG) success criteria:
<ul>
<li>3.1.1 – Language of Page: The default human language of each web page can be programmatically determined. Use the page-level setting when an entire page or post is written in a language other than the website’s default.</li>
<li>3.1.2 – Language of Parts: The human language of each passage or phrase in the content can be programmatically determined. Use the block-level setting when only specific sections within a page are in a different language.</li>
</ul>
The purpose of these success criteria is to ensure that user agents can correctly present content written in multiple languages.
Keep in mind that you should set the <code>lang</code> and <code>dir</code> attributes only on a container block or page if the content is written in a language different from the one set globally on your website.
As per Web Content Accessibility Guidelines:
This enables user agents and assistive technologies to present content according to the presentation and pronunciation rules of that language. This applies to graphical browsers, screen readers, braille displays, and other voice browsers.
Both assistive technologies and conventional user agents can render text more accurately if the language of each passage of text is identified. Screen readers can use the language’s pronunciation rules. Visual browsers can display characters and scripts appropriately.
This is especially important when switching between languages that read from left to right and languages that read from right to left, or when text is rendered in a language that uses a different alphabet. Users with disabilities who know all the languages used in the Web page will be better able to understand the content when each passage is rendered appropriately.
That’s not just good for accessibility. It’s also great for SEO. Search engines like Google can better understand your content when languages are clearly defined. That means improved indexing and potentially better rankings.
Banner photo by <a href="https://unsplash.com/@hannahwrightdesigner?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" rel="nofollow ugc">Hannah Wright</a>.
<h3>Supported block types</h3>
<ul>
<li>Group (<code>core/group</code>): Group contents together and set a language for them</li>
<li>Columns (<code>core/columns</code> and <code>core/column</code>): Organize content into a set of columns and set a language for all the columns or a specific column</li>
<li>Cover (<code>core/cover</code>): Set the language to all the contents inside a cover block</li>
<li>Navigation (<code>core/navigation</code>): Create full navigation menus in different languages</li>
<li>Submenu (<code>core/navigation-submenu</code>): Set a different language on a sub-section of your menu (for example, if you have the default language pages on the first level and a sub-menu with pages in another language)</li>
<li>Page List (<code>core/page-list</code>): List all the pages on your website that are written in a different language and created as a child of the main page of that language</li>
<li>Content (<code>core/post-content</code>): Set the post content on a custom template to a different language</li>
</ul>
<h3>Features</h3>
<ul>
<li>Set the language and text direction for an entire page or post, both on the blocks and classic editor: a “Page Language” panel in the Document Settings sidebar overrides the HTML <code>lang</code> and <code>dir</code> attributes for that specific page</li>
<li>Add <code>lang</code> and <code>dir</code> attributes to Group, Columns, Cover, and other specific WordPress Blocks, mentioned above</li>
<li>Show visual outline around blocks that have a language attribute set – For easy identification of blocks you have already set to a different language during your editing process, only for Administrators and Editors, and if enabled in Settings – Writing</li>
</ul>

Language Attribute for Container Blocks and Pages/Posts

Add lang and dir attributes to Group, Columns, Cover, and other specific WordPress Blocks, or to the whole page/post.

Themeover

NOTE: This plugin was originally created to solve the issue of splitting classic editor content into divs, using shortcodes. On Sept 27th, 2022, I tested to see how this plugin works with Gutenberg and it actually still works fine (because the divs are rendered AFTER Gutenberg does it’s thing). But it’s worth mentioning that there is a Group block in Gutenberg that serves the same purpose, and might be more intuitive than working with shortcodes for some users. That said, if you’ve disabled Gutenberg in favour of the classic editor, this plugin is still useful. And although I’m not adding new features, I will fix any bugs people report.
Now on to how it actually works:
Separate your WordPress post or page content into divs with (optional) custom CSS classes and ids. Adding the shortcode [divup] in between some content will split the content into 2 separate divs.
You can enter as many [divup] shortcodes to a post or page as you like. Great for creating columns of content for magazine style websites while keeping shortcode markup to an absolute minimum. DivUp Content never uses inline styles, but it does automatically give divs fiendishly clever classes like first, last, div-1, div-2, div-3, and div-odd, div-even, mul-3, mul-4 (multiple of 1,2,3,4 etc). You can then create your own style rules for the divs in style.css or with <a href="http://themeover.com/" rel="nofollow ugc">Microthemer</a> (a visual design CSS plugin for customizing WordPress sites).
<h4>3 Column Example CSS</h4>
The CSS for a 3 column layout could be:
.divup-wrap { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
}
<h4>6 Column Example CSS</h4>
For a 6 column layout (with gaps), you would just change the CSS to:
.divup-wrap { 
 display: grid; 
 grid-template-columns: repeat(6, 1fr); 
 gap: 2rem; 
}
For more complex grid layouts with content spanning different numbers of columns and rows, you may find <a href="http://themeover.com/" rel="nofollow ugc">Microthemer</a>‘s visual controls for generating the CSS grid rules quite handy. Just select the .divup-wrap element when editing with Microthemer, and then position the grid items however you like using drag and drop.
<h3>Features added</h3>
NEWEST: 
Added support for adding custom HTML attributes to divs/spans. Use [startwrap custom=’title: read this’] or [divup custom=”data-src:image.jpg”] (the custom attribute can be applied to both [startwrap] and [divup] shortcodes. 
You can also do[startwrap custom=’title: read this|required:some value’] (seperate with a | pipe character for multiple) 
When using [divup], two divs will be created. To apply custom attributes to the first and second divs use a comma e.g.[divup custom=”data-src:image1.jpg, data-src:image2.jpg”]
NEWER: 
Added support for span elements. Use [startwrap type=’span’]. 
Added support for no superfluous child elements. Use [startwrap parent=0] or [startwrap parent=’false’].
NEW: You can also add multiple [startwrap] and [endwrap] shortcodes to control how the divs are wrapped in a wrapper div. This overrides the original auto-wrapper functionality if you choose to use it.**
The best way to understand how DivUp Content works (including the advanced aspects) is to **copy and paste the ONE of the following dummy content examples below into a post or page and then inspect the html with your browser (Right-click > Inpsect) ** – paying attention to the CSS classes it automatically applies to the divs.
<h3>Dummy Content 1</h3>
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’id-a, id-b’ class=’class-a, class-b class-b2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’my-class diff ‘]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’my-id’ class=’diff my-class2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’diff’]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
<h3>Dummy Content 2</h3>
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[startwrap class=”my-wrap-class another-wrap-class”]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’id-a, id-b’ class=’class-a, class-b class-b2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[endwrap]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[startwrap id=”my-wrap-id” class=”hello-wrap”]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’my-class diff ‘]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’my-id’ class=’diff my-class2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’diff’]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[endwrap]

DivUp Content

Simple and very useful. I initially had a minor issue with WP 4.4.1, but this was immediately fixed. Thanks to the author for being so reactive!



Perfect

Wrap divs around classic editor content using divup shortcodes. Also works for Gutenberg, but you may prefer to use the group block.

Language Attribute for Container Blocks and Pages/Posts vs DivUp Content