VNwebtalk.com

DemoYou're viewing it! DownloadSource files

Use the power of word­press short­code and post thumb­nail, with some CSS3’s magic, today we will cre­ate an kick-ass demo/download box (As you can see at VNWebtalk)

Post thum­nail:

First you need to con­firm that your theme sup­port post thumb­nail. If it doesn’t. Fol­low these sim­ple steps:
Open functions.php in your themes folder (If it doesn’t have, cre­ate one).

PHP:

<?php
  add_theme_support( 'post-thumbnails' );
  //This is my size, you can set it to whatever you want.
  set_post_thumbnail_size( 580, 193, true );
?>

Now go to Admin -> Posts to con­firm that word­press added the post thumb­nail feature.

Demo/Download short­code:

If you don’t know what is Word­Press short­code and/or how to use it. You should check there awe­some article:

• Word­Press Short­code API
• How to use, style and imple­ment Word­Press short­codes — TutToaster
• Mas­ter­ing Word­Press Short­codes — Smash­ing Magazine

Now, we want to cre­ate a short­code like this

[demodownload demo="demo-link" download="download-link"]content[/demodownload]

Copy/paste in to your functions.php file:

PHP:

<?php
  //Demo/Download Shortcode

  function demodownload($atts, $content = '') {
    global $post;
    $id = $post->ID;
    //Get our variable
  	extract(shortcode_atts(array(
  		"demo" => '',
  		"download" => ''
  	), $atts));
  	//If we have content, show it, otherwise display default text
  	if ($content != '') {
  	  $content = $content;
  	}
  	else{
  	  $content = "View it online";
  	}
  	?>
  	  <div class="postthumbholder">
        <div class="postthumb">
          <?php echo get_the_post_thumbnail($id); ?>
          <div class="downloadholder">
            <a href="<?php echo $demo; ?>" class="demo">Demo<span><?php echo $content; ?></span></a>
            <a href="<?php echo $download; ?>" class="download">Download<span>Source files</span></a>
          </div>
        </div>
    </div>
  	<?php
  }
  add_shortcode('demodownload', 'demodownload');
?>

Some CSS’s magic

.postthumbholder {
  border-top:1px solid #FFFFFF;
  display:block;
  margin-bottom:15px;
  padding-top:15px;
  position:relative;
  width: 600px;
}
.downloadholder  {
  -moz-border-radius:5px 5px 5px 5px;
  -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.5);
  background-color:rgba(0, 72, 110, 0.7);
  bottom:20px;
  left:20px;
  padding:10px 0;
  position:absolute;
  width:560px;
}

.downloadholder a:link, .downloadholder a:visited {
  color:#FFFFFF;
  display:inline;
  float:left;
  font-size:20px;
  margin-left:70px;
  padding:10px 0;
  text-decoration:none;
  text-shadow:0 1px 2px #0F2F3F;
  text-transform:uppercase;
  width:208px;
}
.downloadholder a:hover, .downloadholder a:active {
  text-shadow:0 -1px 1px #447eb1;
}

Done! Hope you like this.