To install CeraMag theme, first you need a self-hosted WordPress site. Click the link below to go to WordPress download page, there you will find useful information about installing WordPress.
If you are new to WordPress, we recommend learning a little bit about it before you get started. Here are some useful links in case you need help with WordPress.
To use CeraMag theme, please make sure your server meets the following requirements:
If you encounter any issue listed below, it is related to low PHP configuration limits:
The solution is to increase those PHP configuration limits. Please log into your hosting cPanel and change them. Or you can try to contact your hosting provider and ask them to increase those limits to a minimum as follows:
Since version 2.0, for more friendly user experience, we added a feature to detect your website configuration. If the website does not meet the minimum requirement to run CeraMag theme, the theme will not be activated, and it will display a warning message, so the user will know what happens, and what they can do.
Therefore, after installing and activating CeraMag theme on your website, if you see this warning message:
Then please update your PHP version or the WordPress version.
In most cases you cannot update the PHP version yourself and need to contact your host about this. The upgrade process is an easy process and should be something your host can do for you without impacting your website or charging you a fee.
How to update your PHP version – by WooCommerce
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.
Please note: If you are going to write custom code for the theme, then please also upload the ceramag-child.zip file (you will find it in the folder "WordPress Child Theme" in your download package), then install and activate the child theme. Then you can change code or write your own custom styles for the theme in the child theme files. Later when you need to update the theme, just update ceramag.zip (the parent theme), so your custom code changes will not be overwritten (because they are all in the child theme).
As mentioned above, when installing & activating CeraMag theme, you will see the notice "This theme requires the following plugin: CeraMag Extension". It is the CeraMag Theme function extensions - including these features: post like, post sharing, gallery slider, Instagram feed and more.
Why do you need to install the required plugin?
Because of WordPress code standards and ThemeForest requirements: "Themes execute the presentation and styling of content, while plugins handle content creation and functionality." Therefore, some features must be included in the required plugin but not included in the theme itself.
Please note: Before version 2.1, the required plugin "CeraMag Extension" was activated automatically after installation. But since version 2.1, we cancelled the auto-activation because of the latest Envato WordPress theme requirements.
Therefore, after installing/updating the plugin, please always make sure the plugin is activated.
If you need to find "CeraMag Extension" zip file, please go to "ceramag" theme folder > inc > plugins > then there is "ceramag-extension.zip".
Or you can download the whole package "CeraMagWP.zip", unzip it to get the "CeraMag" folder and open it, then go to "Plugin" to find "ceramag-extension.zip".
As mentioned above, when installing & activating CeraMag theme, you will see the notice "This theme recommends the following plugins…". Those plugins are not required to use the theme, but will extend the theme basic functionality. All those plugins are hosted on the official WordPress repository and are made by other authors. You don't need to install and activate all of them, just choose those you will use on your site.
The recommended plugins are:
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.
Then go to Envato Market > Settings, click on the link to generate a personal token, and then insert it below, then save changes.
There will show new tabs: Themes & Plugins (if you have purchased both themes & plugins from Envato).
As you can see in the screenshot below: 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.
Please follow steps below when you need to update CeraMag theme manually on your site:
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.
Once you have updated the required plugin, please make sure this plugin is activated.
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.
When importing finished, please follow the steps below:
It happens rarely, but if you have issues while importing a demo, please check the documentation Import Issues written by the author of the plugin One Click Demo Import (which we are using for demo importing feature in CeraMag theme).
If you see this error message after clicking on import button, this usually indicates a poor server configuration, usually on a cheap shared hosting (low values for PHP settings, missing PHP modules, and so on). Please see this article to know how to fix it.
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.
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.
After installing, click on "Run Importer", choose "content.xml", upload and import.
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.
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.
CeraMag supports creating subscribe form with the plugin MailChimp for WordPress. It is one of our recommended plugins when installing the theme.
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.
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.
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>
CeraMag theme supports WooCommerce since v1.1. You can sell products on your own site with CeraMag theme and WooCommerce plugin.
Upon installation, WooCommerce creates the following 4 new pages via its Onboarding Wizard:
To set up the shop page, on your site dashboard, please go to WooCommerce > Settings > Products tab > Display tab, there you can find the option Shop Page, select what page you want to be the default shop page (you can choose the shop page created by WooCommerce, or create a new page and choose it). Please check WooCommerce official documentation Configuring WooCommerce Settings about this part.
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.
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.
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.
Go to Appearance > Customize, there you can customise and personalise your theme layout and styles.
You will find the following options in this section:
In this section you can set your site general layout, style and colors.
Set the general colors of your site.
Options for all posts archive.
Change buttons' color and shape.
When using CeraMag theme, you can display your Instagram feed on your website: in site footer as a fullwidth section, or in a widget area (sidebar, or a footer column) by adding the custom widget "CeraMag Instagram".
By default, the Instagram cache will exist for up to 2 hours, which means that if your Instagram has just added some new photos, those photos will not be shown on your website until the cache expires. In some cases, you may like to manually clear the cache. Please open your WordPress Customizer, go to General > Instagram, find the "Clear Instagram Cache" option, and click the "Clear Cache" button.
Please note: this is a new feature added since CeraMag v2.0.
If you use any caching plugin on your site, you may find that sometimes your Instagram photos stop updating, especially if you haven't updated your site content for a while, such as posting a new article. This is because the Instagram feature uses PHP code to render content by default. When the cache plugin works, the code of the Instagram feature may not run.
To avoid this problem, please open your WordPress Customizer, go to General > Instagram, find the "Load Instagram pictures dynamically with AJAX" option, tick the box to enable this option.
Please note: this is a new feature added since CeraMag v2.0.
Usually, when using CeraMag theme to display your Instagram feed, you don't need to authenticate.
However, Instagram officially recommends using Instagram Access Token for authentication and authorization. Moreover, since the Instagram API changes from time to time, using Instagram Access Token is a safer way to link your Instagram account.
In addition, although it happens very rarely, but some users may find that their Instagram feed cannot be displayed on their website without adding the Instagram Access Token. If this happens, then you will need to add your Instagram Access Token.
Step 1 – Generate your Instagram Token.
Please visit instagram.pixelunion.net, and click on “Generate Access Token” button.
Step 2 – Add your Instagram Token to your website.
Please go to Appearance > Customizer > General > Instagram, copy and paste your token into the “Instagram Token” field. Then save the changes.
The token is not valid forever
According to the Instagram official developer documentation, the Instagram Access Token will expire after a period, it is not valid forever. However, the expiration time is NOT specified.
Therefore, if you find that your token expires, please regenerate it and add your new token to your website again.
Even though our access tokens do not specify an expiration time, your app should handle the case that either the user revokes access, or Instagram expires the token after some period of time. If the token is no longer valid, API responses will contain an “error_type=OAuthAccessTokenException”. In this case you will need to re-authenticate the user to obtain a new valid token. In other words: do not assume your access_token is valid forever. - Instagram Developer Doc
In this section you can choose site header style and colors, show or hide elements in site header.
In this section you can choose to show or hide elements in site footer, and set its layout.
In this section you can change settings of the sidebar.
In this section you can control the layout and posts style for the latest posts page of your site. It might be:
The page is consisted with 3 sections:
Check to show a slider of some posts at the top of the post archive. And more options for it will show:
Since v1.2.0, users can display a custom hero image instead of the Top Slider.
In customizer, please go to Home Page > Hero Image. Enable the option, then upload your custom hero image.
Please note: when enable "Hero Image", the Top Slider will be removed from the page.
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.
Here you can control the latest posts archive layout.
In this section you can set the layout and style of the 5 types of archive pages:
Just like Home Page, you can choose the options for each archive page:
Since v1.1.5, you can choose to show subcategories instead of posts on parent category page. In the Customizer, go to Archive Pages > Category, you will see the option at the bottom of the panel:
In this section you can control single post default template, and show or hide some elements on single post.
In this section you will be able to style your WooCommerce shop pages (New feature since v1.1).
In this section you will be able to set font options for text.
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.
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:
In this sub section you are going to set font style for post title. Options including:
And you can tweak these 2 options of post title for Large Post Header separately:
In this sub section you are going to set font style for single page title. Options including:
In this section you can tweak the font of your site primary menu in site header.
Please note: The settings will not be applied to the dropdown/sub/mega menus.
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:
Currently there is only one option in this panel:
Synchronize the data of post views from JetPack to your website
When Jetpack is installed on your site and connected to a WordPress.com User ID, you can choose to synchronize the data of post views from JetPack to your website. Once the data is synchronized, our theme will use the data as a start number of post views for posts on your site. Then you can choose to deactivate JetPack if you don't need it. The post views will still count up without JetPack plugin.
This feature will be useful if your site content is being imported from an old wordpress.com site, or you have been using JetPack plugin on your site for a while, and would like to match the post views stats.
Sometimes you might like to add some custom CSS to your site to personalize some elements' styles. In the customizer, please locate to Additional CSS sub section and add your custom CSS code. Like the example showing in the screenshot below:
This is a default feature of WordPress since WordPress v4.7. If you can’t find Additional CSS sub section in your customizer, then it means your WordPress version is lower than 4.7, please update your WordPress to the latest version.
To display your latest blog posts on the homepage, you can:
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.
CeraMag provides 3 page templates for different page layout:
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.
If you are using Gutenberg editor (also called "Block Editor") - the new editor for WordPress 5 - please check this chapter to know where to find the page options.
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.
To change the page layout and archive styles, please go to Customizer > Archive Pages > Category. Please check Theme Customizer - Archive Pages to know more.
Since version 1.1.6, Tag Archive page can display tag description and tag image in page header.
Go to Posts > Tags, when adding a new tag or edit an existing one, you can upload an image for this tag, then on the tag archive page, this image will be used as the page header background image.
The author information will show:
Author information includes the author profile picture, biographical info and Social Media 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.
Scroll down to the bottom of the page, there you can upload a background image for Author Archive Page Header.
And the examples of the results:
To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.
To change the page layout and archive styles, please go to Customizer > Archive Pages > Author.
To hide the author info box after single post content, please go to Customizer > Single Post > Display Author Info, then uncheck the box.
When editing a single page, please find the "Page Header Settings" panel. There you can find the option "Hide Page Header".
Normally, the page header is the "boxed" layout: not as wide as the screen. Since v2.0, you can change the page header to fullwidth, and you can control the page header style for the following types of pages separately:
Please refer to Chapter 14 - Background Video.
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:
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.
CeraMag theme has 2 single post header styles for users to choose.
On your site dashboard, go to Appearance > Customize > Single Post, then you will see an option Default Header Style:
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.
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.
CeraMag supports 6 post formats: Standard, Gallery, Video, Audio, Quote and Link.
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.
You can also mark a post as featured post on its edit page.
Visitors/readers can click on the heart icon of a post to like it, the number will count up at every click. And the post views 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.
If your site content is being imported from an old wordpress.com site, or you have been using JetPack plugin on your site for a while, you can synchronize the data of post views from JetPack to your website. Please click here to know how to do it.
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:
You can add widgets into the sidebar/footer columns, and drag to reorder the items.
There are 10 custom widgets included in CeraMag.
Add brief information about you and your site. Including a photo, sub title, brief description, signature image and a linked button.
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.
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.
The widget will show your featured posts in a slideshow.
The widget will show one of the following 4 types of posts in a list with small featured image, post title and meta info. And can also show the list number.
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.
Add this custom widget into your sidebar/footer columns to show your social menu.
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.
Enter your Facebook username to display the Facebook like box.
The widget will display a list of authors on your site. Can choose all authors, or choose by name/role.
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:
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: Regenerate Thumbnails.
We suggest use images in 3:2 aspect ratio for the features images and photos in a gallery (especially a slider gallery).
Custom shortcodes have been added since v1.1.1. Currently we have provided 12 shortcodes for content:
To add shortcodes into content, when edit a post or a page, click on the Add Shortcode button above the editor.
Then choose which shortcode you'd like to add in the popup panel, then choose which style of this shortcode you want to use.
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:
Please note: most of the shortcodes have 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]
[lo_button size="large" url="#"] Contact Us [/lo_button]
The shortcodes for Author List and Divider Line don't have a close tag because you don't need to add any text content for these 2 shortcodes.
CeraMag supports (looping and muted) background video for single page/post header and slideshow in the Top Slider since v1.1.2.
To add a header background video for a single page, when edit the page, please find the panel Page Header Background Video. Then upload a video, or select one in the media library, or copy and paste video embed code (for an external video from YouTube or Vimeo).
And you can set a specific start and end point of the video, then the background video will loop between set start and end time.
To add a header background video for a single post, please note:
After add a video to a video format post, tick the box of option Use the video as header background. And you can set a specific start and end point of the video, then the background video will loop between set start and end time.
To display background video for a post in the Top Slider, please note:
After add a video to a video format post, tick the box of option Display video as background when the post is in Top Slider . And you can set a specific start and end point of the video, then the background video will loop between set start and end time.
Gutenberg is the new editor of WordPress core.
If you are new to Gutenberg, you may like to read this doc first.
How to get Gutenberg?
Because there are many differences from the Classic Editor, some theme built-in operations also change in the new editor. Please continue reading for more details.
To get these new features and changes:
Please note: Gutenberg is still improving (fast and frequently), its code/logic may change in a newer version. Therefore, sometimes new issues may arise after updates. We will pay close attention to it and we will be grateful for any problem report.
CeraMag theme built-in image Slider Gallery has been converted into Gutenberg Block.
Step 1 - When adding a block, find Theme Blocks, click the Slider Gallery to add it to the content area.
Step 2 - Then you will see the block has been added. When selecting this block. Click on the "Media Library" button to open the Media Library where you can create a new gallery.
Step 3 - In the Media Library panel, you can upload new images, or select some existing images, and then click "Create a new gallery" button.
Step 4 - Then you can edit this gallery: reorder images, remove images, add captions, add new images into this gallery. Then click "Insert gallery" button.
Step 5 - Now the gallery can be previewed in Gutenberg.
In the Classic Editor, CeraMag Single Post/Page Options are meta boxes which were displayed below the post editor. Since CeraMag v2.0, we redesigned these settings to fit in the Gutenberg UI - Sidebar. So, if you edit a post/page in Gutenberg, you can find the Single Post/Page Options in the editor sidebar.
For example, when editing a post in Gutenberg editor, please click on the "Theme Settings" toggle button to display the Single Post Options. (When editing a Page, the "Theme Settings" will show Single Page Options.)
The options are organized into groups, click on each group heading to expand the group and show its settings.
Please make sure the "star" icon is enabled to pin Theme Settings toggle button to Gutenberg Toolbar:
If the "Theme Settings" is unpinned from the toolbar and you cannot find it, please click the "Show more tools and options" icon, then you can find "Theme Settings" in "Plugins".
If the post format is Gallery / Video / Audio / Quote / Link, the media files (and quote/link content) can be set in Theme Settings section. Please see the screenshot below as reference:
The theme built-in shortcodes have been converted into Gutenberg Blocks (except for Accordions and Tabs).
Drop Caps - when editing a paragraph, enable the "Drop Cap" option, then select a style from "Drop Caps Settings" drop down list.
Highlight & Tweet It (inline):
Since the columns created by Gutenberg "Columns" Block can only be of equal width, we added some more options when users choose 2 columns, to create the a column layout of uneven width.
We have included tips and resources related to this topic in this how-to article: