WordPress Featured Content

Wordpress Featured ContentIn this video tutorial I’ll show you how to make a WordPress Featured Content Plugin. The design is based off of one Phil sent into me.

The featured content plugin will however be designed so simply that anyone should be able to easily style it however they like.

In this part of the tutorial I’ll specifically cover the html and cascading style sheet code that is required.

If you’ve missed them, it may be a good idea to check out two other tutorials first WordPress Theme Tutorial and WordPress Plugin Howto? If you have a grasp of html and css you probably won’t need them to follow along.

Like always the code follows the video, but it’s also available in a downloadable zip format.

Code from the Video

Featured_Content.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />

<title>Website Layout</title>

<link rel=”StyleSheet” href=”style.css” />

</head>

<body>

<div class=”ntt_featured_content”>

<div class=”ntt_text_div”>

<div class=”ntt_article_title”>

Sample Article

</div>

<div class=”ntt_horz_rule”>

</div>

<div class=”ntt_article_excerpt”>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<div class=”ntt_read_more”>

Read More

</div>

</div> <!– End of ntt_text_div div –>

<div class=”ntt_featured_pic”>

<img src=”./images/big_hands.jpg” alt=”HandShake” />

</div>

<div class=”ntt_thumb_box”>

<div class=”ntt_left_button”>

<img src=”./images/fc_left_arrow.png” alt=”Back” />

</div>

<div class=”ntt_thumbnail_frame”>

<img src=”./images/thumb_hands.jpg” class=”ntt_featured_thumb” alt=”Featured Page” />

</div>

<div class=”ntt_thumbnail_frame”>

</div>

<div class=”ntt_thumbnail_frame”>

</div>

<div class=”ntt_thumbnail_frame”>

</div>

<div class=”ntt_thumbnail_frame”>

</div>

<div class=”ntt_right_button”>

<img src=”./images/fc_right_arrow.png” alt=”Next” />

</div>

</div> <!– End of ntt_thumb_box –>

</div> <!– End of ntt_featured_content div –>

</body>

</html>

Style.css

.ntt_featured_content {

position: relative;

width: 954px;

height: 326px;

// border: 2px solid #000;

}

 

.ntt_text_div {

position: relative;

width: 377px;

height: 326px;

background-image:url(‘./images/fc_text_area.png’);

}

 

.ntt_article_title {

position: absolute;

top: 40px;

left: 20px;

font: bold 24px/30px Georgia, serif;

color: #6b6a6a;

width: 315px;

height: 25px;

text-align: center;

text-shadow: #FFF 1.5px 1.5px 1px;

}

 

.ntt_horz_rule {

position: absolute;

top: 87px;

left: 20px;

height: 2px;

width: 315px;

background-color: #bebfc1;

line-height: 1px;

font-size: 1px;

}

 

.ntt_article_excerpt {

position: absolute;

top: 105px;

left: 20px;

font: 12px/17px Georgia, serif;

color: #6b6a6a;

width: 315px;

height: 120px;

}

 

.ntt_read_more {

position: absolute;

top: 285px;

left: 265px;

font: bold 14px/17px Helvetica, sans-serif;

color: #FFF;

text-shadow: #6b6a6a 1px 1px 0px;

text-transform:uppercase;

}

 

.ntt_featured_pic {

position: absolute;

top:0px;

left: 378px;

width: 576px;

height: 240px;

}

 

.ntt_thumb_box {

position: absolute;

top: 240px;

left: 378px;

width: 576px;

height: 86px;

background-color: #f5f5f5;

}

 

.ntt_left_button {

position: relative;

top: 36px;

left: 8px;

}

 

.ntt_thumbnail_frame {

position: relative;

float: right;

height: 58px;

width: 58px;

margin: -12px 47px 0px 0px;

background-image:url(‘./images/fc_thumb_bg.png’);

}

 

.ntt_featured_thumb {

position: relative;

top: 4px;

left: 4px;

height: 48px;

width: 48px;

}

 

.ntt_right_button {

position: relative;

top: 6px;

left: 551px;

}

12 Responses to “WordPress Featured Content”

  1. Dan says:

    Great tuts!

    I’d love to see a Django series.

    • admin says:

      I plan on doing that. The only reason I didn’t was because so few hosting companies allow its use. Also I had a poll and nobody voted for it. I agree with you that it is something that should be done. Thanks

  2. Rizwan says:

    Hello Sir,
    i see your WordPress Newspaper Theme videos. it is very nice and i think that, i learn more and more with your videos. Sir can i Download the complete source of WordPress Newspaper Theme. i yes then give me the link for download.

  3. Rizwan says:

    Sir i want to learn buddypress. You have a videos of buddypress. please replay me at razi4you2@yahoo.com and i am waiting for your replay.

  4. Rizwan says:

    Thanks for Replay me.

  5. I was watching your video all the way and it is very very great! i like the way you discussed, it is very fast it is not boring every minutes count. I love what you discussing. 🙂 thank you!, by the way i tried looking if there are responsive tutorial for wordpress and unfortunately i didn’t saw it in your tutorial list. Is there any tutorial about responsive in wordpress?

  6. David says:

    These are possiblly the best video tutorials that I have ever viewed! Thank you for all of the effort you put into them! You have done an amazing job!

Leave a Reply

Your email address will not be published.

Google+