WordPress News Theme 4

Wordpress News ThemeIn this tutorial I continue building the WordPress News Theme. If you missed the first part of this tutorial click that link.

I paused this tutorial so that I could make my WordPress Featured Content Slider. So, now that that is out of the way I’ll turn the HTML and CSS, I made previously, into a WordPress Theme.

I’ll start out by making header.php. Then I’ll show you how to grab the first image from a WordPress post and much more.

If you somehow found yourself here and you’d prefer an easier to understand tutorial on making WordPress Themes and Plugins check out:

All of the Code from the Tutorial


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



<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>


<head profile=”http://gmpg.org/xfn/11″>


<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />


<?php if (is_search()) { ?>

<meta name=”robots” content=”noindex, nofollow” />

<?php } ?>




if (function_exists(‘is_tag’) && is_tag()) {

single_tag_title(“Tag Archive for &quot;”); echo ‘&quot; – ‘; }

elseif (is_archive()) {

wp_title(”); echo ‘ Archive – ‘; }

elseif (is_search()) {

echo ‘Search for &quot;’.wp_specialchars($s).’&quot; – ‘; }

elseif (!(is_404()) && (is_single()) || (is_page())) {

wp_title(”); echo ‘ – ‘; }

elseif (is_404()) {

echo ‘Not Found – ‘; }

if (is_home()) {

bloginfo(‘name’); echo ‘ – ‘; bloginfo(‘description’); }

else {

bloginfo(‘name’); }

if ($paged>1) {

echo ‘ – page ‘. $paged; }




<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />


<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />


<link rel=”StyleSheet” href=”<?php bloginfo(‘template_directory’); ?>/css/home.css” />


<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />


<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>


<?php wp_head(); ?>




<body <?php body_class(); ?>>


<div id=”pageWrapper”>


<div id=”header”>

<h1 id=”blogTitle”><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>


<p id=”blogSlogan”><?php bloginfo(‘description’); ?></p>


<span id=”searchBox”><?php get_search_form(); ?></span>



<?php wp_nav_menu(array(

‘theme_location’ => ‘main-menu’,

‘menu_class’ => ‘dropdown’,

‘container_id’ => ‘navigation’,

‘fallback_cb’ => ‘wp_page_menu’

)); ?>

Code That Grabs the First Image in a WordPress Post


// Function that grabs first image in a post

function catch_that_image() {

global $post, $posts;

$first_img = ”;

$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);

$first_img = $matches [1] [0];


if(empty($first_img)){ //Defines a default image

$first_img = bloginfo(‘template_directory’);

$first_img .= “/images/default.png”;


return $first_img;



<?php get_header(); ?>



$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”>


$ntt_stored_fc = file_get_contents($ntt_plugin_page);

echo $ntt_stored_fc;




<?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 –>


$tempWPQuery = $wp_query;

$wp_query = null;


// Create a new WP_Query Object

$wp_query = new WP_Query();


// Issue a query that returns 4 posts



// Cycle through all of the posts

while ($wp_query->have_posts()):





<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” />






// Reset wp_query to the default

$wp_query = null;

$wp_query = $temp;




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


2 Responses to “WordPress News Theme 4”

  1. When I copy the code you give for the first image thumbnail in functions it causes a php error at line 21: $output = preg_match_all(‘//i’

    Why would this be?

    I notice in notepad+ that everything is grey after that line . . . not a good sign. I did copy it to notepad then to notepad++.

    • admin says:

      Replace all backquotes with regular quotes using a find and replace. Sorry that is a security feature in my website. I have eliminated that problem in my new code on my site. I’ll eventually go back and fix all of the other code.

      Sorry about that

Leave a Reply

Your email address will not be published.