Creattica

Theme Installation

Top

Installing your theme is pretty easy! After downloading you should have the creattica.zip or creattica-premium.zip file depending upon your version. This is your main theme file which contains all of the required templates and images required for the theme to function properly.

Upload the theme
  1. Go to Appearance > Themes in the WordPress Dashboard
  2. Click on the Add New button
  3. Click on the Upload link
  4. Select the creattica.zip or creattica-premium.zip file you downloaded above
  5. Click Install Now
Activate the theme
  1. Go to Appearance > Themes in the WordPress menu
  2. Hover over the theme thumbnail and press the Activate button

Troubleshooting: If you are getting a 'Broken Theme' or 'Stylesheet Missing' error, this simply means that you haven't uploaded the correct zip files. Double check and make sure you upload the exact files as mentioned above.

Additional information: WordPress Codex – Using Themes



Alternative Method - Using FTP

Some servers place a restriction on the file size you can upload via web interface. If you are getting an error uploading the theme via WordPress Admin, you can upload it using a FTP program like Filezilla. It's pretty simple really.

  1. Unzip creattica.zip or creattica-premium.zip on your computer.
  2. Start FileZilla and login to your server using FTP details provided by your Hosting Company (hostname, FTP Username, FTP Password).
  3. In left panel, browse to your local folder where you unzipped creattica
  4. In right panel, browse to your wp-content/themes folder. Most servers have it in the www folder
  5. Right click your local folder and click upload. It will take a few minutes to upload the theme.
  6. Once upload finishes activate your theme following the steps mentioned above

Site Menu

Top

When you install Creattica, you may not see any menu depending on your WordPress settings. Displaying a Custom menu is very simple with WordPress and Creattica

Setup Custom Menu
  1. Go to Appearance > Menus in the WordPress Dashboard
  2. Click on the create a new menu link.
    (If you already have an existing menu from a previous installation, jump to Step No. 6)
  3. Give a name to your menu in Menu Name and click Create Menu button
  4. Now add the pages, categories, custom links you want from the leftside of your screen to this menu.
  5. Click Save Menu
  6. Click Manage Locations tab at the top
  7. Select the menu you just created in the Primary Navigation dropdown.
  8. Click Save Changes
500+ Menu Icons Premium Version

Premium version comes with the ability to add menu iconss. In the menu editor, simply select the icon to the menu item.

Leftbar

Top
  1. Go to Appearance > Widgets in your wp-admin
  2. Add Widgets to Leftbar Top and Leftbar Bottom Widget Areas.
  3. Once you Save Widgets, these widgets will be displayed above/below the Logo and Menu area on the website.
By default, Leftbar Bottom widget area is hidden on mobile. To change this:
  1. Go to Appearance > Customizer.
  2. Go to Setup & Layout section.
  3. Check the Show Leftbar Bottom area on mobile chekbox.
  4. You can also select the location of Leftbar Bottom widget area on mobile in the next option.

Setup Frontpage

Top

Creattica theme comes with a Frontpage which is made up of several widget areas and sliders. You can easily arrange them in any order, and apply backgrounds/parallax effects to them.

We will use the demo homepage as an example for this tutorial. Take a look at the image below to understand how the frontpage layout has been set up. Click on the image below to open a bigger view.

Setting Up The Layout
  1. In your wp-admin, go to Appearance > Customizer.
  2. In the Frontpage - Modules section, you will find the options to manage the layout.
  3. You will notice that for the demo blog, we have not used all the modules. (You can disable modules by clicing the eye icon.)
  4. You can also add Backgrounds to these modules and apply Parallax effect to the background image.
  5. Click the dropdown icon next to each module for more options.
  6. Save the Changes.
1. Widget Area Content
  1. In your wp-admin, click Appearance > Widgets.
  2. Add Widgets to the Frontpage Widget Areas (A-E)
    Note that the Hoot > Content Blocks widget available on this screen is a great and powerful way of adding content to the above Areas.
2. Adding Slider content
  1. In your wp-admin, click Appearance > Customizer.
    • FREE version: Goto the Frontpage - HTML Slider or Frontpage - Image Slider section to add slides.
    • Premium Version Premium themes display Slider A and Slider B sections instead of HTML/Image Slider. Premium theme users can select any slider they created in wp-admin area under Sliders > Add New.
  2. Select your slider layout and content here.
  3. Save the Changes.
3. Frontpage Content Module

See the next section for details on the Frontpage Content module.

Setup separate Home and Blog Pages

Top

By default, the Frontpage Content module (discussed in previous section above) displays your Blog.

However, on the the demo site we have set separate Home and Blog pages as described below.
Hence the Frontpage Content shows the "static page content" instead of Blog Posts.

Setup Separate Homepage
  1. In the wp-admin area, click Pages > Add New to create a new page.
  2. Give this page a Title. (Lets call it "My Home Page")

    You can enter page content as well. This will be displayed as the FrontPage Content module (see Frontpage Content Module above).

    On the demo blog, we have added content using shortcodes from Contact Form 7 and Mappress plugins. You can install the demo content to get the exact code.

  3. Publish the page.
  4. In the wp-admin area, go to Settings > Reading.
  5. Check on the Static Page option.
  6. Select the page you just created in the above steps in the Front Page drop-down.
  7. Save the Changes.
Setup Separate Blogpage
  1. In the wp-admin area, click Pages > Add New to create a new page.
  2. Give this page a Title. (Lets call it "My Blog")

    You can enter page content as well. This will be displayed as description in the header on the Blog Page. (click here to see screenshot)

  3. Publish the page.
  4. In the wp-admin area, go to Settings > Reading.
  5. We already selected the Static Page option in "Setup Separate Homepage" section above.
  6. Select the page you just created in above steps in the Posts Page drop-down.
  7. Save the Changes.
You may want to add links to the above pages you created to your menu.
  1. In your wp-admin, click Appearance > Menu
  2. Add pages you created in above 2 sections to your menu. These would be your Home and Blog pages.
Blog Archive Layouts Premium Version
  1. In your wp-admin, click Appearance > Customizer.
  2. Goto the Archives section.
  3. Select the layout you want under the Archive (Blog) Layout option.
  4. Save the Changes.

This layout will be used throughout your site including the blog page, category page, tag page, and any other archive list page.

Category and Blog Descriptions

Top

Creattica displays archive descriptions (optional) in the header while viewing the archive index

Category / Tag Description
  1. In your wp-admin area, click Posts > Categories.
  2. Click the Category name to edit the category.
  3. Enter the description in the Description textbox.
  4. Save the Changes.
Blogpage Description

For entering Blog descripion, please refer to the Setup Blog Page section above.

Installing Demo Content (Free Version)

Top

You can follow the steps for installing demo content by following the steps listed in Installing Premium Demo Content.

However, free version does not have Hoot Theme Manager, so you wont be able to import the Customizer Settings. Rest of the demo content can be easily installed using the instructions in the section linked above.

Premium Version

Upgrading from Free to Premium Version Premium Version

Top

Upgrading from Free to Premium version is pretty straight forward. Simply install the Premium theme like described above, and activate it.

Customizer Settings

Technically speaking, the Free and Premium versions are 2 separate themes. This is why the Customizer settings are stored separately by WordPress for Free and Premium versions.

You can always use the Hoot Theme Manager to import/export your customizer settings between different wpHoot Themes. This means when you install Premium version, you can import the Customizer Settings from the Free version.
  1. Goto Appearance > Hoot Theme Manager.
  2. Copy the code from Free version into the textbox and click Import button.
You can also use this to import/export Customizer settings between different WordPress installations (for example: between different sites, from testing to live server etc.)

Do note that HTML and Image sliders (in Appearance > Customizer > Frontpage HTML/Image Slider section) will get replaced by Slider A and Slider B. This is because Premium theme uses a separate post type Sliders to create sliders. Any slider created using this post-type can be selected in the Widgetized Template

Nav Menus

Menus are retained, but they may lose their location

In case you dont see your menu, you may need to reassign its location.
  1. Goto Appearance > Menus.
  2. Click Manage Locations tab
  3. Reassign your menu to the Primary Navigation theme location.
Widgets

Widgets are automatically transferred when you upgrade from free to premium.

In small number of cases, widgets may not transfer properly.
Please note, your widgets are not deleted. They simply do not get assigned properly to the correct widget areas. This is due to the way WordPress stores widgets in the database. If you do not see widgets on upgrading, you can do one of thse 2 things:

1. In your Appearance > Widgets screen, you will see the widgets from Free theme in the Inactive Widgets area towards the bottom left of the screen. Simply drag and drop them back into the proper Widget Areas.
OR

2. If you have a lot of widgets, you can import them using the following method:
  • Activate the free theme version.
  • Once free theme is activated, install the Widget Importer Exporter plugin.
  • Activate the plugin and go to Tools > idget Import Export
  • Click Export Widget button and save the .wie file to your computer
  • Activate the Premium theme, and go back to Tools > idget Import Export.
  • Upload the .wie file you created in above step, and click the Import Widgets button.

Premium Licenses and Theme Updation Premium Version

Top

You can update to the latest version of your Premium Theme using either of these 2 methods:

Manual Update
  1. Download the latest version (.zip format) from the Downloads page on wphoot.com (click the download icon on top right when you are logged in).
  2. Upload it to your site using the instructions provided above.
One Click Update (Preferred)

You can update your premium theme with the click of a button right from inside your wp-admin area (similar to the way you update free themes from wordpress.org). You will need to input the license key on your site to activate One Click updates.


» How to find your License Key

You can find your license key at any of these places

  • On the landing Purchase Receipt page when you make the payment.
  • In the welcome email you received when you made the purchase
  • You can also find your license keys on the Downloads page on wphoot.com (click the download icon on top right when you are logged in)


» Activating One Click Update on your site

  1. In your wp-admin area, go to Appearance > Hoot Theme Manager.
  2. Enter your License Key and click the Save License Key button
  3. You can now Activate/Deactivate the license key for this specific site by clicking the Activate License Key for this Site button


» Updating the site

You will get a notice within your wp-admin area once a new version is available. Simply click the update now link to update the theme.

Customizations (Child Themes) Premium Version

Top

Usage of child themes is highly recommended whenever you make heavy CSS customizations, or make changes to any template files (PHP code). Child themes are mini themes which act on top of the main parent theme.

The biggest advantage of using child themes is that you can make changes (css or php) in them instead of the main parent theme. This will allows you to easily update the main parent theme without losing the customizations you made in the child theme.

Read Next:
How to add Custom CSS to your Theme
How to add Custom PHP to your Theme

Related Articles:
WordPress Child Themes (external link)

How to install Child Theme
  1. Download the sample Creattica child theme from above link to your computer.
  2. Upload and activate the child theme. (See Theme Installation section if you need help installing a theme.)
Switching between Parent and Child Theme

Even though child themes use the parent theme as their base, WordPress treats them separately in some respects. One of them is your Customize Settings.

These settings are stored separately for the parent and child theme. This way you can have different Customize settings (colors, backgrounds, fonts etc) for the main theme and child theme(s)

Note: You can have any number of child themes for a main parent theme. This is useful if, for example, you want to use a different color scheme for the holidays, but dont want to lose original settings for the rest of the year.

Since WordPress stores customizer settings separately for child and parent theme, you may want to port Customizer settings when you first switch from parent to child theme (or vica versa). Fortunately our premium version comes with a simple Import/Export feature.

  1. Install and activate your child theme.
  2. In your wp-admin area, go to Appearance > Hoot Theme Manager
  3. Under Export Customizer Settings copy your parent theme's customizer settings
  4. Paste this code in the Import Customizer Settings
  5. Click Import Settings button.

Installing Demo Content Premium Version

Top
Downloads (Creattica demo content)
WordPress Data (.xml) (right click and save it on your computer)
Customizer Settings (.txt)
Widgets Screenshot
Widgets (.wie) (right click and save it on your computer)

To make your site look similar to the demo blog, you will need to import the following 3:

  1. Standard Wordpress Data (.xml file containing posts, pages, menus, sliders etc.)
  2. Customizer options (txt file using Hoot Theme Manager Importer)
  3. Widgets (.wie file imported using Widget Importer & Exporter plugin)
You may want to follow the steps in previous section on setting up your Frontpage before you begin importing the content.
Standard Wordpress Data Import (Posts, Pages, Sliders)
  1. Download the Demo Content XML file from above. (right click and save it on your computer)
  2. In WordPress admin area, goto Tools > Import and click on WordPress. (WordPress may ask you to install the importer plugin)
  3. Upload the xml file and click Import.
  4. You can select the Import Media checkbox if you want to import the images as well.
Customizer Options Premium Version
  1. In your wp-admin area, go to Appearance > Hoot Theme Manager
  2. Open the Customizer text file above and copy the data.
  3. Paste this data in Import Customizer Settings box in your Hoot Theme Manager
  4. Click Import Settings button.
Widgets Import

You can take a look at the widgets screenshot above to understand how each widget was setup on the demo blog.

To import these widgets to your site, follow these steps.

  1. Download the Widgets .wie file from above. (right click and save it on your computer)
  2. Install Widget Importer & Exporter plugin
  3. Once you have installed and activated the plugin, in your wp-admin area go to Tools > Widget Importer & Exporter screen
  4. Under Import Widgets, upload the .wie file you downloaded in above steps.
  5. Click Import Widgets button

Animated Scrolling / One Page Websites / Landing Pages Premium Version

Top

You can make One Page websites with menu items linking to different sections on the page. The page will scroll down to a section on the page when the site visitor clicks a menu item.

See the Home menu link on the demo site to see Scrollpoints in action.

This is not just limited to menu items. You can manually add links as well to different sections on a page. For example, if you have a very large article, you can add links at the top to different article sections. When a visitor clicks on any of these links, the page will automatically scroll down to the corresponding section.

Click here to know more about Scrollpoints - How to add them to menu and/or create manual links.

Lightbox - Images and Galleries Premium Version

Top
Images (jpg, jpeg, gif, png) in Lightbox

Lightbox gets activated automatically on installing Creattica Premium. By default it opens all links pointing to images (.jpg .jpeg .gif and .png) in a standalone lightbox.

WordPress Gallery in Lightbox

When you create WordPress Galleries, Creattica's Lightbox automatically converts the links to a lightbox gallery. Just make sure your gallery images link to Media File in the dropdown.

Disable Lightbox for specific images

You can disable a link pointing to an image simply by adding the no-lightbox class to the link.

Example: The original link added by WordPress (opens in lightbox)

<a href="http://my-site.com/image.jpg">Click Here to open Image</a>

Same link with the no-lightbox class added (opens normally in browser window)

<a href="http://my-site.com/image.jpg" class="no-lightbox">Click Here to open Image</a>
Disable Lightbox throughout Website
  1. In your wp-admin, go to Appearance > Customizer
  2. Click the Setup & Layout section. Check the Disable Lightbox checkbox.
  3. Save Settings

Shortcodes Premium Version

Top

Shortcodes are powerful shortcuts used in WordPress to help users insert special kinds of content. Creattica Premium comes with a set of powerful shortcodes which can be inserted anywhere in Posts, Pages and even Widgets.

Shortcode Generator
  1. In your wp-admin, go to Posts > Add New
  2. Click Insert Shortcode button.
  3. Select your shortcode in the left panel. In right panel select the options for shortcode.
  4. Click Insert Into Post

Sliders and Carousals Premium Version

Top

Creattica Premium adds a new Sliders Post Type to your WordPress Admin. Go to Sliders > Add New Slider to create Sliders and Caousals.

Inserting a Slider/Carousal to your Home Page
  1. Go to Sliders > Add New Slider and create the Slider you want to add to your HomePage.
  2. If you haven't done it already, follow the steps in Setup Frontpage section above to set up your frontpage.
  3. In your wp-admin, go to Appearance > Customizer.
  4. Under Frontpage - Slider A or Frontpage - Slider B section, select the sliders you want to display on your Frontpage.
  5. Save your settings.
Inserting a Slider/Carousal to your Content
  1. Insert a slider to your Post/Page by going to Post/Page > Add New.
  2. Click Insert Shortcode button
  3. In the dropdown, select the slider/carousal you want to insert
  4. Click Insert into Post button
Displaying a Slider/Carousel using Widgets

You can display slider in Widget Areas (Appearance > Widgets) by adding a Text Widget. Copy Paste the Slider Shortcode into the Text Widget and Save

A slider shortcode is simply [hoot_slider id="123"] where 123 is the Slider ID.
Click here to learn how to determine IDs of any post type.

Custom 404 Page Content Premium Version

Top

Creattica Premium lets you display a custom page for the default 404 Not Found page.

  1. In your wp-admin area, go to Appearance > Customizer
  2. Click the 404 Page section.
  3. Select Custom 404 Page option.
  4. In the dropdown, select the Page you want to use as your 404 page.
  5. Save Settings

Once you have Saved the Settings, head over to Pages > All Pages to edit the content of this page.

Adding Google Analytics (and other custom javascript) Premium Version

Top
  1. Setup your Google Analytics account and get your tracking code.
  2. In your wp-admin, click Appearance > Customizer.
  3. Click the Custom Code section.
  4. Copy and paste the Google Analytics tracking code to the Custom Javascript text box.
  5. Check the Include Custom Javascript in Header checkbox
  6. Save Settings

Recommended Image Dimensions Premium Version

Top
Blog (Featured Images)
  • Blog (Style 1 - Big)
    • with Regular Sidebar - 840 x 385 pixel
    • with Narrow / No Sidebar - 945 x 385 pixel
  • Blog (Style 2 - Medium) Premium Version
    • with Regular / Narrow / No Sidebar - 420 pixel width (no height limit)
  • Blog (Style 3 - Small) Premium Version
    • with Regular / Narrow / No Sidebar - 300 x 230 pixel
  • Blog (Style 4 - Mosaic 2 column) Premium Version
    • with Regular / Narrow / No Sidebar - 420 x 190 pixel
  • Blog (Style 4 - Mosaic 3 column) Premium Version
    • with Regular / Narrow / No Sidebar - 420 x 290 pixel
Content Block Widget
  • Style 1, 2 and 3
    • 1 Column Blocks Full Width Image
    • 2 Column Blocks 840 x 385 pixel
    • 3 Column Blocks 420 x 290 pixel
    • 4 Column Blocks 420 x 290 pixel
    • 5 Column Blocks 420 x 290 pixel
  • Style 4
    • 1 Column Blocks 840 x 385 pixel
    • 2 Column Blocks 420 x 290 pixel
    • 3 Column Blocks 420 x 290 pixel
    • 4 Column Blocks 420 x 290 pixel
    • 5 Column Blocks 420 x 290 pixel

Code Snippets Premium Version

Top

Custom code snippets to modify your theme can be added using Child Themes. Custom CSS can also be added via Customizer (under Custom Code section in the premium version). Both these methods have the distinct advatage of preserving your customizations even when you update the main theme.

Must Read:
How to add Custom CSS to your Theme
How to add Custom PHP to your Theme

 
## Hide Title Area

Removing Title Area for specific Pages Premium Version

Sometimes you may not want to display the title area for some specific pages (for example, the checkout page of WooCommerce). In such cases you can disable the Title Area for specific pages from your wp-admin area.

Go to Pages/Posts > All and click the Page/Post you want to edit. On the Edit Page/Post screen, select the Hide Title Area for this Page option in the Page Options box.

In case you do not see Page Options box, make sure it is visible from the Screen Options dragdown button at the top right of screen.

Remove Title Area throughout the site

Add the following CSS to remove title area throughout your site.

#loop-meta {
  display: none;
}
Remove Title Area from all 'Pages' only

Add the following CSS to remove title area from all Pages on your Site.

.singular-page #loop-meta {
  display: none;
}
Remove Title Area from all 'Posts' only

Add the following CSS to remove title area from all Posts on your Site.

.singular-post #loop-meta {
  display: none;
}
 
## Reduce Page Title area height

Add the following CSS to modify the Title area height.
You will need to modify the numbers below to suit your site - the code below has the default spacings in 'px' (pixels)

.loop-meta {
  padding-top: 40px;
  padding-bottom: 40px;
}
 
## Delete descriptive text below Comment Form

WordPress adds default descriptive text below comment forms. To remove this, follow these steps:

Remove using PHP

Add this PHP code to remove the descriptive text (How to add Custom PHP to your Theme)

add_filter('comment_form_defaults', 'hoot_comment_form_defaults');
function hoot_comment_form_defaults($args) {
  $args['comment_notes_after'] = '';
  return $args;
}
Remove using CSS

Alternatively, you can simply hide it using CSS. Add the following CSS to your theme. (How to add Custom CSS to your Theme)

.form-allowed-tags {
  display: none;
}
Top