WordPress News Theme 5

Wordpress News Theme 5In this tutorial I finish creating the index.php and footer.php code for my WordPress News Theme.

In this tutorial, I mention that I created a Social Network Plugin. The code for that plugin is available here WordPress Plugin Howto.

Like always, all of the code follows the video. You can use it however you’d like. If you want to see the News Theme in the real world checkout My Investment Services. That site is using my News Theme and Featured Content Slider.

Here are links to the previous parts of this tutorial series if you missed them:

Code From the Video
INDEX.PHP

<?php get_header(); ?>

 

<?php

$ntt_plugin_folder = get_bloginfo(‘wpurl’);

$ntt_plugin_folder .= ‘/wp-content/plugins/NTTFeaturedContent2/’;

$ntt_plugin_page = $ntt_plugin_folder . ‘js/featured_data1.txt’;

$ntt_plugin_style = $ntt_plugin_folder . ‘ntt_fc_style2.css’;

?>

<LINK href=”<?php echo $ntt_plugin_style;?>” rel=”stylesheet” type=”text/css”>

 

<script type=”text/javascript” src=”<?php echo $ntt_plugin_folder; ?>js/featured_content.js”></script>

<div class=”ntt_featured_content”>

<?php

$ntt_stored_fc = file_get_contents($ntt_plugin_page);

echo $ntt_stored_fc;

?>

</div>

 

<?php get_sidebar(‘first’); ?>

 

<div id=”mainContent”>

 

<div class=”featuredPosts”>

<ul class=”featuredLists”>

 

 

<!– To issue queries I need to hijack $wp_query. So, I can use it later

on the page I’m saving it to a temporary variable –>

<?php

$tempWPQuery = $wp_query;

$wp_query = null;

 

// Create a new WP_Query Object

$wp_query = new WP_Query();

 

// Issue a query that returns 4 posts

$wp_query->query(‘posts_per_page=5&category_name=Featured’);

 

// Cycle through all of the posts

while ($wp_query->have_posts()):

$wp_query->the_post();

?>

 

<li>

<h3 class=”featuredTitle”><a href=”<?php the_permalink(); ?>”><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 28); ?></a></h3>

 

<p class=”featuredExcerpt”><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 50); ?>

<a href=”<?php the_permalink(); ?>” class=”clickForMore”>More</a></p>

 

<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” width=”60px” height=”60px” class=”featuredImage” />

 

</li>

<?php

endwhile;

 

// Reset wp_query to the default

$wp_query = null;

$wp_query = $temp;

 

?>

</ul>

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

 

<div class=”postLists”>

 

<!– To issue queries I need to hijack $wp_query. So, I can use it later

on the page I’m saving it to a temporary variable –>

<?php

$tempWPQuery = $wp_query;

$wp_query = null;

 

// Create a new WP_Query Object

$wp_query = new WP_Query();

 

// Issue a query that returns 4 posts

$wp_query->query(‘posts_per_page=4’);

 

// Cycle through all of the posts

while ($wp_query->have_posts()):

$wp_query->the_post();

?>

 

<li>

 

<h3 class=”postTitle”><a href=”<?php the_permalink(); ?>”><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 30); ?></a></h3>

 

<p class=”postExcerpt”><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 135); ?>

<a href=”<?php the_permalink(); ?>” class=”clickForMore”>More</a></p>

 

<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” width=”85px” height=”85px” class=”postImage” />

 

</li>

<?php

endwhile;

 

// Reset wp_query to the default

$wp_query = null;

$wp_query = $temp;

?>

 

</div>

<br /><br />

 

<div class=”morePosts”>

 

<!– To issue queries I need to hijack $wp_query. So, I can use it later

on the page I’m saving it to a temporary variable –>

<?php

$tempWPQuery = $wp_query;

$wp_query = null;

 

// Create a new WP_Query Object

$wp_query = new WP_Query();

 

// Issue a query that returns 4 posts

$wp_query->query(‘posts_per_page=8&offset=4’);

 

// Cycle through all of the posts

while ($wp_query->have_posts()):

$wp_query->the_post();

?>

 

<div class=”recentPosts”>

 

<h3 class=”recentTitle”><a href=”<?php the_permalink(); ?>”><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 20); ?></a></h3>

 

<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” width=”150px” height=”150px” class=”recentImage” />

 

<p class=”recentExcerpt”><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 82); ?>

<a href=”<?php the_permalink(); ?>” class=”clickForMore”>More</a></p>

 

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

 

<?php

endwhile;

 

// Reset wp_query to the default

$wp_query = null;

$wp_query = $temp;

?>

 

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

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

 

<?php get_footer(); ?>

FOOTER.PHP

<div id=”footer”>

 

<div class=”footerContent”>

<?php wp_list_pages(‘depth=1&number=10&title_li=<div class=”sidebarTitle”><h4>Pages</h4></div>’ ); ?>

</div>

 

<div class=”footerContent”>

<div class=”footerTitle”><h4>Categories</h4></div>

<p class=”sidebarExcerpt”>

<?php wp_list_categories(‘depth=1&orderby=name&number=10&title_li=’ ); ?>

</div>

 

<div class=”footerFollow”>

<div class=”footerTitle”><h4>Follow Us</h4></div>

<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/rss_logo.png” height=”50px” width=”50px”</a>

<a href=”http://www.twitter.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/twitter_logo.png” height=”50px” width=”50px”</a>

<a href=”http://www.facebook.com/newthinktank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/facebook_logo.png” height=”50px” width=”50px”</a>

<a href=”http://www.linkedin.com/in/derekbanas”><img src=”<?php bloginfo(‘template_directory’); ?>/images/linkedin_logo.png” height=”50px” width=”50px”</a></a>

</div>

<br /><br /><br />

<div class=”copyright”>

&copy;<?php echo date(“Y”); echo ” “; bloginfo(‘name’); ?>

<?php echo ‘ Designed by <a href=”http://newthinktank.com” alt=”New Think Tank”>New Think Tank</a>’; ?>

</div>

</div>

 

</div>

 

<?php wp_footer(); ?>

 

<!– Don’t forget analytics –>

 

</body>

 

</html>

18 Responses to “WordPress News Theme 5”

  1. mark funk says:

    how do i add logo support to my theme

  2. mark funk says:

    make e plugin that add a logo to any theme

  3. Stephanie says:

    HI Derek,
    You helped me before so I’m hoping you can help me again. I only have one query posts loop on my page, and it is pulling all of the information and the pictures from the posts just great. But when I try to format anything inside of a tag using CSS none of the formatting is showing up. When I switch the tag to anything else the formatting works! I checked both my home.css, my index.php and my style.css files and none of them attempt to format a tag which has been causing me to bang my head against the desk trying to figure this out for hours. Do you have any advice on where I can look or why this may be happening?

    Thanks!

    • admin says:

      Use the class names to target the paragraphs instead of the p tag. The class names for the paragraphs on the index page are : featuredExcerpt, postExcerpt, and recentExcerpt. That will make your life easier. I hope that helps

      • Stephanie says:

        Hi Derek,
        I am using the classnames to target the paragraphs and that works for all classes except for the classes that are inside of P tags. Basically if I change my tag to anything other than a P tag I am able to set the formatting however I want, but for some reason anything inside a P tag whether it has a classname or not does not take my formatting in my CSS sheet.

        Should I just get over it and use a different tag, or is there something I should look for that would be causing this to happen? It is really odd.

        Thanks,
        Stephanie

  4. Stephanie says:

    HI Derek, I forgot that your comment area accepts HTML code so all of the tags I listed did not show up lol. Anyway the particular tag that is giving me trouble is the P tag. All of the others seem to work.
    Thanks

  5. Rizwan Ahmad says:

    Hello sir, I am using this code but the content of the post not display. In this code the value of post_excerpt is empty. I Want to diplay the content of the psot with Read More. Pleas help me.

    query(‘posts_per_page=3’);

    // Cycle through all of the posts
    while ($wp_query->have_posts()):
    $wp_query->the_post();
    ?>

    <img src="” alt=”” alt=”” width=”100px;” height=”100px;”/>
    <a href="”>post_title; echo substr($ntt_the_title, 0, 30); ?>
    post_excerpt; echo substr($ntt_the_excerpt, 0, 60); ?>
    <a href="” class=”clickForMore”>More

  • admin says:

    I’ll email it to you.

  • Rizwan Ahmad says:

    Sir i am wating your mail. thanks

  • Rizwan Ahmad says:

    sir i am use this source alredy my iss is here only the values of this echo substr($ntt_the_excerpt, 0, 135); in a loop is empty.
    on the othere hand the title of the post diplay as me recovided.

    post_excerpt; echo substr($ntt_the_excerpt, 0, 135); ?>

    <a href=”” class=”clickForMore”>More

  • Leave a Reply

    Your email address will not be published.

    Google+