CeraMag WordPress Theme Documentation v1.1.1

1. Getting Started

Documentation & Guide

1.1 Installation

To install CeraMag Theme, first you need a working WordPress site. Click the link below to find out how to install WordPress: http://codex.wordpress.org/Installing_WordPress

We assume that you already have a running WordPress site. Now let's install CeraMag.

You need to download the theme zip file from ThemeForest first. Go to Downloads on ThemeForest, and find CeraMag. Download the files and find ceramag.zip - that's what you need for installation.

  1. On your website dashboard, go to Appearance > Themes > Add New > Upload Theme.
  2. Choose ceramag.zip you just downloaded.
  3. Install and activate it.
  4. You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
  5. Done.

1.2 Update CeraMag Theme

Auto Update with Envato Market Plugin

We recommend Envato Market plugin. It can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

You will see this note while installing CeraMag theme, please click it to install and activate Envato Market plugin.

Activate Envato Market plugin
Activate Envato Market plugin

Then go to Envato Market > Settings, click on the link to generate a personal token, and then insert it below, then save changes.

Click on the link to generate a personal token
Click on the link to generate a personal token

There will show new tabs: Themes & Plugins (if you have purchased both themes & plugins from Envato).

As you can see in the screenshot below (we are using our another theme as example here): if there is a newer version for a theme or a plugin, it will show the notice, and you can update the item by clicking on the link Update Available.

auto check for updates
When an item can be updated

Update Manually

Please follow steps below when you need to update CeraMag theme manually on your site:

  1. On your WordPress dashboard, go to Appearance > Themes, activate another theme, for example, Twenty Sixteen (one of WordPress default themes).
    Activate another theme
    Step 1 - Activate another theme.
  2. Find CeraMag theme, hover on it to show "Theme Details", click on it.
    CeraMag Theme Details
    Step 2 - Go to CeraMag Theme Details.
  3. In the theme details panel, find the "Delete" button in the bottom right corner, click on it to delete CeraMag theme.
    Delete CeraMag Theme
    Step 3 - Delete CeraMag Theme.
  4. Click on "Add New" button, then "Upload Theme" button, to upload the latest version of ceramag.zip file.
    Add New Theme
    Click on “Add New” button.
    Upload Theme
    Click on “Upload Theme” button.
  5. After installing ceramag.zip, activate CeraMag theme again. The previous customizations will not lose.

When updating CeraMag theme, if you also see this note:

"The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: CeraMag Extension."

Please click on "Begin updating plugin" link to update the CeraMag Extension plugin as well.


1.3 Import Demo Content

To import the demo content, please make sure you have installed the recommended plugin One Click Demo Import while installing CeraMag theme.

After installing CeraMag and required/recommended plugins, refresh the page, you will see Import Demo Data under Appearance in the left sidebar. Click it, then you will see 12 demos' screenshots. Choose one demo, click on the Import button. It can take a couple of minutes, please wait.

Please note: Don't import multiple demos to the same site, it will create duplicate data.

One Click Demo Import
One Click Demo Import

When importing finished, please follow the steps below:

  1. Menus have been imported, but you will need to tell WordPress where to use the menus. Go to Appearance > Menus, click on the "Manage Locations" tab. Then click on the dropdown select list for each location, choose the correct menu for each one. And save changes.
    Menu Locations
    Menu Locations
  2. On the demo import page, you will see there is a note:
    Demo Import - Setup MailChimp for WordPress
    Demo Import - Setup MailChimp for WordPress
    If you want to build the subscription form with the plugin MailChimp for WordPress, click on the link to get to the settings page of the plugin, then enter your MailChimp API key. Read more in Chapter 1.4 Setup Subscribe Form.

Import Demo Manually

If you don't want to import everything of a demo, you can choose any one of them and import manually. Demo files are located in the CeraMag theme folder > inc > ocdi.

Import Content Only

In the ocdi folder, find the folder: original-data . Open the folder, there is the file "content.xml" in it. It is the demo content data file.

On your site dashboard, please go to Tools > Import, choose WordPress and install it.

Install WordPress Import Tool
Install WordPress Import Tool

After installing, click on "Run Importer", choose "content.xml", upload and import.

Import Widgets Only

In the ocdi folder, find the folder: original-data . Open the folder, there is the file "widgets.wie" in it. It is the widgets data file.

Please install this free plugin: Widget Importer & Exporter. Install and activate this plugin, then go to Tools > Widget Importer & Exporter, choose "widgets.wie", upload and import.

Import Customizer Settings Only

In the ocdi folder, you can see the 6 folders: original-1, original-2, ... , original-6.

Open any one of those folders, you can find the file "customization.dat" in it, that's the customizer data of that demo.

Please install this free plugin: Customizer Export/Import. Install and activate this plugin, then go to Appearance > Customize > Export/Import > Import, choose "customization.dat", upload and import.


1.4 Setup Subscribe Form

CeraMag supports creating subscribe form with the plugin MailChimp for WordPress. It is one of our recommended plugins when installing the theme.

Enter MailChimp API

Please make sure you have installed and activated the plugin. Then get to the settings page of the plugin, and enter your MailChimp API key.

Enter MailChimp API
Enter MailChimp API

To get your MailChimp API key, you can click on the link "Get your API key here" to get to MailChimp site, log into your MailChimp account, and create a key.

Get MailChimp API Key
Get MailChimp API Key

Create the subscribe form

Please copy and paste the code below into the box. Use this markup can make same style of subscribe from on our demo site. For example, CeraMag provides 2 different styles of subscribe form in site footer: Block and Strip. Use this code will allow the theme style the form correctly for each style.

<p>
  Don’t miss out. Subscribe to our weekly newsletter.
</p>
<div class="fields-container">
  <input type="email" name="EMAIL" placeholder="Your Email" required="">
  <input type="submit" value="Subscribe">
</div>
Create Subscribe Form
Create Subscribe Form

1.5 WooCommerce Installation

CeraMag theme supports WooCommerce since v1.1. You can sell products on your own site with CeraMag theme and WooCommerce plugin.

Install WooCommerce

First of all, you need to install and activate the free plugin WooCommerce. Please read WooCommerce official documentation to know how to install and use this plugin.

Import WooCommerce Dummy Content

Right after installing WooCommerce you may find you have an empty store. There are no products, orders, reviews, and more by default. You can start to create your own products, or perhaps you’d like to see what sample orders and products look like, then you can choose to import some dummy content. Please check this article Importing WooCommerce Dummy Data to know details.

Customize your shop & product pages

After you have set up your online store and created some products, you can tweak the layout of the shop index page and single product page via WordPress customizer. Please read the sub chapter Theme Customizer > Shop of CeraMag documentation to find out more.

Setup your product image size

Please read this article to know how to Fixing Blurry Product Images.

And to setup your product image dimensions, please go to WooCommerce > Settings > Products > Display. And after changing image sizes, please don't forget to regenerate your thumbnails.

Product Image Size
Product Image Size

2. Theme Customizer

Go to Appearance > Customize, there you can customise and personalise your theme layout and styles.


2.1 Site Identity

You will find the following options in this section:

  • Logo – Upload your custom brand image then display it as site logo in the site header. Supports SVG logo. When upload a SVG logo, please always click "Skip Cropping" button.
  • Logo Width – To keep your custom brand image look sharp on retina devices, we recommend upload an image with 2x size and give 1x size. For example, upload an image which is 200 x 200 px, and enter 100 px as the image width value.
  • Site Title – Enter your site title and it will show in the site header below the logo image.
  • Tagline – Input the brief description of your site.
  • Display Site Title and Tagline – Uncheck it to hide site title and tagline so only show the logo image.
  • Site Icon – Upload a square image to use it as a browser and app icon (the favicon) for your site.

2.2 General

In this section you can set your site general layout, style and colors.

  • Site LayoutFullwidth / Boxed.
  • Boxed Layout Options – These options will show will choose "Boxed" above. There you can set site content max width, and customize the outer area background color and image.
  • Scroll To Top – Hide or show the "Scroll to top" button.
  • Page Background Image – Set background image for the site page (content area if choose "Boxed Layout").
  • General Colors – Set the general colors of your site.
    • Page Background Color – It’s the site page (content area if choose "Boxed Layout") background color. Default is #FFFFFF (white).
    • Primary Color – This color will be used for links, buttons, highlighted elements and more.
    • Text Color – It’s your site all text color.
  • Posts General Options – Options for all posts archive.
    • Read More Button text – There you can change the text display on the read more button after each post.
    • Pagination StyleNav/Prev Links / With Page Numbers.
    • Hide Post Like Button – Tick the box to hide the Post Like (heart) button on featured images in Posts List.
    • Hide Pinterest Button – Tick the box to hide the Pinterest button on featured images in Posts List.

Customizer - Site Header
Customizer - Site Header.

In this section you can choose site header style and colors, show or hide elements in site header.

  • Header StyleDefault / Centered.
  • Enable Sticky Header – Check to make the site header/main navigation bar always sticks to the browser top, so it’s always visible when scroll the page.
  • Display Social Icons – Check to show your social menu in the site header.
  • Enable Search – Check to show the search field in the site header.
  • Search Screen Style – You can the fullscreen popup search screen's style.
    • Default – It shows search field, all categories, tags and authors. And shows search results instantly while entering keywords. Please note: it will not display authors/categories/tags with no posts.
    • Simple – Only shows the search field. And need to press "Enter" key to show all search results.
  • Header Colors – Set the colors of your site header.
    • Background Color – Choose any color as the site header background color. Default is #FFFFFF (white).
    • Text Color – Set site header's text color.
    • Dropdown Menu Color SchemeLight / Dark. This is for the child menu which shows when hovering on its parent menu item.
    • Primary Menu Background Color – For "Centered Header" only.
    • Primary Menu Link Color – For "Centered Header" only.
    • Secondary Menu Background Color
    • Secondary Menu Link Color
    • Header Background Image – Upload a background image for your site header.

In this section you can choose to show or hide elements in site footer, and set its layout.

  • Subscribe Form – You can display a subscribe form in the site footer. Please note: you need to install and activate "MailChimp for WordPress" plugin first.
    • Display Subscribe Form – Tick to show the subscribe form.
    • Color SchemeLight / Dark.
    • StyleBlock / Strip.
    • Subscribe Form Background Image – Upload a background image.
  • Instagram – Check it and enter the username of an Instagram account. And you can enter a title (optional) for the feed, for example, “Follow Me on Instagram”. You can choose to display the latest 5 to 8 pictures from the Instagram account in a full-width row at the top of the site footer. Please note: your Instagram account needs to be public to show feed on your site.
  • Footer Bottom – 2 options for Footer Bottom area.
    • Display Social Icons – Check to show your social menu in the site footer bottom.
    • Footer Text – Here you can add copyright and more text content. It supports HTML tags. So you can use < h1 > to < h6 > tags, and < p >, < ul > tags to style the content..
  • Footer Colors – Set the colors of your site footer.

In this section you can change settings of the sidebar.

  • Enable Sticky Sidebar – Check to enable sticky sidebar. Only works when sidebar is shorter than content area and when screen width is larger than 1120 px.
  • Sidebar Colors – There you can change the background color and text color of widget titles in the sidebar.

2.6 Home Page

In this section you can control the layout and posts style for the latest posts page of your site. It might be:

  • Home Page – When choose "Front Page displays your latest posts".
    Front Page displays your latest posts
    Front Page displays your latest posts.
  • Blog Page – When choose "Front Page displays a static page", and choose a page (might be named as "Blog" or "News") as Posts Page.
    Front Page displays a static page
    Front Page displays a static page.

The page is consisted with 3 sections:

  • Top Slider
  • Featured Section
  • Latest Posts
Home page/posts page structure
Home page/posts page structure

2.6.1 Top Slider

Check to show a slider of some posts at the top of the post archive. And more options for it will show:

  • Top Slider Style - There are 6 different slider styles:
    • Large Slider
    • Wide Slider
    • Boxed Slider
    • Centered Slider
    • Split Slider
    • Grid Slider
    Top Slider Styles
    Top Slider Styles
  • Pick Posts - Pick the featured posts By Category, By Tag or By Featured Posts (How to choose Featured Posts).
  • When choose By Category or By Tag, you will be able to select one or multiple categories/tags. Please hold the CTRL key (PC) or COMMAND key (Mac) to select multiple items.
  • Number of Posts - Enter a number to decide how many posts will be show in the slider. 1 to 9.
  • You can choose to remove these posts from Latest Posts Archive.
  • Enable Auto Play - The top slider will be auto-played. Then the 3 options below will show:
    • Pause Duration - Short / Medium / Long
    • Transition Speed - Fast / Normal / Slow

You can display the featured posts or most viewed/liked posts as a carousel in this section (How to choose Featured Posts). This section is placed between Top Slider and Latest Posts.

  • Display Featured Section – Check it to display Featured Section.
  • Section Title – It's optional. You can enter a title for this section. For example: Editors' Picks.
  • Pick Posts – You can choose to display Featured Posts or Most Viewed Posts or Most Liked Posts here.
  • Number of Posts - Enter a number to decide how many posts will be show in the carousel. 1 to 9.
  • You can choose to remove these posts from Latest Posts Archive.

2.6.3 Latest Posts

Here you can control the latest posts archive layout.

  • Sidebar Layout
    • No Sidebar
    • Left Sidebar
    • Right Sidebar
  • Posts Layout - There are 17 layouts:
    • Classic
    • Grid 2 Cols
    • Grid 3 Cols
    • Grid 4 Cols
    • 1st Classic + Grid 2 Cols
    • 1st Classic + Grid 3 Cols
    • 1st Classic + Grid 4 Cols
    • List
    • Zigzag
    • Zigzag 2 Cols
    • Block 2 Cols
    • Block 3 Cols
    • Block 4 Cols
    • Block 1st + 2 Cols
    • Block 1st + 3 Cols
    • Block 1st + 4 Cols
    • Minimal
  • Section Title – It's optional. You can enter a title for this section. For example: Latest Articles.
  • Number of Posts displayed Per Page – Enter a number to decide how many posts show per page. It’s the same feature as WordPress dashboard > Settings > Reading > Blog pages show at most x posts.

2.7 Archive Pages

In this section you can set the layout and style of the 5 types of archive pages:

  • Category Archive
  • Author Archive
  • Search Results
  • Tag Archive
  • Date-based Archive

Just like Home Page, you can choose the options for each archive page:

  • Sidebar Layout
  • Posts Layout
  • Number of Posts displayed Per Page

2.8 Single Post

In this section you can control single post default template, and show or hide some elements on single post.

  • Default Sidebar LayoutNo Sidebar / Left Sidebar / Right Sidebar. You can change each post's template while editing it (click here to know details).
  • Default Header StyleLarge / Normal. You can change each post's header style while editing it.
  • Enable Sticky Post Nav on top – Tick it to show a sticky post nav bar on top of single post page while scrolling and reading post content. Please note: it only works when screen width is larger than 600px on laptop/desktop devices. So it doesn't work on mobile devices.
  • Post Nav Color SchemeLight / Dark
  • Display Selected Post Meta – Tick to show selected post meta in single post header.
  • Show Author Photo in Post Header – If choose to show "Author" meta in post header, this option will show. Tick it to show the author's gravatar picture in the post header. To add/edit the author's gravatar piciture please visit this page.
  • Enable Post Like & Share – Check to show post like button and social share buttons.
    • Post Like & Share PositionBy Post Side / After Post.
    • Select which to show – Check to show those social medias.
  • Display Post Pagination – Check to show the Post Pagination.
  • Display Author Info – Check to show the author info box after single post content.
  • Related Posts
    • Display Related Posts – Check to show related posts. Related posts will be randomised each time refresh the page, and will show at most 4 posts.
    • Related Posts Title – Give a title of the related posts section.
    • Pick Posts byBy Category / By Tag.

2.9 Shop

In this section you will be able to style your WooCommerce shop pages (New feature since v1.1).

  • Sidebar – Set sidebar layout for shop page & single product page, and also choose which sidebar to display.
    • General Sidebar LayoutNo Sidebar / Left Sidebar / Right Sidebar. It controls sidebar layout for your shop archive pages: Shop page, category archives, tag archives, search archive.
    • Single Product Sidebar LayoutNo Sidebar / Left Sidebar / Right Sidebar.
    • Sidebar ContentMain Sidebar / Shop Sidebar. If choose Shop Sidebar then you can add shop related widgets to this sidebar and only display those widgets on shop pages.
  • Shop Page & Archive – Controls styles of shop index page and archive pages.
    • Products Layout - There are 3 layouts:
      • Grid 2 Cols
      • Grid 3 Cols
      • Grid 4 Cols
    • Show at most x products – Enter a number to decide how many products show per page.

2.10 Typography

In this section you will be able to set font options for text.

2.10.1 Font Family

Options in this sub section will work for the whole site. You can choose 2 different fonts for different types of text. All 800+ Google Fonts are included in the drop down lists.

  • Primary Font Family – It’s the font family for the main text content: Page/post content and title, widgets text, and more.
  • Secondary Font Family – This font will be used for: Widgets title, navigation items in site header, posts categories, author name and publish date of posts/comments, and more.

2.10.2 Heading Text

In this sub section you can tweak page/post content text style for Heading Text. H1 to H6 heading in page/post content. Options including:

  • Font Weight
  • Letter Spacing
  • Text Transform
  • Style

2.10.3 Content Text

  • Font Size
  • Line Height

2.10.4 Post Title

In this sub section you are going to set font style for post title. Options including:

  • Font Weight
  • Letter Spacing
  • Text Transform
  • Style

And you can tweak these 2 options of post title for Large Post Header separately:

  • Letter Spacing
  • Text Transform

2.10.5 Page Title

In this sub section you are going to set font style for single page title. Options including:

  • Font Weight
  • Letter Spacing
  • Text Transform
  • Style

2.10.6 Widget Title

Options including:

  • Font Weight
  • Letter Spacing
  • Text Transform
  • Style

In this section you will be able to add advertisement to your site. Currently there is only one Ad area: Site Top. More to come soon.

There are 2 options of Ad source:

  • Custom Banner – Choose this option, then you can upload a custom banner image, set banner width, enter ad URL and choose to open the link in the current tab or a new tab.
  • Embed Code – Choose this option, then you can add the ad code. For example, ad code of Google AdSense.

4. Pages

4.1 Homepage & Blog Page

To display your latest blog posts on the homepage, you can:

  • Go to Appearance > Customize > Static Front Page > Front page displays, then choose “Your latest posts”.
  • Or on your site dashboard, go to Settings > Reading > Front page displays, then choose “Your latest posts”.

Then go to Appearance > Customize > Home Page, there you can customize the page layout and latest posts layout.

You can also choose a static page as the homepage, then create a new page, name it “News”, “Journal” or any other title, and set it as the posts page. Then you can style your posts page via Appearance > Customize > Home Page.

Homepage & Blog Page
Homepage & Blog Page

4.2 Page Template

CeraMag provides 3 page templates for different page layout:

  • Default Template (With Right Sidebar)
  • Fullwidth
  • With Left Sidebar

To choose a template for a page, on the site dashboard, go to Pages > All Pages, choose a page to edit it, then on the right hand side, you will find Page Attributes option panel, click to open the Template drop down list, choose a template for this page.


4.3 Category Archive

Go to Posts > Categories, when adding a new category or edit an existing one, you can upload an image for this category, then on the category archive page, this image will be used as the page header background image.

And this image will also be used for the custom widget: CeraMag Category widget.

Category Image
Category Image
Category Archive Page Header
Category Archive Page Header

To change the page layout and archive styles, please go to Customizer > Archive Pages > Category.


4.4 Author Archive & Info

The author information will show:

  • At the top of Author Archive page
  • After single post content

Author information includes the author profile picture, biographical info and Social Media Icons.

4.4.1 Edit Author Bio & Social Icons

To edit author biographical info and Social Media Icons, go to your site dashboard > Users > All Users, find the user you are going to edit, click to open the Edit User page, there you can edit the biographical info.

Author Info
Author Biographical Info & Social Media Icons

Scroll down to the bottom of the page, there you can upload a background image for Author Archive Page Header.

Upload a background image for Author Archive Page Header
Upload a background image for Author Archive Page Header

And the examples of the results:

Author Info Box after single post content
Author Info Box after single post content
Author Info Box after single post content
Author Archive page Header

4.4.2 Edit Author Profile Picture

To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.

4.4.3 Author Page Layout

To change the page layout and archive styles, please go to Customizer > Archive Pages > Author.

4.4.4. Hide Author Info Box on Single Post

To hide the author info box after single post content, please go to Customizer > Single Post > Display Author Info, then uncheck the box.

5. Posts

5.1 Post Template

You can choose a default template for posts, and you are also able to choose different templates for different posts.

Please note: this feature requires WordPress 4.7. Please check your WordPress version and get the version 4.7 to use this feature.

To choose a template for a post, on the site dashboard, go to Posts > All Posts, choose a post to edit it, then on the right hand side, you will find Post Attributes option panel, click to open the Template drop down list, choose a template for this post.

There are 4 options:

  • Default - When choose this, it means the post will use the template you have selected in Customizer > Single Post > Default Sidebar Layout. So if you change the default sidebar layout (post template) in Customizer, this post's template will also change to that one.
  • Fullwidth
  • With Left Sidebar
  • With Right Sidebar

If you choose "Fullwidth" or "Left Sidebar" or "Right Sidebar" for one post, then when you change the default sidebar layout (post template) in Customizer, the change will not affect this post.


5.2 Single Post Header Style

CeraMag theme has 2 single post header styles for users to choose.

5.2.1 Set the default post header style for all posts

On your site dashboard, go to Appearance > Customize > Single Post, then you will see an option Default Header Style:

  • Large - The post header will be shown as fullwidth on the top of the post. And the featured image (or a gallery slider for a Gallery Post) will be used as the post header's background.
  • Normal - The post header will be shown inside of the main content area. And the featured image (or a gallery slider for a Gallery Post) will be placed below the post title and other post meta.
Large Post Header Style
Large Post Header Style.
Normal Post Header Style
Normal Post Header Style.

5.2.2 Set post header style for an individual post

You can change each post's header style while editing it. On your site dashboard, go to Posts, find a post and edit it, or create a new post, then you will find CeraMag Options panel at the right side of the page. Then find Post Header Style option.

Individual post header option
Individual post header option
  • Default - When choose this, it means the post will use the post header you have selected in Customizer > Single Post > Default Header Style. So if you change the default header style in Customizer, this post's header style will also change to that one.
  • Large
  • Normal

If you choose "Large" or "Normal" for one post, then when you change the default post header style in Customizer, the change will not affect this post.


5.3 Post Formats

CeraMag supports 6 post formats: Standard, Gallery, Video, Audio, Quote and Link.

  • Standard Post - Just choose “Standard” as post format.
  • Gallery Post - In the Format panel, choose “Gallery” as post format, then you can click Choose Gallery link, and upload images or choose images from media library to create a gallery. Please also upload a featured image because CeraMag theme will use the featured image as this post's background in Top Slider, Featured Section, Posts Widgets, and also for some posts layouts. Please note: the featured image of a gallery post will not show on its single post page.
    Insert a gallery for a gallery format post.
    Insert a gallery for a gallery format post.
  • Video Post - In the Format panel, choose “Video” as post format, then you can click Choose Video link, and upload a video or choose one from media library. Or insert a video embed code into the Or type manually box. Please also upload a featured image because CeraMag theme will use the featured image as this post's background in Top Slider, Featured Section, Posts Widgets, and also for some posts layouts. Please note: the featured image of a video post will not show on its single post page.
    Insert a video for a video format post.
    Insert a video for a video format post.
  • Audio Post - In the Format panel, choose “Audio” as post format, then you can click Choose Audio link, and upload an audio or choose one from media library. Or insert an audio embed code into the Or type manually box. Please also upload a featured image because CeraMag theme will use the featured image as this post's background in Top Slider, Featured Section, Posts Widgets, and also for some posts layouts. Please note: the featured image of an audio post will not show on its single post page.
    Insert an audio for an audio format post.
    Insert an audio for an audio format post.
  • Quote Post - In the Format panel, choose “Quote” as post format, then enter the quote into Quote box, and you can also enter the quote author/source into Byline box, it's optional.
    Insert quote for a quote format post.
    Insert quote for a quote format post.
  • Link Post - In the Format panel, choose “Link” as post format, then enter the link text and link url into the boxes.
    Insert link for a link format post.
    Insert link for a link format post.

5.4 Featured Post

You can choose some posts and set them as "Featured Post" manually. Then you can insert them into the Top Slider, Featured Section and some widgets.

On your dashboard, go to Posts > All Posts, then you will see the column Featured, tick the box of some posts to mark them as the featured posts.

Featured Posts
Featured Posts

You can also mark a post as featured post on its edit page.

CeraMag Options - Featured Post
CeraMag Options - Featured Post

5.5 Post Like/Post Viewed Counts

Visitors/readers can click on the heart icon of a post to like it, the number will count up at every click. And the viewed counts number will count up at every click into the post.

If your site already has many posts before using CeraMag theme, because your previous themes don’t have this feature (or use a different method to recored those data), the number is zero for every post at first. You can add a fake start number of these counts for each post, please see this link to know how to do it: How to add a start number for post like/post viewed count.

6. Widgets

6.1 Widgets Basics

CeraMag provides 4 widgets area: the left/right sidebar when the page template is not “Fullwidth”, and 3 Footer Columns in site footer. To manage widgets, you can:

  • On your website dashboard, go to Appearance > Widgets.
  • Or go to Appearance > Customize > Widgets.

You can add widgets into the sidebar/footer columns, and drag to reorder the items.


6.2 CeraMag Custom Widgets

There are 9 custom widgets included in CeraMag.

6.2.1 CeraMag Profile

Add brief information about you and your site. Including a photo, sub title, brief description, signature image and a linked button.

6.2.2 CeraMag Category

Display selected (up to 5) categories with background image in the widget area. Please note: it will not display categories with no posts.

Each category's background image can be added/edited via Dashboard > Posts > Categories.

Please hold the CTRL key (PC) or COMMAND key (Mac) to select multiple items.

6.2.3 CeraMag Ads

Upload an image and enter a link to the page you are advertising/promoting about. And you can also choose to open it in the current tab or a new tab.

6.2.4 CeraMag Featured Posts Slider

The widget will show your featured posts in a slideshow.

6.2.5 CeraMag Posts List

The widget will show the latest/most liked/most viewed posts in a list with small featured image, post title and meta info. And can also show the list number.

6.2.6 CeraMag Posts Tab

The widget will show the latest/most liked/most viewed posts in tabs with large featured image, post title and meta info. And can also show the list number. Each group of posts will be placed in an individual tab, click the tab title to switch to that group. Can display at most 3 tabs.

6.2.7 CeraMag Social

Add this custom widget into your sidebar/footer columns to show your social menu.

6.2.8 CeraMag Instagram

Enter the username of an Instagram account to display the latest photos from this account. And you can decide how many pictures to show in the feed.

6.2.9 CeraMag Facebook

Enter your Facebook username to display the Facebook like box.

7. Image Size

To make sure images on your site always look sharp and clear on all devices, the recommended width of images is at least 1600 px when it is supposed to be a full-width image.

Images will be scaled and saved into different sizes after you upload them. You can set image sizes via dashboard > Settings > Media.

Recommended media sizes for CeraMag theme:

  • Medium size - Max Width: 300, Max Height: 300
  • Large size - Max Width: 1024, Max Height: 1024
  • Full size - 1920 x 1280 (3:2)

After you change the media size settings, when you upload new images they will be scaled and saved into the new sizes. But for the existing images, you can use this plugin to regenerate the new sizes: Force Regenerate Thumbnails.

We suggest use images in 3:2 aspect ratio for the features images and photos in a gallery (especially a slider gallery).

8. Shortcodes

Custom shortcodes have been added since v1.1.1. Currently we have provided 4 shortcodes for content:

  • Author List - Display authors of your site. 5 layouts to choose from. And can show all authors or choose by name/role.
  • Drop Caps - Style the first letter of a selected paragraph. 5 styles to choose from.
  • Highlights - Select some words to add marker pen highlight effect. 2 styles to choose from.
  • Tweet It - Select content and allow readers to tweet the sentence by one click. Selected content can be inline or a whole paragraph. But please keep it short because Twitter only allows 140 charcaters.

To add shortcodes into content, when edit a post or a page, click on the Add Shortcode button above the editor.

Add Shortcode Button
Add Shortcode Button

Then choose which shortcode you'd like to add in the popup panel, then choose which style of this shortcode you want to use.

Shortcode Panel
Shortcode Panel
Shortcode Settings for Drop Caps
Shortcode Settings for Drop Caps

For style some text in the post/page, you can select those content then click on the Add Shortcode button to wrap those content with shortcode.

The shortcode for drop caps will look similar to this:

Shortcode for Drop Caps
Shortcode for Drop Caps

Please note: the shortcode for Drop Caps / Highlights / Tweet It has an opening tag and a close tag and text content needs to be put between them. Please see below:

[lo_drop_caps] Content goes here. [/lo_drop_caps]

The shortcode for Author List doesn't have a close tag because you don't need to add any text content for it.