Getting Started


Installing Theme & Plugins

Once you purchase the theme you will receive an email with the Theme’s download package, alternatively once registered you can download it from your BasePixels Account Dashboard.

Upon unzipping that zip file you will find the following folders inside:

  • Demo
  • Help & Support
  • License
  • Upload

Withing the Upload folder There is an additional zipped file titled Chic.zip.

Important: Do not unzip this file! This particular .zip file(chic.zip) should remain zipped.

The easiest way to install a WordPress theme is through WordPress’s built-in Theme Install feature, follow the steps below to install your theme:

Step 1: Log in to your WordPress dashboard and go to Appearance -> Themes. At the top of the page, click the tab Add New.

Installing WordPress Image

Step 2: Just below the headline, you will see a link that says Upload Theme – click that.

Step 3: Click the Choose File button and find the theme .zip file (chic.zip) from your local machine and then click the Install Now button.

Installing WordPress Image

Step 4: After the theme has been successfully installed, click Activate.

Installing WordPress Image

Installing Recommended Plugins

Chic theme uses the following plugins for it’s demo:

Kirki: It is used to enable the theme’s customizer options, you need to Install this plugin to be able to customize the theme yourself.

Jetpack: Jetpack is an essential plugin for all WordPress installations it is designed by the WordPress’s core development team, Chic uses this plugin for showcasing the Galleries and Post Sharing Icons.

Q2W3 Fixed Widget: The sticky widget functionality in Chic’s demo is achieved using this plugin.

We have made installing the recommended plugins easy, all you have to do is click on the Begin Installing Plugins From you WordPress dashboard notification which will pop up after installing the theme and Install each of the plugins Individually or all together as shown in this GIF.

Installing Plugins Gif

Once you have installed the plugins successfully you will be forwarded to the plugin Activate page you can follow the same process as above instead just choose the Activate Option from the Actions Dropdown like so:

Installing Plugins Gif

Importing Demo Content

If you don’t feel like starting from scratch, you can get the same layout as our demo in no time all you have to do is import the demo file we have provided you in the download files and you are done, Follow the steps below to import the theme demo.

In the folder called Demo which you get after unzipping the download packaged you recieved you will find an XML file usually saved as demo.xml

Step 1: On your WordPress dashboard in the left-hand menu, select Tools -> Import.

Step 2: Select the WordPress option. You may need to install and activate WP Importer.

Theme Demo Import

Step 3: Click the Choose File button and upload the theme’s demo content XML file you located above.

Step 4: You will be given the option of choosing which author name will be assigned to the imported content you can choose that from here. Otherwise, click Submit and you’re set!

Locating your License Key

If you have purchased the theme from our website you will be emailed a license key instantly alternatively you can log into your BasePixels Dashboard and locate the theme license key.

theme license

If you have purchased the theme from any other marketplace please request a license available here and we will furnish you with a valid license within 24 hours.

Activate License Key

Once you have located your license key the next step would be to activate it in your WordPress installation, you do not need to activate the license on your local machine but all web hosted domains i.e the live sites need an active license for the regular one-click theme updates where we address performance issues, fix bugs and add additional features to the theme with time.

To active the license follow these steps:

Step 1: Navigate to the theme license page by clicking the Appearence -> Theme License link from your WordPress Dashboard.

Step 2: Paste your theme license key to the field available at the right corner of the page as shown below.

Theme License

Setting Up Customizer

If you have followed the steps under Installing Theme & Plugins specifically installed the Kirki Toolkit plugin, you can skip this section as the customizer already is setup for you.

customizer

If you navigate to the customizer by clicking Appearance -> Customize from your WordPress Dashboard and see the message like in the image on the left, you have not installed the Kirki Plugin correctly, no worries! we have made it super easy for you to install it.

All you have to do is click the Install button as shown in the picture and then activate the plugin to be able to use the customizer properly.

Updating Theme

Theme Updates are available to all valid license holders if you have activated the license as shown in the steps above updating becomes as easy as clicking a button.

If you have turned on update notifications via email, you will receive an email whenever there is a theme update available apart from getting a notification in your WordPress dashboard like so.

theme update

Clicking the Update Now link should be enough to update the theme. Yes! it is that easy.

To know what updates or changes we made to the theme you need to refer to the changelog which can be found here – Chic Changelog. Alternatively you can view the changes directly from your WordPress installation by clicking the Check out what’s new link from the screenshot above.

It is recommended to keep your theme up to date at all times so that your WordPress Installation is healthy fast and secure also to enjoy all the new goodies and features we add to the theme.

Navigation Menu Setup

Setting up the navigation menu is really easy and is a built in feature of WordPress the following steps will guide you through the process.

Step 1: navigate to the WordPress Menu area by clicking Appearance -> Menus

Step 2: Click on create a new menu then select a menu name.

Step 3: Be sure to assign the menu to a theme location by checking the tick box. For example, set the menu as the primary menu for the header of the blog.

Step 4: Save menu

nagivation menu setup

Adding Pages, Categories and Posts to the menu

On the left side of screen are a number of drop-down boxes titled Pages, Links and Categories. Each group contains available items you can add to your menu. Check the box next to the page or post you’d like to add to your menu and click Add to menu. The selected item will appear under Menu Structure.

You can drag & drop the item you’ve added to adjust its location in the menu. You can also create sub-menus the same way i.e dragging an item underneath another so that it’s indented. Make sure to save the menu after any re organization.

Theme Features


Setting Up Widgets

Chic supports One widget area called Sidebar which can be positioned left, right or completely hidden using the Theme Customizer. To add widgets to this sidebar simply drag and drop widgets from the widget dashboard under Appearence->widgets menu.

Chic also supports Three extra widget appart from the default included WordPress widgets.

Included extra widget(s) in Chic are:

  • BasePixels About Widget
  • BasePixels Recent posts Widget
  • BasePixels Infobox Widget
  • BasePixels Imagebox Widget

BasePixels About Widget

The about widget is a handy custom widget to display information about yourself on the sidebar area of your website. We have added a few pre-defined fields to the widget to help you organize the info.

customizer

While the fields available are self-explanatory the upload image field needs some extra steps to add the image correctly.

When you click the Upload Image Button you will be prompted to select the size of the image. Once done click the Insert Into Post Button. If you want more control over the image dimensions etc. another way of adding an image is by uploading it to WordPress by heading over to the Media page under the menu Media-> Add New, once that is done copy the image URL and paste it in the same field here.

BasePixels Recent posts Widget

This widget is similar to WordPress’s default Recent Posts widget however it displays a thumbnail of the featured image along with the other details. Enter the number of latest posts you want to show in the field provided.

Setting Up Signup Forms

Currently, Chic just supports Mailchimp newsletter forms integrated into the theme however you can use any other newsletter service widgets easily.

The theme supports integrated forms in 1 place:

  • Newsletter Widget

However, multiple newsletter widgets can be added on the sidebar and hero widget areas of the theme.

For setting up Mailchimp Signup forms follow the steps below:

Install the Mailchimp for WP plugin from your WordPress dashboard or by following this link.

mailchimp install

Once you have installed and activated the plugin successfully. Next step is to integrate it with your mailchimp account.

Locate your mailchimp api key. Read this article for more info about where to find your api key.

Paste the api key in the plugin’s settings page and save, If you entered the correct key you will see active lists on your mailchimp account.

mailchimp install

Now head over to the plugin’s forms section name it anything you like and paste the following code in the provided field.

<input type="text" name="FNAME" placeholder="Your Name">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Subscribe Now!" />

Installing Plugins Gif

This should be enough to setup the 2 integrated signup forms in Chic. If you want to create a widget form like in the demo copy the form’s shortcode. Then head over to the WordPress’s widgets section and create a text widget. There paste the copied shortcode and that’s it! Check out the following gif for more info.

Installing Plugins Gif

Setting Up Social Media Icons

Chic like all our themes uses the social media icons provided by Jetpack Plugin. Follow the steps above to install and activate Jetpack. Once that is done setting up all the social icons is just a breeze.

To display the top navigation social media icons just navigate to the WordPress dashboard’s menu section and create a new menu then assign it to the social media menu location by navigating to Manage Locations section of the menu page.

If everything is done correctly, just create new menu items and paste your social media links as menu items. That’s it WordPress will automatically generate the respective icons for you.

Style Guide Elements

Chic has built-in styles to make your content look pretty and get your point across in a clean fashion. All basic elements are styled to match the theme design.

If you have imported the theme demo content, the imported page called Style Guide is a great starting point to use the elements and add your own content to it.

we have also added a few extra elements to help you display your content which are:

  • Columns
  • Pull Quotes
  • Highlight
  • Syntax Highlighting

Columns

columns are great when you want a left-right split on your content. To add 2 columns simply paste the following code and add your content to it.

<div class="grid-row">
  <div class="two-columns">
    <h4>Left Column</h4>
    <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p>
  </div>
  <div class="two-columns">
    <h4>Right Column</h4>
    <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p>
  </div>
</div>

Pull Quotes

Pull Quote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature.You can add it easily in your content by adding a class pullquote-left or pullquote-right something like this for left pullquote:

<span class="pullquote-left"></span>

and this for right pullquote:

<span class="pullquote-right"></span>

Highlight

Highlights can be used to draw special attention to an important part of your content, using highlights is really easy all you have to do is wrap the text/content in a span tag a class of highlight like so:

<span class="highlight"></span>

Syntax Highlighting

Chic has a script included with it which helps in displaying your code syntax highlighted for better readability.

We have included the okaidia prism theme and the support for languages including but not limited to:

  • markup
  • css
  • clike
  • javascript

To use the syntax highlighter just copy paste the following code replacing the class with the name of your desired coding language.

// Markup( HTML,HAML etc. )
<pre><code class="language-markup"></code></pre>
// CSS( CSS,LESS,SCSS etc. )

<pre><code class="language-css"></code></pre>

// Clike ( PhP,objC etc. )
<pre><code class="language-clike"></code></pre>

// javascript ( Javascript etc. )
<pre><code class="language-javascript"></code></pre>

// Support for more languages can be added by
// following the steps below.

if you want to change the syntax highlight theme or add support for more languages just regenerate a new script by visiting prismjs website and including it in your child theme’s functions.php file. If you are not able to do it yourself, we will be more than happy to help you out just drop us a line using our contact us page.

Customizer Settings

Chic theme includes an extensive theme customizer that allows you to easily change the look and feel of your site and see your changes in real time before actually applying them to the live site which can come really handy when you want to test drive certain changes. This section will cover the various settings included in the customizer.

You can access the customizer by visiting Appearance -> Customize .

Chic includes the following customizer settings:

Colors & Styling

These settings include all the colors used in the theme usually Primary Color, Various Background Colors, Border Colors etc.

Typography

Typography being one of the most important aspects of a theme we have added a lot of options to customize every small detail of the typography used in the theme. You can select from 800+ Google Fonts easily with just the click of a button.

Body Font

customizer

The body field setting includes options to change the Font Family, Variant, Font Size etc.

The default unit for font size is rem which is recommended to make your site look perfect on all devices. However, it can be changed to any other unit like px or em etc.

We have also provided options to chose Font Subsets which will help you choose which font glyphs you want to load and save file size and improve page loading speeds. Read this article for more info.

Heading Fonts

Chic includes options for setting different font family and/or styles to different heading elements. The fields for each individual heading item work the exact same way as for the body font picker above.

Note: Try not to change font sizes for different heading elements unless absoluetely necessary for your content as we already define a good ratio for the heading size defaults for all themes

Header & Logo Options

customizer

Logo: Upload the regular sized logo image file here preferably .png. Also while uploading take a note of the width of this logo image file, it will be used in one of the following fields.

Retina Logo: We have added scripts and styles which will automatically use this logo image file in case of devices with high dpi screens. Make sure the logo image file you are uploading to this field is 2x the size of the original file you uploaded in the previous field.

Logo Width: Here add the pixel width of the original logo image file you uploaded to the Logo field. No need to enter any unit values px will automatically be added to the value. So If the logo dimentions you uploaded are 200×100, put the value 200 to this field.

Layout

Fields relating to changing the layout of the theme are included under this setting. Under this field there is an option to change the sidebar positioning or hide it completely.

If you want to remove the sidebar on a single page and not the whole website, Chic includes a custom page template called Full Width Page Which you can chose while creating a new page.

Footer

The Footer option panel includes a field to change the copywrite text of the website. We request you to keep this setting as it is unless absolutely necessary. We love backlinks back to our work 🙂

Google Analytics

Chic includes a handy field to easily integrate Google Analytics with your website. Just paste in your Google Analytics tracking ID and you are good to go!

The tracking ID is a string like UA-000000-01. To know where to find this ID from Google read this article.

404 Page

This field includes options and settings to change the content added to the 404 Page. While we have hard-coded the layout of the page, these settings will help you customize most of the content inside the page.

Translating Theme

We have included .pot files inside the theme download package under the Languages folder.You can refer to this article for a step by step resource to aid you in translating the theme using poedit. While we provide resources to help you translate the theme easily, We do not provide any support for translating themes.

Customizations using CSS

While asking for support or trying to change any layout/style of the you will ocassionally have to dive in to edit the CSS of the theme to achieve your desired style changes.

It is not advisable to change the theme’s core files since they will be overwritten when an update happens. Alternatively you can use JetPack’s custom CSS addition which provides a very handy set of tools to add custom css to your website among others.

If Jetpack does not solve your purpose, there are many plugins in the WordPress’s plugin repository which provide custom CSS fields for you to easily paste custom CSS code in.

Need Help?


Stuck somewhere? No worries! we are here to help you, just send us a message via our support center. You will need to Log In before you can access the support center.

We offer Theme Install Services and Theme Customization Services as well! all you have to do is send us a message with your requirements using the form here.

Thank you for checkout out Chic!