In 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:
- WordPress Theme Tutorial Pt 1 : I’ll walk you step by step through the html, css and PHP of a WordPress Theme
- WordPress Theme Tutorial Pt 2 : How to grab very specific information from your WordPress database
- WordPress Theme Tutorial Pt 3 : More ways to manipulate data in the WordPress database
- WordPress Theme Tutorial Pt 4 : I create all of the HTML in a WordPress Theme
- WordPress Theme Tutorial Pt 5 : I style the WordPress Theme with CSS
- WordPress Theme Tutorial Pt 6 : I show you how to turn a plain website into a WordPress Theme
- WordPress Theme Tutorial Pt 7 : I show you how to create a WordPress 3.0 menu system
- WordPress Theme Tutorial Pt 8 : I finish up the Theme tutorial and show a few last tricks
- WordPress Taxonomies : How to create custom WordPress Taxonomies
- WordPress Plugin Howto : I show you how to create a WordPress Widget
- WordPress Plugin Howto Pt 2: I show you how to print translatable text, use register_setting and create a plugin settings page
- WordPress Shortcodes : How to create a cool WordPress Shortcode
- WordPress Plugin Howto Pt 3 : I finish the WordPress Plugin Tutorial
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 "”); echo ‘" – ‘; }
elseif (is_archive()) {
wp_title(”); echo ‘ Archive – ‘; }
elseif (is_search()) {
echo ‘Search for "’.wp_specialchars($s).’" – ‘; }
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 –>
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++.
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