2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. FlipFlop


Important: This theme was retired in February 2014. Documentation is no longer being updated.

Overview ↑ Back to top

FlipFlop is a clean and responsive theme with a design focused on getting visitors to reading your articles.

Setting up the home page ↑ Back to top

Outside of the usual custom logo upload, background and typography in the theme options, there are other options to note when setting up the home page.

Go to FlipFlop > Theme Options > Layout Options

Layout Options in FlipFlop

You can tweak the layout by putting the sidebar on the right or left of your content. There are options exclude categories from the homepage and on your blog, and enable the search field and navigation in the header, and change how the meta data is displayed.

The heart of FlipFlop is module setup and options, and how to use widgets on the homepage. Go to FlipFlop > Theme Options > Homepage.

To use the home page as a widgetized page, start putting widgets in the home page widget area under Appearance > Widgets.

We included a Woo – Component widget that holds the default modules. That means the Featured Slider, Recent Entries, Specific Entries, and Categories Grid sections can be re-arranged via a quick drag and drop into your preferred order.

FlipFlop’s Widgetized Homepage

If you prefer to use the standard layout and skip the widgets, that is fine too. You can enable or disable those sections via FlipFlop > Theme Options > Homepage > Homepage Setup.

Setting up the Featured Slider ↑ Back to top

FlipFlop’s Featured Slider Options

Go to FlipFlop > Theme Options > Homepage > Featured Slider. The Featured Slider has a slew of options to control how the slider functions.

The two to make note of are how the slider filters your content. It offers the choice to either use categories or tags to pull in content from your site. Or you can use both.

For example you could have a category where you only put your posts you want in the slider, and the same goes for tags. You can select a tag like ‘featured’ to use in the slider. You then tag the posts you want to be in the slider with ‘featured’.

Setting up Recent Entries ↑ Back to top

FlipFlop’s Recent Entries Settings

FlipFlop > Theme Options > Homepage > Recent Entries. The Recent Entries area is where theme will display your latest posts. There are several standard options here for you to tweak to your liking, such as number of entries, image size and alignment, and more!

Setting up Specific Entries ↑ Back to top

FlipFlop’s Specific Entries Settings

FlipFlop > Theme Options > Homepage > Specific Entries. Again, there are plenty of options for you to have complete control over this section of FlipFlop. We’ve used it to setup a “News in Pictures” section, using the thumbnails from certain posts on our site. Using the Specific Entries section, it’s worth noting that you can filter posts here by either category or tag. This works just as it does in the Featured Slider. If you only want a certain category or tag to show up in your Specific Entries you can easily do so here.

Using the Column Generator ↑ Back to top

The column generator allows you to create custom column layouts within your posts or pages.

Here is a quick walk through on how to setup columns using our column generator. Note that this tool isn’t included in all of our themes, only themes that require such a tool like certain magazine and news themes.

When editing a page or post, first scroll down to the theme’s custom settings box. There you will find the Column Layout Style and a note on column layout selection.

We’d first suggest to read over the note on column layout selection. It says,

“When selecting a column layout option, please be sure to add only the appropriate number of column breaks into the content editor above. For example, if you have selected a two-column layout, only a single column break is required to produce two columns. If you have chosen a three-column layout, two column breaks are required.”

With that in mind, you’ll want to pick the appropriate layout you are going for with your post or page here. For this example, we’re going to setup three equal columns, so select the 3-column layout (as shown above).

Once you have that selected, you’ll know how many column breaks to enter into your page or post. Scrolling up to the content, let’s see how that works. You’ll notice under the visual editor the column break icon. You simply click this to insert your breaks.

Just find areas in your post where you’d like the breaks to be at and click the icon. That will insert one break for you. Since we’re wanting a three column layout, we need to enter one more for a total of two breaks for three columns. We’ll scroll here and insert one to finish it up.

Let’s now publish this post and view it on the front end. You’ll see your three beautiful columns now, setup just as you wished.

As noted, this works similarly for whichever column layout you’ve chosen. Just be sure to use the appropriate amount of breaks for the columns you’ve selected.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment