Playing With ColorLabs Theme Panel

These day for me, a simple theme is a theme which can be modified easily. Everything you need can be added into the theme, like if you want to make an option, a notification, a label, etc.

In my opinion, ColorLabs themes is very easy to be modified even though they wouldn’t give you a modification service. For me, they code is very easy to be read. This time i will share to you how to modify ColorLabs theme panel like adding a new options and some modification on it.

Part 1: Understanding Theme Panel

Theme panels code at all ColorLabs themes are stored at file named theme-options.php. So, in order to modify or adding a new panel, you have to edit this file. This file is stored at directory: wp-content >themes > your-themes-folder > includes.

My recommendation if you want to edit this file, i suggest you to use a FTP client software like FileZilla, or another. Why you have to use this software? In case you made some mistakes, you can redo your mistakes.

Part 2: Header Panel

Every option panel have its own header panel. For example, if you open the file, you can find out a code like this one:

$options[] = array( "name" => __("Analytics ID, RSS feed", "colabsthemes" ),
					"type" => "heading",
					"icon" => "statistics");

This code is a header of a panel, if you write this code, then a new panel will be created at your theme panel. Also this code is a single container which means if this code doesn’t need any closing code like HTML did.

If you check the code, there is a label like Analytics ID, RSS Feed. You can change this label become your panel title. Also there is a type value declared as heading, which means this code is a header (this code will create a panel item). And the icon, statistics is the default icon ColorLabs has (a gear icon).

Part 3: Collapsed  Panel

Collapsed panel, may be if you ever use ColorLabs theme, you will find an option like a toogle (if you tick the option, another options will displayed).

$options[] = array( "name" => __("Enable Footer Sidebar", "colabsthemes" ),
					"desc" => __("Display footer sidebar", "colabsthemes" ),
					"id" => $shortname."_footer_sidebar",
					"std" => "true",
					"class" => "collapsed",
					"type" => "checkbox");

This code, unlike the header panel, its need a closing code.

If  you check on the code, you can find class named collapsed and type checkbox. This code means if the checkbox is ticked, an options will be displayed (collapsed).

And again, if you check on the code, you will find a label like Enable Footer Sidebar, this label is the title of your option. And a label Display Footer Sidebar is your option description like what will happened if you activate this option.

$options[] = array( "name" => __("Footer Sidebar Name", "colabsthemes" ),
					"desc" => __("Type a name for footer sidebar", "colabsthemes" ),
					"id" => $shortname."_section_title",
					"class" => "hidden last",
					"type" => "text");

And this is the closing code. A closing code for collapsed option is an option with specific class. For example is that code above, this code function is to make you able to type a label for your Footer Sidebar. This option is the latest option of the collapsed code.

If you notify the code, there is a class value declared like hidden last. This class means this is the last code which is hidden under the collapsed option.

Part 4: Displaying A List Of Pages As Select Option

If you ever use ColorLabs themes, you may find an option like you can choose a page from a select option. To make it, you can use this code:

$options[] = array( "name" => __('Contact Page', 'colabsthemes'),
					"desc" => __('Select a page which have Contact Page Template', 'colabsthemes'),
					"id" => $shortname."_contact_page",
					"std" => "",
					"type" => "select2",
					"options" => $colabs_pages,

At this code, you can find another type declared, select2. This type means if you want to displaying a select option, and there is also an options value $colabs_pages, this code will displaying all pages you have as the options of select option.

Part 5: Displaying A List Of Categories As Select Option

There is also another option available  that you can use to displaying a lists of category. To do it, you can use this code:

$options[] = array( "name" => __( "Video Section Category", "colabsthemes" ),
					"desc" => __( "Select your category to show in video section at frontpage.", "colabsthemes" ),
					"id" => $shortname."_video_cat",
					"type" => "select2",
					"options" =>  $colabs_categories);

Same as the code before to displaying a lists of pages, you can use this code to displaying a lists of category $colabs_categories

Part 6: Displaying An Upload Field

There is another code to displaying an upload field. To do it, you can use this code:

$options[] = array( "name" => __("Custom Favicon", "colabsthemes" ),
					"desc" => __("Upload a 16x16px ico image that will represent your website's favicon. Favicon/bookmark icon will be shown at the left of your blog's address in visitor's internet browsers.", "colabsthemes" ),
					"id" => $shortname."_custom_favicon",
					"type" => "upload");

At this code, there is another type named upload. After you type this code, an upload field will be displayed and can be used.

Part 7: Displaying Text Area/Text Field

There is another code that you can use to displaying a text area or a text field. With text area you can type any HTML on it, a text field only can be used to type a text. To create it, you can use this code:

$options[] = array( "name" => __("Feedburner URL", "colabsthemes" ),
					"desc" => __("Feedburner URL. This will replace RSS feed link. Start with http://.", "colabsthemes" ),
					"id" => $shortname."_feedlinkurl",
					"std" => "",
					"type" => "text");

If you notify, there is a type named text. This type can be used to displaying a text field. To create a text area, you can type textarea.

Part 8: Displaying The Code

If you check all codes i type on this post, you may find a code like this one:

"id" => $shortname."_feedlinkurl",

This code is the ID of option which you can use to displaying your code. Here is some example about how to use the code:

		$test =get_option('colabs_video_cat');
		$featuredPosts = new WP_Query();

This is an example of query posts which is combined with the ColorLabs code. If you check the code, you can find out a code like this one: colabs_video_cat. This code is the result of this code: $shortname. “_video_cat”.

You can also use this id to create a conditional code like this one:

if( $colabs_options[‘colabs_business_disable_footer_widgets’] != ‘false’ ){
colabs_footer_top(); }

This code, $colabs_options means get option, colabs_business_disable_footer_widgets means the id of an option available on the theme panel. != ‘false’ means the option is a checkbox and also if the checkbox is ticked (not false = true). colabs_footer_top means a functions which is called (usually this function is declared on functions.php or theme-functions.php).

Ok, that’s it how to modify the theme panel options of ColorLabs themes.


4 thoughts on “Playing With ColorLabs Theme Panel

  1. I simply want to say I am all new to weblog and really liked you’re web site. More than likely I’m planning to bookmark your blog . You actually have great well written articles. Regards for sharing your blog site.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s