Sites By Sean Logo

Creating A Custom WordPress Theme - Adding Main Page CSS

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.

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