FlipMag Wordpress Theme Documentation

Welcome to FlipMag!

Thanks for Buying

First of all, thank you for buying this theme. To make your experience pleasant, we've added as much info as needed in this documentation.

Installation

There are two methods to install the theme. If the normal installation method (a) is not supported by your web host, you will have to use the alternate option (b).

a. Normal Installation

  1. Login to WordPress Admin and browse to Appearance > Themes.
  2. Click on the Add New Theme (or "Install Themes" tab for older versions) and click Upload.
  3. Browse your computer to select "flipmag.zip" (it's in the zip file you downloaded from ThemeForest). Click "Install Now" button.
  4. Once it's uploaded, click the Activate link.

b. FTP Installation (alternate method)

  1. Use your FTP software to browse to wp-content/themes folder.
  2. Extract flipmag.zip and upload the flipmag folder.
  3. Once it's uploaded, go to your WordPress Admin, browse to Appearance > Themes.
  4. Click the Activate link.

Important After activation, you will be presented with several plugins that you have to activate. Do not forget to activate them all or not all of the theme features will be available.

Note If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails.

Sample Content Import (optional)

We highly recommend against using this method in production. Please only use on a an extra copy for testing or experimenting. This method most likely will fail on shared web hosts. Uncheck "import attachments" option if it fails and try again.

Warning Please do not import content on a WordPress installation that already has a lot of content. Or the very least, make a backup first. A catastrophic mess can be created.

a. Method (recommended)

Using the new method, you can get sample content that's pretty close to the demo site. It will generate random images that are under public domain license (creative commons zero).

  1. Enable all Octo plugins as recommended by the Theme.
  2. Optional: Install WooCommerce and bbPress if you wish to use them.
  3. Optional: Delete all your existing widgets from Appearance > Widgets from the "Main Sidebar".
  4. Go to FlipMag Settings > Sample Import and click Import Sample Data. You might have to wait up to 5 minutes!
  5. That's it.

Tip If it fails, you will have to request your webhost to increase your PHP max_execution_time (or any other webserver timeout to at least 300 secs) and memory_limit (to at least 196M) temporarily.

b. Old Method (not recommended)

This will require performing more steps and it will require extra work to make it look like demo.

  1. Log into Admin and go to Tools > Import > WordPress.
  2. Install the WordPress importer.
  3. Select the flipmag-sample.xml (located in the main zip file in Sample Data folder) and upload it.
  4. On the next screen, under Assign Authors, select or enter a new username for each author.
  5. Do NOT check "Download and import file attachments". It will just download placeholder images that you have to change anyways.
  6. Please be patience as it will take quite some time. Do not interrupt it.
  7. (optional) Once it's done, go to Appearance > Menus > Manage Locations. Select "Main Menu" next to "Main Navigation".
  8. (optional) Go to Edit Menus on the same page, select "Main Menu (Main Navigation)" from menus to edit and click Select. Click to expand Features and select Mega Menu for Links under Mega Menu. You may do the same for categories like Entertainment but selecting "Category Mega Menu" instead.
  9. (optional) Setup your homepage to "Main Homepage" by following the Homepage Setup section.
  10. All Done.

For Flipmag we using some plugin for our theme make very easy and handle anyone with plugin.

We recommended that plugin

  1. Page Builder by SiteOrigin
  2. SiteOrigin Widgets Bundle
  3. Octo Shortcodes
  4. Custom Sidebars
  5. WP Retina 2x
  6. Contact Form 7

TGM Plugin Activation Class ( Developer Guide )

The TGM Plugin Activation class allows you to package plugins for installation with your WordPress theme, including directly from the WordPress.org plugin repository. Envato WordPress Evangelist, has recorded a great little video explaining how to use it.

If you didn't catch the link already, you can download the class from Thomas Griffin's GitHub page and start playing around with this yourself.

Setup Categories

We prefer and recommend categories over tags, but if you wish to use tags, you can enable them from flipmag settings panel.

Setting up categories for this theme is no different than ordinary category setup in WordPress, however, we provide some additional layout settings.

Go to Posts > Categories and fill in the info required. To choose the correct layout, refer to the Demo.

Category Options

Category Listing Style

There are 20 Block and 14 options to choose from: (click to view demo for more information on each style)

  1. Block 1
  2. Block 2
  3. Block 3
  4. Block 4
  5. Block 5
  6. Block 6
  7. Block 7
  8. Block 8
  9. Block 9
  10. Block 10
  11. Block 11
  12. Block 12
  13. Block 13
  14. Block 14
  15. Block 15
  16. Block 16
  17. Block 17
  18. Block 18
  19. Block 19
  20. Block 20

Show Sidebar?

This option allows you to set whether you would like to show the sidebar in the category listing or not.

Note It does not affect the "single post" view in the category. You can modify whether to show sidebar for a post or not for each post.

Featured Slider?

FlipMag supports featured sliders for categories. There are two options here:

  1. Show Posts Marked for Featured Slider: This will show posts that have "Featured Slider Post?" checked.
  2. Show Latest Posts: Show most recent posts in slider, ignoring "Featured Slider Post?" setting.

Posts Per Page — Optional

By default posts per page setting from Settings > Reading is used. This option can be used to override that.

Pagination Type

  • Default uses the settings from FlipMag Settings > Listing Layouts > Pagination Type On Archives.
  • Normal will set it to typical pagination with page numbers.
  • Ajax will set it to typical pagination with page numbers display blocks without refreshing page.
  • Infinite Scroll will automatically load more posts as user scrolls. No pagination will be shown.

Animation

When block post is load with different animation style.

Disable Date

Enable/Disable Post date in block.

Date Format

Choose date format as you want from given option.

Date Link

Change archive link from year, month or post date.

Disable Category

Show/Hide Category on block posts.

Disable Comment

Show/Hide Number of Comments on block posts.

Disable Author

Enable/Disable Post author in block.

Disable Excerpt

Enable/Disable Post excerpt in block.

Excerpt Length

Enter number of length of excerpt but excerpt is enable.

Disable Read More

Show/Hide Read More on block posts.

Adding Posts

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.

Important If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails. Skipping this will make your existing images look out of proportions or stretched.

Recommended Image Size

Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

  • Compatible with all layouts and default slider: 1078x516 minimum (width x height).
  • If you don't use Full Width layout: 702x336 minimum.
  • For posts that will only appears in homepage blocks and listings (no slider, no full-width): 351x185 minimum.

Note FlipMag uses WordPress's standard cropping and resizing method.

About Retina We recommended using images of double height and width to have even your content images appear sharp on high-res devices like iPad. Read more below.

About Retina Images

Retina images are used for hi-definition / hight DPI screens such as iPad, Macbook Retina and so on. For these devices, you need to upload images twice the recommended dimensions above.

FlipMag, when activated, informs you to install a few plugins and one of them is WP Retina 2x. Assuming you had existing images that are large enough, you can convert them to retina images from Media > Retina, after activating the plugin.

Supported Post Formats

Video Format

Setup your post normally and set a featured image. Copy the embed code of the video from YouTube, Vimeo or any other site that gives you video embed codes. Paste the code in the "Featured Video Code" box.

Note Videos will be resized to fit the container so you can choose a larger embed format if the video site allows you to specify size/dimensions.

FlipMag will automatically convert the first gallery inserted into a post to a gallery slider - granted "gallery" post format is checked. To use the gallery post format, same as every other post, set a featured image first.

  1. Click Add Media button.
  2. Click Create Gallery. Upload images or select from Media Library. Click Create a new gallery.
  3. Click "Insert gallery".
  4. (optional) If you wish to show thumbnails or create a static/non-slider gallery, set image captions and click Insert Gallery. Change post format to Standard.

Note To create a tiled mosaic gallery, Slim Jetpacks plugin is required.

Audio Format

WordPress supports embedding into posts by default. An audio player will be inserted into the post.

  1. Click Add Media button.
  2. Select your audio file. Once uploaded, make sure embed option is selected.
  3. Insert and Publish.

Image Format

Image format works very similar to a standard post. Just set a featured image of a recommend size and you're done.

Post Settings & Options

You will see the following post options when adding a post.

Post Options

  • Featured Post? - Check this to feature this post in the homepage/category sliders.
  • Layout Style: You have the option of a layout with a sidebar on right or a full-width layout for this post.
  • Featured Video Code: As shown in the Video Format above, it's for setting a featured video for the post.
  • Custom Background Image: Available when your layout is set to Boxed in Theme Settings. This allows you to change the background image of your site for only this post.

Multi-page Content Slideshow

One of the unique features is a multi-page content slideshow. It's basically <!--nextpage--> feature of WordPress with enhanced functionality.

If you are new to WordPress nextpage feature, the only thing to know is that you can place a <!--nextpage--> in Text editor anywhere to split to content into multiple pages - More info here.

Once you have created a multi-page post normally, you will have to enable the slideshow feature. Follow the steps below:

  1. Edit your post and look for Post Options.
  2. Next to Multi-page Content Slideshow? select either "AJAX - No Refresh" or "Multi-page" option (explanation below).
  3. Save your post. That's all. Your slidehow will be split based on <!--nextpage-->.

Note It's recommended to check "Disable Featured?" for posts of this type.

AJAX or Multi-Page?

There are two options available. AJAX option prevents a page refresh so the content will be loaded via AJAX. This may be good or bad depending on your personal usage.

A site looking for more advertising views will want to use the Multi-page option to register more views. Whereas, a dynamic website wishing to make things faster for users will want to use the AJAX option.

Shortcodes

Most of the shortcodes you will need are added to the GUI Shortcode Generator. Click the "Shortcodes" button while adding a post to see a list of generator-based shortcodes. There are a few layout related shortcodes that will not be listed there.

For more info, refer to the Shortcodes section of the docs.

Creating Pages

Creating pages is a simple process. However, the available templates and special layout based shortcodes might need a bit of explanation.

The Page Builder

Page Builder

Using the page builder is recommended to create homepages. But you can use it to setup any page you like using the combination of widgets available. What's more, you can even use shortcodes within the text widget within the page builder. The only limit is your creativity!

To use the page builder:

  1. Considering you're at new page screen (Pages > Add New), click Page Builder next to Visual and Text tab, above the post editor.
  2. Click the + button to add new widgets. There are two types of widgets, the normal widgets and special block widgets. You can drag and drop multiple normal widgets into a row or column but the same cannot be done for block widgets.
  3. Click on three lines button next to + button to add a row. You can create multi-column or single column row.
  4. Under Page Attributes, select Homepage & Blocks as Template.
  5. Play around with the widgets. Don't forget to enter a page title. Preview and Publish.

About Shortcodes — Advanced & Optional

You can either use the pagebuilder or use advanced shortcodes for everything. Not only that, you may also use shortcodes within the pagebuilder widgets such as Text or Rich Text widget.

For more info, refer to the Shortcodes section of the docs.

Page Templates

Page Templates

  1. Default: The default page has a container.
  2. Homepage & Blocks: This is a bare-bone template. Use it with page builder or when using advanced shortcodes to create the homepage.
  3. Authors List: Use this template to create a list of blog authors.
  4. Sitemap: This is a special template only to be used to create a Sitemap page as shown in the demo.

Setting The Slider

Page Options

When creating or editing a page (for example, your Homepage), under the editor in Page Options, next to Show Featured Slider?, select the type of slider you wish to use.

Both the options are self-explanatory, the first uses posts you manually marked as "Featured Slider Post?" , whereas the second option shows the most recent posts automatically.

Flipmag provide 7 style of slider setting in page and category options. there are demo example link given below :

  1. Feature 1
  2. Feature 2
  3. Feature 3
  4. Feature 4
  5. Feature 5
  6. Feature 6
  7. Feature 7

Custom Sidebars

Details in Sidebars & Widgets section.

Other Pages, Instructions and Samples

Contact Page

Setting up a contact page requires that you install the "Contact Form 7" (go to Appearance > Install Plugins if you have not already installed it).

First create a contact form:

  1. Go to Contact and edit the default contact form (Contact Form 1).
  2. Replace form content with this:

                <p>[text* your-name placeholder "Your Name"] </p>
    
                <p>[email* your-email placeholder "Your Email"] </p>
    
                <p>[text your-subject placeholder "Subject"]</p>
    
                <p>[textarea your-message placeholder "Your Message"] </p>
    
                <p>[submit class:submit-button "Send Message"]</p>
                                                                                
  3. Edit the "Mail" settings to suit your needs and Save
  4. For more information, refer to Contact Form 7's FAQ and Docs.

Once you have created your form:

  1. Go to Contact again. Copy the code under Shortcode column.
  2. Go to Pages > Add New. Add your page content and paste the shortcode where you would like your contact form to appear.

Adding Google Maps to Contact Page

To add Google Maps:

  1. Go to Google Maps.
  2. Find the desired location and in the left pane, click Link icon (it's to the right side of "My places" button, next to print icon).
  3. Click customize and preview embedded map. Set settings as desired and the copy the HTML code.
  4. Edit your page and go to Text editor (next to Visual). Paste your code and Publish.

Authors List

To create a page with the list of authors, simply create a normal page and use Authors List as Page Template.

Homepage Setup

There are many different widgets/blocks that can be used to construct your homepage (or any page). To create a page, please refer to Creating Pages section of the docs.

Setting Up Homepage

Once you have created a page that you would like to use as your homepage, follow these steps:

  1. Go to Settings > Reading.
  2. Choose "A static page" option for Front page displays.
  3. Next to Front Page, select the page you created to be used as the homepage.
  4. Save Changes.

Pagebuilder Blocks For Homepage

While you can use all the page builder blocks widgets for homepage, there are few blocks that are very suitable for homepage. We have used a combination of these in our demo.

Modules

  1. Module 1
  2. Module 2
  3. Module 3
  4. Module 4
  5. Module 5
  6. Module 6
  7. Module 7

Block

  1. Block 1
  2. Block 2
  3. Block 3
  4. Block 4
  5. Block 5
  6. Block 6
  7. Block 7
  8. Block 8
  9. Block 9
  10. Block 10
  11. Block 11
  12. Block 12
  13. Block 13
  14. Block 14
  15. Block 15
  16. Block 16
  17. Block 17
  18. Block 18
  19. Block 19
  20. Block 20

Setup Navigation & Menus

If you have imported demo content, follow (a) else follow (b) to create a new menu.

(a) Existing Menu

  1. Go to to Appearance > Menus.
  2. In the "Manage Locations" area, under Main Navigation, select Main Menu. Click Save.

(b) Creating a New Menu

  1. Go to to Appearance > Menus.
  2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
  3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
  4. (optional) If you would like to use this menu in navigation, in the "Manage Locations" area, under Main Navigation, select your newly created menu. Click Save.
  5. Click Save Menu and that is all.

Mega Menus

There are two types of mega menus that FlipMag is equipped with.

Links Mega Menu

The first one is used to create an organized multi-column list of links. We call it the "Links Mega Menu".

Category Mega Menu

The category mega menu is a 2 column mega menu that shows sub-categories in first column, the latest featured post in the 2 column.

Add Mega Menu

To add mega menu to your menu item:

  1. Go to to Appearance > Menus and select your menu.
  2. Expand the item you wish to add mega menu to by clicking the arrow icon.
  3. Under Mega Menu, select Mega Menu for Links or Category Mega Menu.
  4. Save Menu. Next configure sub-items (below).

Configure Mega Menu Items

To make mega-menus work, you have one additional step of adding sub-items.

For Category Mega Menu, add a few sub-categories as sub-items (drag/drop them under a parent category in menu). Example:

Links Mega Menu is configured by adding Custom Links to be used as headings. You can use 4 of these headings. Then, a 3rd-level sub-items are added which are displayed as links, under each heading. Example:

FlipMag has breadcrumbs enabled by default on all pages but the homepage (they would be redundant on homepage). The navigation breadcrumbs not only aid in navigation but also are immensely valuable for Search Engine Optimization (SEO).

The default breadcrumbs have Rich Snippets built-in so more SEO is undesirable. If you use a SEO plugin like "WordPress SEO by Yoast", please do not enable the breadcrumb functionality of the plugin.

However, if you wish to disable the breadcrumbs: (NOT RECOMMENDED)

  1. Go to Appearance > Theme Settings.
  2. Under Header, click on the button under Disable Breadcrumbs.
  3. Save Settings.

Sticky Navigation

FlipMag has an option that can make your navigation menu stick to top of the browser when your users scroll. This ensures that your navigation menu is always accessible to the user, no matter how scrolled into the page.

To enable sticky navigation:

  1. Go to Appearance > FlipMag Settings.
  2. Under Header, click on the button under Sticky Navigation.
  3. Save Settings.

Header Setup

Custom Logo

By default, your site title will be used as a text-based logo. However, you can also use an image-based logo.

Text-based Logo

  1. Go to Appearance > FlipMag Settings.
  2. Under Logo Text, Enter Website Site Name.
  3. Save Changes.

Using an Image-based Logo

To be retina friendly (look high quality on devices like iPad), you will have to create two images of your logo. One the normal size and the second exactly double the height and width.

  1. Go to Appearances > FlipMag Settings.
  2. Under Logo Image, click Upload button.
  3. Upload your second logo (2x size) under Logo Image Retina (2x).
  4. Click Save Settings.

Ticker Bar

Ticker Bar is the area Below the header. It's enabled by default and has a News Ticker showing latest posts to the left, FlipMag Setting to Social Networks Section adding social icons to the right.

Disabling Ticker Bar

  1. Go to Appearance > FlipMag Settings.
  2. Under Disable Ticker Bar, click the button.
  3. Save Changes.

Adding Social Icons

You will use the social shortcode in a widget to add your social icons.

  1. Go to Appearance > FlipMag Settings.
  2. Under Social Networks Section, Paste URL of your different social account.
  3. Save.

Sidebars and Widgets

FlipMag comes equipped with several custom widgets but also styles many of the default widgets in several locations.

If you are unable to see these custom widgets, please activate the SiteOrigin Widgets Bundle plugin.

Custom Widgets

About Website - Octo
A widget to display an image/logo and a description of your site/blog. Recommended for footer.
Recent Tweet - Octo
Display a configurable number of tweets from your account with configurable sorting options. Recommended for footer.
Social Counter - Octo
Get count of your social account with configurable sorting options from this widgets.
Blocks
Add 20 Blocks for page, sidebar and footer. Information is given from Blocks section with easy configurable options
Modules
Add Module for page, sidebar and footer. Information is given from Modules section with easy configurable options

How to use widgets

  1. Go to Appearance > Widgets.
  2. Main Sidebar is the main right sidebar and Footer (4 widgets columns) is the large footer. Expand the box at right, where you would like to place your widget, by clicking on the arrow icon next to it.
  3. Drag & drop the widget you wish to use, in the expanded area below the box (Main Sidebar for example).
  4. Fill in the information necessary and click Save.

FlipMag's left/right sidebar uses the Main Sidebar widget area. Any widgets you drag/drop in this widget area will be displayed in the left/right sidebar.

Demo uses Recent Tabs, a Text widget with latest-gallery shortcode, an Advertisement widget, and the Latest Reviews widget.

Custom Sidebars

FlipMag is fully compatible with all of the custom sidebars plugins available for free. Custom sidebars allow you to change the right sidebar (for example) to display different widgets on a specific category, post, or page.

If you wish to use custom sidebars feature, we recommend the Custom Sidebars plugin. It's an extremely powerful and flexible free plugin. It's recommended by the Theme to be installed but if you haven't installed it yet, install it from Appearance > Install Plugins (not visible if plugin already installed).

To use this plugin, go to Appearance > Widgets and Create a new sidebar. After you have created a Custom Sidebar, you will have to to go to Appearance > Widgets, click to expand "Main Sidebar", and tick "Allow this sidebar to be replaced".

Next, simply add/edit a post or page and you should have a Sidebars box at the right side where you can select your sidebar from a drop-down list.

Using on categories, tags archives, search, and other archives

  1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
  2. Click Sidebar Location link.
  3. Click to expand For Archives.
  4. For categories, click on Category Archive tab.
  5. For other archives like custom taxonomies, search, tag archives etc. click on Archive Types.
  6. Check "As Main Sidebar for selected"... and click on the input box to select your categories or archives types.
  7. Save Changes.

Older Custom Sidebars - less than v2.0

If you're using older than v2 of Custom Sidebar, go to Appearance > Custom Sidebars, under Replaceable Sidebars select Main Sidebar and Save.

  1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
  2. Click Where? link.
  3. Click to expand on As a default sidebars for archives.
  4. Click on Category archives. Expand your desired category by clicking on it.
  5. Select your sidebar from the drop-down list or click the "<- Set SIDEBAR here." where SIDEBAR is your sidebar name.

As you may have noticed, there are other boxes after step 3 such as "Tag archives", "Author archives", "Search results page". You can use these to set a custom sidebar for a tag, author page, or the search results page respectively.

FlipMag comes with a footer that's split into two sections, the larger (upper) footer and the sub footer. upper footer are widget areas that can be modified as you wish and lower footer updated in FlipMag Setting > Footer.

Please ensure that you have already acquainted yourself with general widget setup via the sections above. This section assumes you already know how to add widgets to widget areas.

By default, you're supposed to use 4 widgets in the footer. However, should you wish to go advanced, you may add a Text widget and use Columns Shortcode to create as many columns as you want with your own content.

Recommended Widgets:

About Website - Octo
Write a description and use an image/logo link - you can upload an image in Media Library and copy/pate the link. Full custom code and HTML supported.
Social Counter - Octo
Get count of your social account with configurable sorting options from this widgets.
Recent Tweet - Octo
Display a configurable number of tweets from your account with configurable sorting options. Recommended for footer.

While the above is a recommended list, you are free to use many of the default widgets in the footer, like Calendar, Image widget etc.

FeedBurner Subscribe — In About Widget

The subscription option shown in the Demo is simply a Feedburner Shortcode. To setup, in your description box of About widget, enter the following shortcode:

[feedburner user="FEEDBURNER USERNAME" heading="Subscribe to our newsletter:" label="Email Address" button_text="SUBMIT"]

Lower Footer

Lower footer is best used for simple copyright message. For a simple copyright message, just add one line message from FlipMag Setting > Footer for left side area and for right side area you can enable your social icons from same section.

Color, Style & Typography

Both the color/style and typography settings are located in FlipMag Settings.

Color & Style

Using a Pre-defined Skin

  1. Go to Appearance > FlipMag Settings. Click General Settings tab at left.
  2. Select one of the pre-defined skins and click Save Settings.

Customizing the Colors & Backgrounds

  1. Go to Appearance > FlipMag Settings. Click Style & Colors tab at left.
  2. Usually you may wish to only change Main Color. This will effect links, background of special elements like slider and highlights module, and other relevant areas. Leave everything default and see if you like the result.
  3. If the Main Color changes are not enough, customize and change colors as you please.
  4. Save Settings.

Note In case you mess up, you can always click Reset Colors. DO NOT click Reset All Settings as that will erase all other settings too.

Typography

Typogrpahy

For typography, we use Google Web Fonts. Many of the typography elements have suggested font families or fonts.

  1. Go to Appearance > FlipMag Settings. Click Typography tab at left.
  2. Select a font you like as the Main Font, Heading Font etc. and Save Settings.
  3. Experiment to get the best effect.

Other Recommended Fonts

  • Droid Sans
  • Lato
  • PT Sans
  • Roboto
  • Gudea
  • Merriweather Sans
  • Oxygen

About Character Sets — Advanced

Non-latin script based languages will not display correctly when using the default fonts. This is because, to limit size, only latin charset is included by default.

To get the fonts to display correctly, you will have to tick the character sets for your language. Some latin-based languages required Latin Extended.

Note If all else fails, you can use the System Fonts show towards the end of the drop down choices.

Blocks

Block 1

Block 1

See Demo

Block 2

Block 2

See Demo

Block 3

Block 3

See Demo

Block 4

Block 4

See Demo

Block 5

Block 5

See Demo

Block 6

Block 6

See Demo

Block 7

Block 7

See Demo

Block 8

Block 8

See Demo

Block 9

Block 9

See Demo

Block 10

Block 10

See Demo

Block 11

Block 11

See Demo

Block 12

Block 12

See Demo

Block 13

Block 13

See Demo

Block 14

Block 14

See Demo

Block 15

Block 15

See Demo

Block 16

Block 16

See Demo

Block 17

Block 17

See Demo

Block 18

Block 18

See Demo

Block 19

Block 19

See Demo

Block 20

Block 20

See Demo

Modules

Module 1

Module 1

Module 2

Module 2

Module 3

Module 3

Module 4

Module 4

Module 5

Module 5

Module 6

Module 6

Module 7

Module 7

Other Settings

To access these settings in question, go to Appearance > FlipMag Settings. Each setting includes relevant information on the right side about what it does making everything very self-explanatory.

FavIcon and Mobile Icon

These favicons are good to have when someone bookmarks your site. Both of these settings are located in Header Settings near the bottom.

Use a 32x32 .ico file for your favicon and 144x144 .png file for mobile icon. Mobile icon will be used when users add your website as a shortcut on mobile devices like iPhone, iPad, Android etc.

Post Tags

While we prefer categories over tags, some of our users might want to use both at the same time. To enable tags, go to Page / Post Settings and set Show Tags to Yes.

Custom CSS

Please do not edit .css files directly. When there is a theme upgrade, you will lose any custom edits you made. Rather, we recommend that you use the built-in custom CSS setting to extend the default style. This CSS will be preserved between upgrades.

Go to Custom CSS, enter your desired CSS and click Save Settings.

Settings Backup & Restore

Before you make any massive like in colors, you may wish to create a backup. Just click Download Backup to get a backup. You can later restore it using the Restore/Import feature.

WooCommerce & Setup

FlipMag can be used with WooCommerce 2.1+ to setup an eCommerce Shop with fully compatibility.

Note This section assumes you already have WooCommerce Plugin activated. If you do not yet know how to use WooCommerce, please use WooCommerce's Documentation to familiarize yourself.

Sample Content

FlipMag uses the WooCommerce's default sample content. Follow the official WooCommerce Dummy Data guide.

Please note, on demo, for the Shop Sidebar example, we're using a custom sidebar with two widgets: WooCommerce Price Filter, and WooCommerce Top Rated Products.

The Default Shop Pages

FlipMag fully uses WooCommerce's internal pages. When WooCommerce is activated, it will create Shop, Cart, Checkout and My Account pages. These are normal WordPress pages that you can edit just like any other page.

Setting Up Sidebars

By default, the WooCommerce integration will have full-width layout. If you wish to enable the "Left Sidebar" or "Right Sidebar":

  1. Go to Appearance > FlipMag Settings > WooCommerce.
  2. Select Left Sidebar or Right Sidebar setting under "WooCommerce Default Sidebar".
  3. Save Settings.

Setting a Custom Sidebar for your Shop

To replace the right sidebar with a custom sidebar for your Shop, follow the steps below.

  1. If this is your first custom sidebar, perform the steps mentioned under Custom Sidebars.
  2. Go to Appearance > Custom Sidebars. Click Default Sidebars tab.
  3. To set it for single products, click to expand By post type. Click Products and select your newly created custom sidebar (from step 1) next to "Main Sidebar". You may wish to do the same for Variations, Orders, and Coupons.
  4. To set it for product listings, click to expand Post type archives. Like in step 3, click Products and select your custom sidebar. You can also repeat it for Variations, Orders and Coupons - depending on whether you're using those features.
  5. Click Save Changes.

Disabling Sidebar Selectively for Pages

Sometimes you may wish to disable the sidebar for only some pages. You can disable the sidebar selectively for pages.

  1. Go to Pages > All Pages. Locate and edit one of the WooCommerce shop page such as Shop, Cart, Checkout or My Account.
  2. Edit the page normally and under Page Options box, next to Layout Style, select Full Width.
  3. Save your page.

Tip The page named "Shop" is used for all product listings so you may change its sidebar settings to affect all product listing pages/archives.

bbPress & Setup

FlipMag can be used with bbPress with fully compatibility.

Note This section assumes you already have bbPress Forum Plugin activated.

Adding Categories & Forums

FlipMag's default bbPress layout is based on traditional forum hierarchy. You need to create categories and forums.

Create categories:

  1. Go to Forums > New Forum.
  2. Enter the required info and on the right side, under Forum Attributes, select Category next to "Type".
  3. Publish.

Create forums:

  1. Go to Forums > New Forum.
  2. Enter the required info and on the right side, under Forum Attributes, next to Parent, select the category you created in the instructions above.
  3. Publish.

Adding Login/Register Button to Navigation

  1. Go to Appearance > Menus and edit your main navigation menu.
  2. On the right side, click on Links, enter URL as #user-login (or a link to your login page but it must include #user-login at the end). In Link Text, enter: <i class="fa fa-user"></i>
  3. Save your menu.

Setup Sidebar for bbpress forum page

Please make sure to sure Custom sidebar is activated..

Please go to FlipMag Seeting > Appearance > Widgets > Create new sidebar or existing sidebar( make sure you activated custom sidebar plugin ) then click on clicking on the "Sidebar Location" link of the custom sidebar and then selecting "Forum Archives" in the Archive Types as displayed in the following screenshot.

Bbpress Options

If you want to display the custom sidebar on single forum pages like following

then you can do so by selecting Forums as Post Types in the Sidebar Location pop up as shown in the following screenshot.

Bbpress Options

To display custom sidebar on specific forum, you have to select the custom sidebar in the Sidebars metabox displayed in the Edit Forum screen.

Translation & Internalization

FlipMag comes with .po and .pot file included under the languages folder. To translate:

  1. Download and install Poedit.
  2. Open flipmag.pot in Poedit. Translate as needed.
  3. Save the file with the locale. If you have already setup WordPress in your language, you can get it from your wp-config.php file under, for example: define('WPLANG', 'en_GB');. In this case, you would save your file as en_GB.po.
  4. Step above should have generated a .po and an .mo file. Copy both these files under the languages folder of Flipmag.

Your Language & Localization

After translating, you may wish to use the correct locale to translate and localize your WordPress installation completely. Refer to Installing WordPress In Your Language at WordPress Codex to learn how to.

RTL Version

For languages that read from right-to-left unlike English which is left-to-right, FlipMag will automatically switch to an RTL style, as long as you it's in your language and uses the correct locale (as explained above).

Multilingual Sites

For multilingual sites, the best way is to purchase the WPML Plugin. FlipMag is compatible with the plugin.

When using WPML, we recommend you use Display the language switcher in the WP Menu option and select Main Menu. This will display the languages drop down menu in the main navigation menu.

Advanced Customizations

If you are looking for layout customizations beyond the Style & Typography settings built into the theme, it's important to judge the nature of customization.

If it's a simple layout change, it's very likely achievable by using different Shortcodes or Custom CSS. However, for something not possible using either of these, a child theme is recommended.

Child Theme

WPBeginner has a great article on How to create a WordPress Child Theme. Use Template: flipmag instead of twentyeleven.

Also, use @import url("../flipmag/style.css"); in the CSS file to import parent stylesheet.

Shortcodes

FlipMag supports the usage of shortcodes in Pages, Posts, Page Builder Text/Rich Text widgets, Advertisement, About, and Text widgets. Thereby, giving your maximum flexibility. Please note when creating a post or a page , most of these shortcodes are accessible via the Shortcodes button in the Visual editor.

Posts Shortcodes

Post shortcodes are accessible via the GUI Shortcode Generator. Simply click the Shortcodes drop-down in the editor (make sure you're on Visual editor) and select the relevant shortcode to be guided.

If you wish to manually use the shortcodes (advanced users only), the guide below offers some insight into each.

PullQuote

[pullquote]quote here[/pullquote]

Dropcap

[dropcap]A[/dropcap]

To use the square version:

[dropcap style="square"]A[/dropcap]

Buttons

[button link="http://somewhere.com" color="white, blue, black, green, red, yellow, or custom hex code" text_color="optional hex color" size="small, medium, or large"]Label[/button]

Tabs

[tabs]
	[tab title="Title 1"]Content 1[/tab]
	[tab title="Title 2"]Content 2[/tab]
[/tabs]

Accordions

[accordions]
	[accordion title="Title 1" load="show"]Content 1[/accordion]
	[accordion title="Title 2" load="hide"]Content 2[/accordion]
[/accordions]

Tip load="show" defines to show this accordion (expanded) by default.

Toggles

[toggle title="Title 1" load="show"]Content 1[/toggle]
[toggle title="Title 2" load="hide"]Content 2[/toggle]
							

Tip load="show" defines to show this accordion (expanded) by default.

Custom List

[list style="arrow, check, edit, folder, file, or heart"]
	[li]Item 1[/li]
	[li]Item 2[/li]
[/list]

Custom lists support all of the icons from FontAwesome. Simply type it in style argument without the fa- (ex. arrows for fa-arrows).

Columns

Columns are a border-line layout shortcodes. While they're also often used in posts, they're covered below.

Layout & Block Shortcodes — Advanced!

This section is only for advanced users. Use page builder if you are uncomfortable with using shortcodes.

Column Shortcodes

The column shortcode is a special shortcode. Sample shortcode:

[columns]

	[column size="1/4"]Column 1 goes here[/column]
	[column size="1/4"]Column 2 goes here[/column]
	[column size="2/4"]Column 3 goes here[/column]

[/columns]

The [column] shortcode has the following variables/options:

size
5 columns are supported. Hence all combinations are supported up to 5 such as 1/2, 2/3, 1/4, 3/5 etc. Alternatively, English version of the numbers is also supported, such as half, one-third, three-fourth, four-fifth etc. Example: size="one-fourth".
text_align
left, center, and right are valid alignment values. left is used by default. Example: text_align="right".
class
Any of the custom CSS classes can be defined for the column using this attribute.

Separator

[separator type="space" /]
type
value: space, line, half-space, half-line. The separator can be either be a large empty space, line-based, small empty space, or line-based but with lesser space.

Media Shortcodes

WordPress core supports embedding much of media out of the box.

Galleries

Galleries were already covered in Gallery Post Format section. For advanced usage, refer to Gallery Shortcode section in WordPress docs.

Embedding Videos & Audio

To show a video from YouTube or Vimeo for example, you would just copy the link and paste it into your post content.

Checkout the Embeds section of WordPress's docs to find the supported sites.

Should that fail, you can use the embed shortcode as [embed]https://www.youtube.com/watch?v=IiCmEzjV3_Y[/embed].

Self-hosted Audio & Video

Starting WordPress 3.6, you can self-host audio or video easily. However, not many webhosts will allow you to upload files of large size.

  1. While adding a post, click Add Media. Go to Insert Media > Upload Files.
  2. Select and upload your audio or video file.
  3. Make sure Embed Media Player is selected in "Embed or Link" option.
  4. Click Insert into post.

For advanced usage, check out the Audio and Video sections of the WordPress docs.

Copyright & Credits

Resources Used