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

HEADER.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” <?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 } ?>

 

<title>

<?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; }

?>

</title>

 

<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(); ?>

 

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

</div>

 

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

Found in FUNCTIONS.PHP

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

}

INDEX.PHP So Far

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

 

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
      Derek

Leave a Reply

Your email address will not be published.

Google+