In the last 2 posts, we went through the start of creating your own WordPress theme. We talked about the basics, what files you need to have and the simple structure of the HTML and PHP.

We then went through starting to add code that will pull out the posts and images we've created in the WordPress backend and display them.

Part 3 - Styling

In this post, I wanted to take it to the next level. I wanted to start stying the theme to make it more presentable, to make it look more like a theme.

Now, this CSS just starts to style some basics but really what you need to do is just copy and paste the CSS to your styles.css sheet.

First, want this quick video on the changes. This just shows you the CSS and what changes it makes to this basic WordPress theme.

One thing to remember, this series is to give you a basic knowledge of what goes into a theme. What it doesn't show you is all the complex work to make a theme beautiful to view.

 

The theme is starting to come together

As you can see from the video, making these changes starts to bring the theme together. We start with styling the body and links. We style the article, making the image fit to 100%, styling the meta so it looks nice.

You can achieve this look by copying and pasting the below CSS into your styles.css file. Remember, check out the previous post on creating a custom WordPress theme to get the HTML code for the past. Without this posted in index.php - this CSS will not match (unless you've created your own code with the same class names).

Here is the CSS:

/*
Theme Name : Sandbox Theme;
Author : Sean McCammon;
Author URI : https://sitesbysean.co.uk;
Description : Advanced WordPress Theme;
Version : 1.0;
*/
body {
font-family: Arial;
color: #333;
margin: 0;
padding: 0;
}

ul {
margin: 0;
padding: 0;
}

a {
color: #009acd;
text-decoration: none;
}

a:hover {
color: #333;
}

.container {
width: 960px;
margin: auto;
overflow: auto;
}

header {
background: #f4f4f4;
padding: 10px;
border-bottom: 3px solid #009acd;
}

header h1 {
margin: 0px;
padding: 0px;
color: #009acd;
float: left;
}

header h1 a{
color: #009acd;
text-decoration: none;
}

header small {
color: #666;
margin-left: 1px;
font-size: 13px;
}

header .h_right {
float: right;
}

header .h_right input[type="text"]{
width: 250px;
padding: 5px;
margin-top: 5px;
}

.content {
margin-top: 30px;
line-height: 1.5em;
}

.main {
float: left;
width: 65%;
}

article.post {
border-bottom: #ccc solid 1px;
margin-bottom: 10px;
padding-bottom: 20px;
}

article.post .meta {
background: #009acd;
color: #fff;
padding: 7px;
}

article.post .meta a {
color: #fff;
}

article .post-thumbnail img {
width: 100%;
height: auto;
}

article.post-aside small {
font-weight: bold;
}

article.post-aside .well {
background: #e0eefc;
padding: 10px;
}

article.post-link .well {
background: #f4f4f4;
padding: 10px;
}

article.post-gallery {
background: #333;
colour:#fff;
padding: 5px 10px;
margin-top: 5px;
}

Stay tuned for the next post

We will be continuing this series of posts, giving you the basics so that you can understand how a theme is put together. So, keep popping back and if you have any questions, why not pop a comment below.

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.

Why would you want a standard, potentially boring, default WordPress theme? Don't get me wrong, many of the themes, probably thousands, offer some great visual aspects for anyone's website. The ease at which you can swap them out, change the look and feel. However, it's still someone else's design. The theme was most likely created for a website they wanted, shared to the world where many other website owners have used that same theme.

What you really want is your own theme, your own custom WordPress theme.

Create A WordPress Theme - The Basics

Why not check out this first video, in a coming series of videos, where I go through the basics of creating a Custom WordPress Theme.

After Watching The WordPress Video

So, hopefully, you’ve watched the video now have the info you need on the basic setup for your own WordPress Theme. Now, this video doesn’t show you how to create a fully featured theme, however, I am starting on a video series on doing just that thing.

I'm going to take you from the bare bone basics, shown in this video, to a point where you have a simple custom WordPress theme that displays your posts.

I will also show you how to create a custom page for displaying your posts, so you can customize all parts of your own page.

So, if you want to get to know the basics then keep popping back. Alternatively, if you would like a custom page but don't want to do the work yourself, then why not check out my services page for an idea on how much I can create one for you.

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