Default Image For Directory Theme

Today, i got an e-mail from my friend, Gerry from German. He said that he is using Directory theme by ColorLabs and have a problem with the ads.

Directory theme - classify WordPress theme

Directory theme – classify WordPress theme

This theme have a great feature that allow your site visitors to submit their own ads to your site, they can also upload an image(s) for their ads.

But, the problem is: if they forgot to insert a picture, your site will looked bad. For example, you can check out the image below:

directory latest

At the latest submit section, some of the ads doesn’t have an image. For Gerry, and maybe you also said if this is not good.

Gerry ask to me whether if Directory theme could have a default thumbnail feature, so any ads which doesn’t have any image yet, could displaying the default image.

To add this feature, you have to modify 2 files: index.php  and theme-options.php

Step#1

At this step we will create an option to upload the image. This option will be available on Directory theme options.

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

Open that file and find out this code:

// Ads Settings
$options[] = array( "name" => __("Ads Settings", "colabsthemes" ),
					"type" => "heading",
					"icon" => "home");

Put this code below, so the code will looked like this one:

// Ads Settings
$options[] = array( "name" => __("Ads Settings", "colabsthemes" ),
					"type" => "heading",
					"icon" => "home");

$options[] = array( "name" => __("Default Image","colabsthemes"),
					"desc" => __("Upload default image for your ads","colabsthemes"),
					"id" => $shortname."_def_image",
					"std" => trailingslashit( get_template_directory_uri() ) . "images/logo.png",
					"type" => "upload");

After you done with it, you can go to Directory theme dashboard and go to Ads Settings. You will have a new option to upload an image.

Step#2

At this step you have to create a conditional logic to check whether if your ads already have an image(s) or not. Also you will call your default image at this step.

What you have to do is modify a file named index.php. You can find out this code via FTP at directory: wp-content > themes > directory.

Open that file and find out this code:

<div class="feat-ad column col12"><!-- featured ad -->
         <h4><?php _e('Featured Ad','colabsthemes');?></h4>
        <ul id="first-carousel" class="first-and-second-carousel">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li>
				<?php colabs_image('width=81&height=81&play=true');?>
                <a href="<?php the_permalink();?>"><?php the_title();?></a>
            </li>
        <?php endwhile; ?>
        </ul>
    </div><!-- end featured ad -->

Modify that code, so it will looked like this one:

<div class="feat-ad latest-ad column col12"><!-- latest submit ad -->
        <h4><?php _e('Latest Submit','colabsthemes');?></h4>
        <ul id="second-carousel" class="first-and-second-carousel">
		<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li>

				<?php
				$sample = get_option('colabs_def_image');
				$attachments = get_children(
					array(
						'post_type' => 'attachment',
						'post_mime_type' => 'image',
						'post_parent' => $post->ID
					));
				if($attachments) {
						colabs_image('width=42&height=42');
				    } else { ?>
						<a href="<?php the_permalink();?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/functions/timthumb.php?src=<?php echo $sample; ?>&w=42&h=42" /></a>
				<?php } ?>

                <a class="latest-title" href="<?php the_permalink();?>"><?php the_title();?></a>
            </li>
        <?php endwhile; ?>
        </ul>
    </div><!-- end latest submit ad -->

And done! You will have a default image displayed only on latest submit section

Advertisements

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