Posts can display a wide variety of interactive content, like maps, data tables, and other content from other sources. Most regular posts should use the One Column (Standard) template. This template provides the best reading experience when the post is comprised of mostly text. For posts containing interactives and visual elements wider than the One Column Template, you can optionally select the Full-width template in the Layout Options panel.
The Full-width template should be used judiciously, and only when the One Column template is too narrow for display of embedded, interactive, and other visual content. Consider the content from the reader’s point of view, and select the Full-width template only if it enhances the user experience. Note that if you include text in the post in addition to your graphic, the line length will be the full width of the page. This is too long for optimal readability so you might consider using the standard one column template instead.
Using the Full-width Template in a Post
To apply the Full-width template to a post, select it from the drop-down menu in the post’s Layout Options panel.
Note that the Full-width template has no sidebar, and when used the content will fill the full width of the container (1170px).
Embedding Interactives and Other Visual Content
It’s possible to embed interactive content from other content sources. In such cases, the content is hosted on another website, and the embed makes it possible to display the content on your post page.
Embedding a YouTube video is a common example. Other examples include Google Maps, sortable data tables, and a wide range of other interactive applications hosted outside of your site. On any WordPress website, there are two issues that can prevent the content from displaying correctly:
- The content may contain iframes, scripts, and other code that isn’t allowed by WordPress, so the code is stripped when you publish the post.
- The embedded content may display on your post or page, but won’t responsively resize for tablets and smartphones.
Allowed Code in WordPress
WordPress strips out certain kinds of code from posts as a security measure. This is important for protecting your site from the most common types of malicious website attacks. In particular, JavaScript is always stripped from WordPress posts. This is one reason embeds are a common way to include content from another source. The content is generated by script, but the script is running on another server, not on your website. In most cases, this is an acceptable way to embed content from external sources on WordPress sites.
WordPress allows most common HTML elements that don’t involve Javascript or iframes, so if you’re comfortable editing HTML you can use the Text mode in the post/page editor. Just be aware that if part of your code is stripped, WordPress does it intentionally. The purpose of this is to keep your site secure, which is extremely important!
Embedding Responsive Content via iframe
By default, content hosted on another server and embedded in a WordPress post won’t resize responsively for mobile devices. Embedded videos can be made responsive by using the Module Wrapper, but other types of interactive content can be more difficult to make responsive. In particular, the Module Wrapper won’t work with any embeds that contain<script> tags because they’re not allowed by WordPress.
In this case, you can use the Pym Shortcode plugin, built by INN to allow embedded content in WordPress posts and pages using a simple shortcode. If the embed is built to work with Pym.js, Pym Shortcode will responsively resize an embed’s width for mobile devices, and its height based on the width of its container.
Use of Pym.js with WordPress posts and pages requires:
- Hosting the embedded content on another web server. You can use any server, including Amazon Web Services, GitHub Pages, or any other web server you have access to. Unfortunately, our hosting company is optimized for hosting only your WordPress website so we’re not able to host standalone data apps and interactives. The content of the iframe should not contain any design elements other than the actual content you want to display in WordPress. Things like navigation, excess padding around the edges of the graphic will negatively affect the appearance of the embed on your site.
- The Pym script must be included on the web page where the embedded content is hosted.
- The Pym Shortcode plugin must be installed and activated on your WordPress site.
For more on using Pym Shortcode, see the Pym Shortcode docs.