Chronicl

This more modern version of Chronicl has been ported to a standalone WordPress theme and no long requires Thesis.

Jump down to licensing instructions ↓

This article explains how to install a Kolakube theme into your WordPress installation using the theme, Chronicl, as an example (but the same instructions can be followed for any theme).

After you download your theme from your Downloads Area, unzip the folder you received and find another .zip folder called themename.zip.

Downloading Chronicl

After finding the themename.zip folder, it’s time to upload it to WordPress.

Login to your WordPress site, and navigate to the Appearance → Themes section and click the Install Themes tab at the top.

Installing Chronicl

Once you’re on the Install Themes page, simply click the Upload text and browse your computer for the themename.zip folder.

Follow the WordPress progress messages, and click Activate to finish the installation process, and to enable the theme on your website.

Activate Chronicl

What To Do Next

After successfully installing the theme, your site should look something like the below screenshot. Very bare, with not much going on (this is true for all Kolakube themes):

Chronicl

The magic of a Kolakube theme lies within the Widgets panel of your WordPress Dashboard.

From the Widgets panel (Dashboard → Appearance → Widgets), you can add sidebar(s) to your site’s layout by dragging a widget into any designated sidebar widget area. Likewise, you can create upto a widgetized footer by dragging any widget into any Footer column widget area.

Want to add some menus to your theme? Every Kolakube theme supports at least one menu (usually located in the header). Learn how to use Menus in WordPress.

To add menus to your theme, simply navigate to Appearance → Menus from your WordPress Dashboard and go through the

How To Add Your License Key And Enable Automatic Updates

To ensure your website will receive new versions of the theme when they’re available through your WordPress dashboard, it’s important you enter the License Key you received after you’ve installed your theme.

Here’s how to add it to your site:

license-instructionsStep 1: You can retrieve your license key from the purchase receipt that is sent to your email inbox. In case you misplaced that, you can also get it from your account at any time.

Login to your Kolakube account, and view your available downloads. Under the License table item, click the key icon and copy the license key from the gray popup bar.

Step 2: Once your theme is installed into your WordPress site, go ahead to your dashboard and navigate to Appearance > License. From there, you can paste the license key you copied from the last step, and follow the onscreen instructions to activate your license key.

Activate your license

Once your license is active, and the indicator is green, your site will be ready to receive automatic updates!

One of the most common things you will want to do with a theme like Chronicl is modify the color scheme, or add your own background textures via the WordPress Theme Customizer.

With a very simple function, and some basic CSS, you can easily build onto the current options in the WordPress Theme Customizer that comes with Chronicl. Building a custom design for you and your clients’ websites couldn’t be easier with Chronicl.

Please note: you must have already installed and activated a Child Theme to add the code below. If you own Chronicl, you can start with the Starter Child Theme, located in your downloads area.

How to Add A New Color Scheme to Chronicl

The first step is to add new color options to the Customizer in Appearance > Customizer

In your Child Theme, open your functions.php file. If you’re using the Starter Child Theme, you can simply uncomment the function that has been provided already. If not, go ahead and paste this function into your file:

function chronicl_child_theme_custom_colors() {
	return array(
		'custom-color-1' => __( 'Custom Color 1', 'my_textdomain' ),
		'custom-color-2' => __( 'Custom Color 2', 'my_textdomain' ),
	);
}
	add_filter( 'kol_filter_color_schemes', 'chronicl_child_theme_custom_colors' );

…and modify as necessary. To add new color schemes, simply add a new line after the last ending comma, before the array() closes:

'custom-color-3' => __( 'Custom Color 3', 'my_textdomain' ),

Add Custom Color Schemes to ChroniclRepeat for as many schemes as you need. Save the file, and you will be able to see new color options available in the Theme Customizer.

Select any of those options, and save. Chronicl will not change in appearance yet, but we’re on the right track.

Just note that the array keys you set (custom-color-1, custom-color-2) will be applied to the <body> tag in the HTML on the frontend.

Each new color will be prefixed with color- as well. Click here to see the source. This is how we will target different color schemes with CSS.

Add CSS to Your Stylesheet

With our Customizer options working, and our new body class applied, it’s time to add the CSS to our style.css file.

Open that up, and paste in the following code. Change the custom-color-1 to match your custom color schemes you made in the Customizer:

.color-custom-color-1 .stripes:before,
.color-custom-color-1 .stripes:after {
	background-image: url('images/color-custom-color-1.gif');
}

.color-custom-color-1 .links-primary a,
.color-custom-color-1 .menu-main .fa,
.color-custom-color-1 .menu-toggle span {
	color: #339745;
}

.color-custom-color-1 .box a {
	border-color: #abdfbc;
	color: #abdfbc;
}

.color-custom-color-1 .menu-main a,
.color-custom-color-1 .menu-toggle {
	background-color: #d9ebdc;
}

.color-custom-color-1 .menu-main,
.color-custom-color-1 .format-main h3,
.color-custom-color-1 .format-main h4,
.color-custom-color-1 .format-main blockquote,
.color-custom-color-1 .page-numbers.current {
	border-color: #339745;
}

It looks daunting, but all you really need to do is change the color codes to your own. Of course, you can split up selectors and customize them individually. This will be a great foundation to write your own color CSS, as these selectors account for all colors used around Chronicl.

You can write your own color-specific CSS as well. Any selector your prefix with the .custom-color-1only to that selected color scheme.

Tips For Creating Colored Stripe Bars
I’ve found the easiest way to create custom colored bars is to open up an existing color file in a tool like Photoshop, and adding a Hue/Saturation effect to change all colors.

I’ve prepared a .zip file with a bunch of different colored pattern bars for you to play with if you can’t create your own graphics files.

Click here to download the Stripes pack.

How to Add A New Texture to Chronicl

Adding a texture to the Theme Customizer is an identical process, but with less CSS. In your functions.php file, drop this function in there:

function chronicl_child_theme_custom_textures() {
	return array(
		'custom-texture-1' => __( 'Custom Texture 1', 'my_textdomain' ),
		'custom-texture-2' => __( 'Custom Texture 2', 'my_textdomain' ),
	);
}
	add_filter( 'kol_filter_textures', 'chronicl_child_theme_custom_textures' );

This filter will add those custom texture options to the Theme Customizer. Select them, save, and the array key you set will be appended to the body class of your site (prefixed with texture-).

Now, upload a texture file to your child theme’s images folder. My favorite place to get textures is from Subtle Patterns, but you can use textures from anywhere.

Once you’ve uploaded a texture, drop this line of CSS into your style.css file:

.texture-custom-texture-1 { background-image: url('images/textures/texture-custom-texture-1.png'); }

…and that’s it! Repeat for as many textures as you want.

Chronicl adds 2 new Widgets to your Widgets area in WordPress. These can be used in any widgetized area on your site, and are very easy to use.

Chronicl Email Form

Chronicl Email FormBy default, this widget outputs dummy code to serve as an example for how to use it.

The fields are pretty straightforward, and you can delete any text you don’t need to prevent them from showing up.

To add your own email signup code, go to your email service provider and grab the HTML form code for use in the Optin Code widget field.

A few notes on formatting your form code (base your own email code on the example code in widget):

  • To add an icon to the name field, search your email code for the <input type="name" /> tag and add class="name" as an attribute.
  • To add an icon to the email field, search your email code for the <input type="email" /> tag and add class="email" as an attribute.
  • To make text disappear inside the field on click, change any instance of value="Text..." to placeholder="Text..."

Profiles

profilesYou can use the Profiles widget to beautifully display colored links with icons to your favorite social networks and websites.

To fill in any field, just enter the URL to the desired website (including http://).

To add custom links, simply paste and fill in the shortcode provided in the Custom Link(s) widget. Copy and paste to add as many custom links as you need.

[profile
	link="http://domain.com/"
	text="Your custom link text!"
	color="#b72626"
	icon="music"
	class="custom-class"
]

Notes

  • To find out which icon to use, refer to the Font Awesome Cheatsheet. Do not include any fa- prefixes.
  • The class attribute is only needed if you need to target the link with CSS. You can delete it if you don’t need it.

Chronicl comes with a bunch of pluggable functions that make it even easier for you to modify, and make changes to existing templates and other functionality throughout the theme.

All of Chronicl’s pluggable functions are located in the parent theme’s functions.php file. While they’re documented in that file, here is a list with a quick description of each available pluggable function.

To modify them, simply copy and paste the pluggable function into your child theme’s functions.php file. It’s important that you only copy functions listed as pluggable, as they are wrapped in a if ( !function_exists() ) check which will prevent your site from breaking.

Pluggable Functions List

  • kol_scripts_styles()
    Loads all scripts (JavaScript) and stylesheets (CSS)
  • kol_byline()
    Outputs the byline under post headlines
  • kol_pagination()
    Creates pagination for post type archives
  • kol_archives_title()
    Outputs various titles for different archives title pages
  • kol_author_box()
    Pulls information from users’ Edit Profile section to display an author box after each post

Included in your purchase of Chronicl is a Child Theme Starter Theme. Using a child theme is the best way to customize Chronicl, and this Guide will show you how to get started.

Note: This Guide covers basic elements of a Child Theme that this WordPress Codex article does. For a more thorough analysis of Child Themes, be sure to check that article out.

Why Use A Child Theme?

By using a child theme, you have full range to edit template files, write custom CSS, and paste custom functionality into your theme without ever editing core files.

They key idea there is “without ever editing core files“. This means that when Chronicl receives updates, any changes and code you’ve added to your child theme will not be affected.

With a child theme, you can completely alter any template files. Rather than having to memorize a bunch of hooks, or go through other barriers, using a child theme is the surest way to get access to raw template code and make changes. No extra “barriers to entry”.

Let’s get started.

How To Install The Child Theme

Chronicl Child ThemeInstalling the Chronicl child theme is very straightforward, and follows the same exact process as installing Chronicl.

Login to your Kolakube account, and download the child theme .zip folder from your downloads area.

After that, login to your WordPress site and navigate to Appearance > Themes. Click the Install tab, and then Upload the .zip folder (chronicl-child-theme.zip) you downloaded.

Follow the onscreen instructions, and then Activate the theme.

Keep in mind, that since a Child theme borrows the functionality of the parent theme (Chronicl), your site will still display Chronicl even though you’ve activated a different theme.

Activate Child Theme Chronicl

Making It Your Own

Now that the child theme is installed, you’re ready to go ahead and make it your own. Via FTP, and your favorite code editor, navigate to this path:

/root/wp-content/themes/chronicl-child-themes/

Chronicl Style FileAnd open the style.css file. This file is blank, apart from the comments at the top and the @import reference. This is where you can paste all your custom CSS for your website.

The comments at the top of the file hold all the meta information about your child theme, including the name, description, version number, and other information (refer to this WordPress codex note for more info).

It’s encouraged that you change the info at the top from my details to yours, with the exception of the Template field. If the value of Template is anything other than chronicl, your Child Theme will break.

The @import reference is crucial, and should not be removed. This imports the CSS from the parent theme, and will always add the latest version of Chronicl’s CSS to your Child Theme.

Modifying Templates

If you find yourself needing to make adjustments to any templates, you can very easily do so without editing any core files.

The basic idea of how Child Theme templates work is this: they mimic the Parent Theme. From the look and feel, to theme file structure — any changes you make in a Child Theme will be a reflection of the Parent Theme (see Codex article for more information).

Here’s the process we’re going to follow to make an example adjustment below:

  1. Figure out which file we need to edit
  2. Find the file in the Chronicl Parent Theme folder
  3. Open it, copy ALL the code, then close it
  4. Create the file in the Child Theme, and pasting/saving the exact code

So, say you wanted to make a tweak something in your header. In a WordPress theme, we use the header.php file for header template code.

So, with the file name in mind, we need to search for it in the Chronicl Parent Theme folder. Via FTP, navigate to /root/wp-content/themes/chronicl/.

After doing a quick scan through the files, you’ll notice that the header.php is in the root directory of Chronicl. Open it up, and highlight all the code (command + A to select all, command + C to copy) and copy it to your clipboard. Close the file, without making any changes.

Now, go back a directory, to the themes directory and open up the chronicl-child-theme theme.

child-theme-headerIn there, create/upload a new file named header.php (name it exactly the same as the file in the Parent Theme). Paste the code from your clipboard in there, and save/upload it. We essentially just duplicated the header file from Chronicl into your Child Theme.

Once you create that file, your theme will now load the contents of the new header.php file, not the Parent Theme anymore. To see this, try adding some dummy text to the bottom of the file in your Child theme.

Congrats, you just made your first adjustment with a Child Theme! Apply this logic to other template files (with the exception of style.css and functions.php) to make adjustments throughout your entire theme.

Accessing Templates In Folders

As of Chronicl 1.0, there are 3 folders that contain template files you may wish to overwrite. Since they’re not in the root folder (like header.php) is in our example above, we have to recreate the same folder structure.

chronicl-contentSo, in the wp-content/themes/chronicl/ folder, say I wanted to tweak the /content/content-single.php file. I’d need to go to my Child Theme and recreate the proper folder structure, as illustrated in the screenshot to the right.