WordPress News Theme 5
In 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:
- WordPress News Theme : I create all of the HTML for my News Theme
- WordPress News Theme Pt 2 : I introduce cool CSS styling tricks to the theme
- WordPress News Theme Pt 3 : I finish editing all of the HTML and CSS for the theme
- WordPress Featured Content : I create a featured content slider plugin for the theme
- WordPress News Theme Pt 4 : I start converting HTML code into the WordPress Theme
<?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”>
©<?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>
how do i add logo support to my theme
Stick your logo in a div and then position it just like I showed how to position the site name and slogan.
In the tutorial called WordPress Theme Tutorial Pt 4 I show you the HTML needed to create the logo. And, in WordPress Theme Tutorial Pt 5 I show you how to position the logo
Thank but i do i make an options panel that dose for me
I’m sorry, but I’m not sure what you’re looking for?
How do i make a plugin that allows the user to add a logo to any theme the want
make e plugin that add a logo to any theme
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!
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
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
Send me an example of the CSS code your having trouble with. I’ll see if I can figure out what the problem is
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
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
Hi,
You have a couple of bugs here and there. Use this as a guide
// 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();
?>
”>< ?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 30); ?>
< ?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 135); ?>
” class=”clickForMore”>More
Sir i am here. diplay 3 post its title diplay alredy 3 and i want to do post content echo but the post_content is empty
I’m not sure if you got my email, but do you have text in the excerpt areas for all of your posts?
I’ll email it to you.
Sir i am wating your mail. thanks
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