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.

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