Arthemia Custom Style

Hello again!

This time, it wasn’t a request or question from anyone, just me who have a problem with Arthemia theme. Several hours ago, i visit ColorLabs’s UserVoice to see what they have there.

I’m pretty shocked that they are not giving any answer or response since 2012. Beyond of that, i get a unique idea from someone at the UserVoice.

It is boring if everyone have the same layout except the logo

That is the reason why this post is created. It is true when you choose to make a website using a theme, you and another person in another side of the world may have the same layout and the main and only difference is the logo and maybe the favicon.

At this post, i’m gonna make a modification that will allow you to modify your theme just from your dashboard. This modification will allow you to change the font face, font color, font size, and font style just from your dashboard.

With this, the layout maybe the same, but the color, the font and the size will be unique for each person.

The unique facts about this modification is: ColorLabs already have this feature but none of this feature called on their themes. Don’t know why, but this is great!

Step#1

At this step you have to modify a file named theme-options.php. You can find out this file via FTP at directory: wp-content > themes > arthemia > includes.

Find out this code:

// Thumbnail Options

$options[] = array( "name" => "Thumbnail Settings",
					"type" => "heading",
					"icon" => "general");   

What you have to do is, put the code below before you see the code above:

$options[] = array( "name" => "Custom Font Settings",
					"type" => "heading",
					"icon" => "general");  
					
$options[] = array( "name" => __( 'General Text Font Style', 'colabsthemes' ),
                        "desc" => __( 'Select the typography you want for your general text. <br />* non web-safe font.', 'colabsthemes' ),
                        "id" => $shortname."_font_text",
                        "std" => array('size' => '13','unit' => 'px', 'face' => 'Arial','style' => 'normal','color' => '#666'),
                        "type" => "typography");  				

Capture1

After you save the file, you can start your theme dashboard and a new option will be displayed (custom font settings). The font listed there is Google Fonts, so you don’t have to be worried about the license, etc.

Step#2

At this second step, we are going to call out what we have made at step #1. At this step, i will only set a modification only for paragraph (p).

Open your header.php file and put this code after you found the body tag.

<?php
$myOptions = get_option('colabs_font_text');
echo $myOptions['face'];
?>

<style type="text/css">
	p {
	font-size: <?php	echo $myOptions['size'] . $myOptions['unit'] ;	?> !important;
	font-family: <?php	echo $myOptions['face']; ?> !important;
	font-style: <?php	echo $myOptions['style']; ?> !important;
	color: <?php	echo $myOptions['color']; ?> !important;
	}
</style>

Since at the step #1 the output is in an array, so we have to call out each option inside the array. We can’t use the get_option to call the array value.

There are 5 value you can modify using this modification: font size, size unit, font family, font style and font color.

And i call all of those value inside the style embedded inside the header.php.

And done!

Advertisements

2 thoughts on “Arthemia Custom Style

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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