Article Elements

In this documentation article, we will look at the ways you can use the Fourbean Magazine theme to create a beautiful and content-rich article for your magazine website.

For the full article from which the examples are pulled from, visit our demo site.

Writing an article in WordPress

In this document, we will assume that you are familiar with the basics of writing articles in WordPress. If not, start by checking out this article at WPBeginner.

Quick links

Article Introduction

At the beginning of the article, you can add an article introduction, a section that’s shown in a bigger font than the article’s main content:

To do this, you’ll use WordPress’s “Read More” functionality.

Place your cursor at the point where you want to go from the introduction to the main article content and click on the “Read More” button on the visual editor’s tool bar:

You’ll see the split point shown like this:


The Magazine theme supports all of WordPress’s image functionality. It also adds to it a “lightbox” that you can use to view images in a bigger size without leaving the current page.

Some notes regarding using photos in your articles:

  • You can add a caption by using the Caption field in the media library. The caption will be displayed in a small font below the image.
  • To use the lightbox functionality, make sure to select “Media File” as the value for the “Link To” option when inserting the photo.

Here’s how a wide photo with a caption looks like in the article:

Photo Galleries

Sometimes, individual photos are not enough. That’s where photo galleries come to play.

While there are many third party photo gallery plugins you can choose from, we believe that using native WordPress solutions (and improving on them) is the way to go.

Read the WordPress documentation for full instructions on adding a photo gallery.

Some things worth noting:

  • If you want to open the photos in a lightbox, make sure to select “Media File” as the value for the “Link To” option when selecting photos to show in the gallery.
  • Photos are aligned using JavaScript library called Masonry to fit them in the space available for them as nicely as possible. If you are unhappy with the layout, try moving the images around. Also, you can never go wrong with square thumbnail images.

Here’s how this gallery looks like in the article:

Clicking on an image will open it in a bigger size inside a lightbox.


One important feature in many magazine-style articles is the ability to surround a part of your content in a box — for highlighting the content or showing some additional information as an aside.

For boxes like this, the Magazine theme provides a shortcode called “Box.”

To add the shortcode in the visual editor, click on the Add Page Element button next to the media button above the editor’s tool bar.

From the popup that opens up, first select the tab, “Magazine” and then, the shortcode, “Box“:

Select the options you’d like for the box:

  • Style: Full Width (good for summaries and other boxes that are part of the main content) / Float Right / Float Left (good for showing asides or other additional information).
  • Text Size: Normal / Small / Extra Small

Then, click Insert to add the shortcode to your article.

Once the box is in place, you can edit its contents directly in the post editor. Here’s an example of editing an aside aligned to the right:

To edit the box’s options, click on the pencil icon in the toolbar that shows right above the box element.

In the actual article, the box looks like this:

Pull Quotes

Another way to make articles more interesting and to capture the reader’s eye is using Pull Quotes. In the Magazine theme, this can be done easily using another shortcode.

Start by clicking on Add Page Element.

Then, in the popup that opens, select the tab Magazine and the shortcode Pull Quote:

The Pull Quote shortcode has just one option, Align, with three options: Left / Right / Center.

Select one, and click Insert.

Now, you’ll a placeholder for your pull quote. Replace the text “[ Your own content here]” with your actual quote and save the post.

In the post, you’ll see the pull quote with full formatting:

Pros and Cons

Occasionally, for example in reviews, you will want to present a list of pros and cons to your readers. This can be done using the Pros and Cons shortcode that comes with the Magazine theme.

To add a Pros and Cons element to your article, click on Add Page Element, then in the popup that opens, select the tab, Magazine, and the shortcode, Pros and Cons.

This shortcode is different from the other two we presented above in that its configuration is done completely in this view:

  • Title: A title for the Pros and Cons element, shown at the top of the box.
  • Icon for Pros/Cons: Use the two icon pickers to select an icon you’d like to use to present the two lists.
  • Layout:
    • Horizontal: Pros and Cons are shown side by side
    • Vertical: Pros and Cons are shown stacked on top of each other
  • Align:
    • Page Width: The Pros and Cons element fills the entire content area.
    • Float Left / Float Right: The element is floated on either side of the screen. When using this align, pros and cons are always shown stacked on top of each other, regardless of the Layout option.
  • Title Style:
    • Normal: The title is shown as a regular heading above the pros and cons
    • Block: The title is shown as a title bar above the pros and cons
  • Pros: List your pros in this text area, one item per line.
  • Cons: List your cons in this text area, one item per line.

After inserting the shortcode to your post, you will see a preview in the post editor. To edit the element, click on the pencil icon in the toolbar that appears when you click on the element.

To see the full effect of all the options in the Pros and Cons shortcode, view the shortcode in the article: