This tutorials will guide you step by step on creating a beautiful post for better readability to increase user engagement.
Newsbeat supports various post formats such as gallery, video audio, quote, image… and display them in smart ways for different post templates like swapping post thumbnail with media content (and other features). You can upload your media content directly to wordpress through uploader or using oEmbeds in post content. We would recommend you to use oembeds, not only will it save your bandwidth but also increase website speed. No custom fields are used to insert media content, this means you won’t get f_cked up when switching theme.
More info. on inserting Media Content into Posts or Pages for Classic Editor.
We will use default post template layout for this tutorial.
When you create a post, you will find a format box next to editor, looks like this:
Specifying format for the post will help the theme to understand how you want to output your media content, no matter where it is in post content, or what editor (block editor or classic editor) you used to create a post.
Note: Media content from blocks will have higher priority to be picked than in classic block. You can import Dummy Posts from
Newsbeat Admin Panel -> Demo Importerfor testing.
Here’s preview for standard post with featured image.
Image post format supports urls from:
when you insert image from above sources and use image format, featured post thumbnail will be replaced with embeded content, here’s an example for instagram url, we placed between post content:
Gallery post format will pickup the very first gallery you inserted in post content and convert it into an images slider. If default post format is specified, your gallery will stay still where you inserted in post content, and follow the style you picked in
Customizer -> Template Settings -> Single Post -> Content -> Gallery Template
Standard format and simple gallery template:
After switching to Video format, gallery now on top of post:
Video post format support urls from:
- WordPress tv
- Daily Motion
If no oEmbed url found, the theme will look for available self-hosted video in your post content, video playlist won’t be picked up, Here are previews for embed urls and self-hosted video – template post:
Audio post format support urls from:
If no oEmbed url found, the theme will look for available self-hosted audio/audio playlist in your post content.
Quote post format will pick the very first blockquote that appears in post content.
complete syntax used in above figure for text editor:
<blockquote>Imagination is more important than knowledge. Imagination is the language of the soul. Pay attention to your imagination and you will discover all you need to be fulfilled. <footer><cite><a title="Author title" href="#temp_url">Theodore Roethke</a></cite></footer></blockquote>
Syntax for left-aligned quote:
<blockquote class="alignleft">Over every mountain there is a path, although it may not be seen from the valley. <footer><cite><a title="Author title" href="#temp_url">Theodore Roethke</a></cite></footer></blockquote>
Syntax for right-aligned quote:
<blockquote class="alignright">Over every mountain there is a path, although it may not be seen from the valley. <footer><cite><a title="Author title" href="#temp_url">Theodore Roethke</a></cite></footer></blockquote>
to get rid of author of blockquote, just remove:
<footer><cite><a title="Author title" href="#temp_url">Theodore Roethke</a></cite></footer>
Status post format supports urls from:
Note: Other sources those available in oEmbed still work normally, they are just not deeply supported by Newsbeat and won’t be repositioned on different post templates.
Since WordPress 5.0, block editor has individual Gallery block, and we will have to use Classic block to insert Old school Gallery which can be overwritten by your selected template in
Customize -> Template Settings -> Single Post -> Content -> Gallery template. The following screenshots will show you how to create/insert old school gallery into Block Editor.
If you use Classic Editor, you’ll find Add Media button right above editor, on the left, hit it and continue following step 4.
Just create a new post and you will find review settings for post right under editor, review editor will prompt you if invalid data are entered, based on current review type. Here’s the preview:
Split post into multiple pages
When your post is way too long, you should break it into multiple parts/pages, this is highly recommended, not just better user experience, but also increase revenue from page views.
Newsbeat offer you a post pagination nav with advanced feature instead of just boring numberic nav. Here’s a live preview for paginated post and here’s what we gonna learn about:
As you could see in above figure, there’s also a link to the next part/page of post with preview text so readers will know what they gonna read. Basically, to split post content into parts, we use
<!--nextpage--> between parts (keyboard shortcut:
Ctrl + Alt + P ), preview text for next part will be automatically taken from next page content, if the very first line of text of each page content is wrapped with tag like a heading (h1-h6) or strong tag or something like that, it will be used as preview text for next page navigation. If no first tag found, a part of content will be split and used as preview text. The preview text of last page will link to the next post. Below is a complete example for paginated post.
put the following code to Text editor:
<strong>Post Page 1</strong> This is the second line of page 1 Nunc porttitor quam quis elementum ullamcorper. Quisque rhoncus lacinia magna quis tincidunt. Integer eleifend pulvinar eros, in euismod ligula pellentesque eget. Quisque non mi libero. Nullam quis lacus eu nulla varius volutpat ac nec odio. Integer non tincidunt quam. Donec vel condimentum lectus, in tincidunt lectus. Vestibulum leo lectus, dignissim eu consectetur porttitor, feugiat sodales metus. Aenean eu bibendum tellus. Integer efficitur tincidunt viverra. Cras scelerisque tempor nulla non rutrum. <!--nextpage--> <strong>Post Page 2</strong> This is the second line of page 2 Aliquam pretium enim vitae lacus faucibus, tempor dictum felis pretium. Curabitur nec luctus mi, a faucibus enim. Phasellus interdum libero eros, a volutpat tortor porttitor vel. Praesent ultricies cursus metus quis varius. Integer non nulla odio. Nunc vitae aliquet lectus. Sed nec tortor turpis. <!--nextpage--> <strong>Post Page 3. </strong> This is the second line of page 3 Quisque finibus tristique nibh, et finibus massa fermentum quis. Curabitur tempus rhoncus semper. Nunc consequat nisi ipsum, nec mattis justo mollis eget. Proin pulvinar pellentesque tempus. Duis velit elit, suscipit porttitor enim viverra, ultrices euismod augue. Nulla hendrerit auctor est, vitae elementum felis aliquet at. Ut fermentum luctus magna, ac iaculis lectus ornare sit amet.
and what we see from Visual Editor: