Modifying Indulgence Theme

Yesterday, i got several emails asking about how to modify a theme made by ColorLabs & Company, the theme is Indulgence, for me this theme is attractive and have a nice design.
Indulgence   Premium Business WordPress Theme

All of those e-mails asking about how to remove a thing from this theme front page, as you can see on this picture there are a FourSquare Tips, Location, Open Hours, and Latest Tweet on the front page, but what a shame all of them is a static. At the first time i saw this theme i think if those items is a widget or something that i can change easily, but its not.

Ok, this tutorial will help you to made the sections below the slider becoming a widget section, then you can add or remove items displayed on this section.

What you have to prepare to do this modification:

  • index.php
  • theme-sidebar-init.php

Yes, just 2 files that you have to modify. Also since the design already nice then i will not touch the styling but re-use the default styling.

Part 1

Since i made the last post several days ago, also the same with this parts concept, the response from my readers is good, then i decide to make it again at this post (you can also improve your blog with this technique 🙂 ).

Ok, this part will talk about how to modifying the simplest part, a file named theme-sidebar-init.php. Once you open that file, you will found this code (You can locate this file via FTP at  directory: Root → wp-content → themes → indulgence → includes):

<?php
// Register widgetized areas
if (!function_exists('the_widgets_init')) {
	function the_widgets_init() {
    if ( !function_exists('register_sidebars') )
        return;
  //Sidebar
  register_sidebar(array(
    'id' => 'sidebar',
    'name' => 'Footer Sidebar',
	'description'		=> 'This widget will appear in post footer sidebar area',
    'before_widget' => '<div id="%1$s" class="widget %2$s column col3">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="widget-title">',
    'after_title' => '</h4> ',
  ));
    }
}
add_action( 'init', 'the_widgets_init' );
?>

What we will do with this file is adding 2 new sidebar, left and right. Edit that code become:

<?php
// Register widgetized areas
if (!function_exists('the_widgets_init')) {
	function the_widgets_init() {
    if ( !function_exists('register_sidebars') )
        return;
  //Sidebar
  register_sidebar(array(
    'id' => 'sidebar',
    'name' => 'Footer Sidebar',
	'description'		=> 'This widget will appear in post footer sidebar area',
    'before_widget' => '<div id="%1$s" class="widget %2$s column col3">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="widget-title">',
    'after_title' => '</h4> ',
  ));

   register_sidebar(array(
    'id' => 'left-sidebar',
    'name' => 'Left Sidebar',
	'description'		=> 'This widget will appear in front page below slider',
    'before_widget' => '<div class="homebox columns col3 fl"><div id="%1$s" class="widget %2$s column col3">',
    'after_widget' => '</div></div>',
    'before_title' => '<h2>',
    'after_title' => '</h2> ',
  ));

	 register_sidebar(array(
    'id' => 'right-sidebar',
    'name' => 'Right Sidebar',
	'description'		=> 'This widget will appear in front page below slider',
    'before_widget' => '<div class="homebox columns col3 fl"><div id="%1$s" class="widget %2$s column col3">',
    'after_widget' => '</div></div>',
    'before_title' => '<h2>',
    'after_title' => '</h2> ',
  ));
    }
}
add_action( 'init', 'the_widgets_init' );
?>

Done, we just add 2 new sidebar, left and right. At the next part, we will discuss about how to displaying those sidebars at front page.

Part 2

At this part, we will discuss about how to editing a file named index.php. First find out this code:

<div class="homebox columns col3 fl">
                <h2><?php _e('Opening Hours','colabsthemes');?></h2>
                <?php echo get_option('colabs_hours');?>
            </div>

            <div class="homebox columns last col3 fl">
                <h2><?php _e('Latest Tweets','colabsthemes');?></h2>
				<?php
				$username=get_option('colabs_social_twitter');;
				$limit=1;
				$unique_id=19;
				?>
				<div class="tweet"><ul id="twitter_update_list_<?php echo $unique_id; ?>"><li></li></ul>
					<div class="author"><a href="http://twitter.com/<?php echo $username; ?>"> @<?php echo $username; ?></a></div>
				</div>
				<?php echo colabs_twitter_script($unique_id,$username,$limit); //Javascript output function ?>

            </div>

            <div class="homebox columns col3 fl">
                <h2><?php _e('Our Location','colabsthemes');?></h2>
                <div class="map">

                <?php
				$width=240;
				$height=150;
				$lat=get_option('colabs_latitude');
				$long=get_option('colabs_longitude');
				$zoom=12;
				$mapcss = "<style type='text/css'>\n
				#colabsmap {
				width:".$width."px; height:".$height."px;}
				#sidebar #colabsmap div {margin:0px;}
				#colabsmap .infoWindow {line-height:13px; font-size:10px;}
				#colabsmap input {margin:4px 4px 0 0; font-size:10px;}
				#colabsmap input.text {border:solid 1px #ccc; background-color:#fff; padding:2px;}
				\n</style>\n
				";
				echo $mapcss;
				echo colabs_printmap($lat, $long, $zoom, $type, $content, $directionsto);?>
				<br /><small><a href="http://maps.google.com/maps?ll=<?php echo $lat;?>,<?php echo $long;?>&amp;z=<?php echo $zoom;?>&amp;t=m" target="_blank"><?php _e('View large','colabsthemes');?></a></small>
				</div>
            </div>

            <div class="homebox columns last col3 fl">
                <h2><?php _e('Foursquare Tips','colabsthemes');?></h2>
                <?php
				$version       = date('Ymd');
				$client_id     = get_option('colabs_client_id');
				$client_secret = get_option('colabs_client_secret');
				$venue_id      = get_option('colabs_venue');
				$api_url       = 'https://api.foursquare.com/v2/';
				$api_venue     = "$api_url/venues/$venue_id?client_id=$client_id&client_secret=$client_secret&v=$version";
				$api_response  = json_decode(file_get_contents( $api_venue ));
				$tipsItems     = $api_response->response->venue->tips->groups[0]->items;
				$numTips       = $tipsItems ? min(2, count($tipsItems)) : 0;
				?>

				<ul class="square">
					<?php for($i=0; $i<$numTips; $i++) : ?>
						<?php $user = $tipsItems[$i]->user;?>
						<li>

								<img src="<?php echo $user->photo->prefix.'48x48'.$user->photo->suffix; ?>" width="48" height="48">

							<?php echo $tipsItems[$i]->text; ?>
							<div class="author">
								<?php echo $user->firstName.' '.$user->lastName; ?>
							</div>
						</li>
					<?php endfor; ?>
				</ul>

            </div>

The code above is to displaying the 4 sections at the front page (opening hours, location, twitter, foursquare). Delete those code and put this code below at its place:

<?php
			if ( colabs_active_sidebar( 'left-sidebar' ) ) : colabs_sidebar( 'left-sidebar' ); ?>
			<?php endif; ?>

			<?php
			if ( colabs_active_sidebar( 'right-sidebar' ) ) : colabs_sidebar( 'right-sidebar' ); ?>
			<?php endif; ?>

This code is to calling the sidebar you just made. Please note if this modification will displayed nicely if you add a title into your widget items, also you can add as many items as you need on each sidebar (left and right).

Ok, that’s it how to modify this theme. If you interested on this theme, you can check the details here

Advertisements

80 thoughts on “Modifying Indulgence Theme

  1. Great blog here! Additionally your web site so much up fast!
    What host are you the usage of? Can I get your associate
    hyperlink for your host? I desire my website loaded up as
    quickly as yours lol

  2. Pingback: Homepage

  3. I think this is one of the such a lot important info for me.
    And i am satisfied studying your article. However should statement on few general issues, The website taste is great, the articles
    is actually great : D. Excellent task, cheers

  4. I was wondering if you ever thought of modifying the design of your web site? It is well written; I love what you have got to say. But maybe you can include a little more in the way of content so people can connect with it better. Youve got an awful lot of wording for only having one or two photographs. Maybe you can space it out better?

  5. Do you mind if I quote a few of your posts as long as I
    provide credit and sources back to your weblog?
    My blog site is in the exact same niche as yours and
    my visitors would really benefit from a lot of the information you provide here.

    Please let me know if this ok with you. Regards!

  6. Wow that was odd. I just wrote an extremely lengthy comment but just after I clicked submit my comment didn’t seem. Grrrr… effectively I’m not writing all that over once again. Anyways, just wanted to say great weblog!

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