Sites By Sean Logo

Creating A Custom WordPress Theme - Adding Page Title and Posts

Following on from my first post on Creating A Custom WordPress Theme, I wanted to go to talk about the next stage.

Adding the WordPress page title and posts

In the first post we talked about the basics you need to add your own theme to WordPress. This talked about the 2 essential files but when added they didn't do much.

There are certain code elements you need to add to start pulling things such as posts from WordPress. In this post we talk about how you can add the webpage title and your WordPress posts to your Custom WordPress Theme - making it more of a useful theme. Please check out the video below first, then I will expand a little below.

The code

Adding the site title

So, having seen the video now, you know that we add some php code to our theme. The first bit of code pulls the website name from our WordPress database and add this in the HTML <title> tags. So that you can copy and paste that code into your own theme, here it is below:

<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

What this code does is, firstly it pulls the charset from the WordPress install and assigns this to the meta value charset. Next, is the important part; it pulls the name of the website from the WordPress database (which is where all the data for our site is stored) and put this in the HTML title tag. Finally, we setup the CSS Stylesheet so that we can use this in later tutorials.

Adding the blog posts

Once we have the site title setup, the next thing we want to do is make this theme useful. We want to pull out our post data from the WordPress database and display it in our theme. It would not be much of a WordPress Theme without that. Again, first here is the code for you to copy and paste:

<div class="container">
<div class ="main">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<article class="post">
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="meta">
Created By
<a href="<?php get_author_posts_url(get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>
on <?php the_time('F j, Y g:i a'); ?>
</div>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>

<?php the_excerpt(); ?>
<br>
<a class="button" href="<?php the_permalink(); ?>">
Read More
</a>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
</div>

Here we are doing a little more. To try and briefly explain. The first thing you will notice is a few DIV containers. I've added these because, again, at a later stage we will be styling all this. So, adding there containers now will save time later.

Starting at the php if statement, have_posts(). Before we want to display any posts, we need to check we have any. So this command allows us to call into WordPress and check if any posts exist. If not, then we display a message saying No posts where found.

If posts exist then using php, we setup the title of the post as a link using the permalink followed by the title.

Following that, we setup some meta data to display the author and posting date.

Next we check if the post has a thumbnail, and if so we display that on the screen.

Finally we grab the excerpt of the post to display it. If you copy and paste this code to your Custom WordPress Theme you will have the posts displayed on your screen and you will be able to click on them.

If you would like more detail on each of these command then please check out the WordPress Codex pages where you will find descriptions on all the php functions available to call in WordPress.

RSS
Facebook
Google+
Twitter
Pinterest
Pinterest
LinkedIn
Instagram
TUMBLR

Leave a Reply

Your email address will not be published. Required fields are marked *

Sites By Sean Logo
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram