You want to start your own blog but you don't want to look tacky by using an existing design. Creating your own theme can be daunting, but with some assistance you can have a unique design for your blog in no time. This post will help you put it all together using WordPress, the most popular (and free) blogging software available.
Creating a WordPress theme can take quite a bit of work when you're starting from scratch because you have to put together quite a bit of PHP code (the programming language WordPress uses) before you can even get to creating the look and feel of your site. We're going to save you the trouble by providing those files pre-made for you, plus a skeletal structure of the CSS you're going to need to make your WordPress site look the way you want. The PHP code is based upon the work of Ian Stewart, but has been updated for WordPress 3.3.1. If you're ready to get started, here's what you'll need:
- WordPress, installed and ready to go. During theme development we highly recommend running a local web server with PHP and WordPress installed so you're not testing any changes you make live on your web server. This also makes development a lot faster. When you're done, you can simply install the finished theme on your web server and it will be ready to go. If you want to develop locally, the easiest way to get started is with the self-contained web servers WAMP (Windows) or MAMP (OS X). They contain the Apache web server with PHP and MySQL ready to go, so you'll be able to download and install WordPress quickly and easily. Once you've got your theme ready to go, installing WordPress on a proper server is generally quite easy. For example, our favorite beginner host, Dreamhost, features a one-click WordPress installation.
- Our blank theme files. Download and unzip.
- Basic knowledge of HTML and CSS (which you can obtain here).
- A design you've made for your WordPress site (which you can learn how to do in Photoshop here).
- Optional: If you don't want to use the theme editor built into WordPress, you should get a programming-friendly text editor. (Here are our picks for Windows and OS X.)
- Optional: Since you're WordPress site is likely empty, and it's hard to create a theme when there's no content, you can download sample content (and import) for development purposes. This can be a big help in a local development environment where you're not going to use the content. You probably don't want to add it to a live site because 1) it'll be visible, and 2) you'll want to remove it after you're done developing.
Once you've got everything, you're ready to start making your theme!
Get to Know and Install Your Theme Files
When you unzip the lh_wordpress_blank_theme.zip file your downloaded, you'll have a folder filled with a bunch of files and two folders. Here's a quick list of what they are and what they do:
- 404.php - The page responsible for displaying 404 not found errors, for when a user attempts to go to a page on your WordPress site that does not exist.
- archive.php - Displays the archived posts list, much like the main page but for posts in the archive.
- author.php - Displays all the posts for a particular author. It's basically the same as the archives page, but just for one author.
- category.php - Displays all the posts in a given category.
- comments.php - When on a single post page and comments are accepted, this file will be used to show the comment form.
- footer.php - The footer that will be inserted at the bottom of the page. You'll need to edit this file and add what you want to show up in the footer.
- functions.php - Custom functions for the theme. You should leave this alone unless you know PHP and know what you're doing.
- header.php - Displays the header at the top of every page on your WordPress site. This is the code that generates the menu.
- img - A folder for custom images you're using in your theme. You can leave this empty or delete it if you are not using custom images.
- index.php - Displays the primary blog roll page. Like many other pages (e.g. author.php, page.php, search.php, etc.) in incorporates the header.php, sidebar.php, and footer.php files to display the entire site.
- page.php - Displays any single page. This does not include posts, but rather individual static pages you've created in the WordPress Admin.
- search.php - Displays search results a user requested through the search widget on your WordPress site. If no results are found, it will inform the user that it failed to bring up any results.
- sidebar.php - This file contains the primary and secondary areas for sidebar widgets. You can add widgets to these areas via the WordPress Admin and shouldn't need to edit this file.
- single.php - Displays a single post with or without comments.
- styles.css - This is the file we will be editing in this guide, so it has been highlighted in red. This contains the skeletal structure of the CSS you'll need to make your WordPress site look the way you want it to look. The majority of your work will be in this file.
- styles - A folder to contain any additional CSS files you may use or import. If you don't use this, you can just delete it.
- tags.php - Displays posts for a given tag.
That list probably seems a little intimidating, but chances are you won't need to edit most of those files. We just wanted you to know what everything does. At the very least, you only need to edit styles.css, and maybe footer.php (if you want to add content to your footer). Now that you know what you're in for, let's install this blank theme in WordPress. To do so, just follow these steps:
- Log into your WordPress Admin section. You probably know where this is, but if not it is, by default, at http://yourdomain.com/wp-admin (or if you're running WAMP/MAMP it is, by default, at http://localhost:8888/wp-admin).
- Go to the appearance tab on the left-hand menu and choose Appearance -> Themes.
- From the menu up top (which only has two tabs), choose Install themes.
- Click the Upload link.
- Click the Choose file... button to select the lh_wordpress_blank_theme.zip file you downloaded and then click Install Now.
- When the theme has been installed, click back to Appearance -> Themes and find it. It should by called Blank and have no preview image. When you see it, click the Activate link to make it the active theme.
Alternatively, if you prefer installing via FTP or just moving the files to the correct directory on your local machine, unzip the lh_wordpress_blank_theme.zip and rename it "blank" (or whatever you want). Now find the wp-content folder in your WordPress installation directory and open it. You'll see a directory called "themes" inside. Copy blank into it, then follow the last step in the steps above to activate it on your WordPress site.
Style Your WordPress Theme
With the blank theme installed you're ready to start making your WordPress theme look great. Currently, however, it looks like an ugly mess of blue, green, and black. It may not even look that good if you haven't added a menu, widgets, or any content. If you still need to add content, either download sample content or create some of your own. Even if you install sample content, you'll still need to go into the WordPress Admin, click on the appearance section, and edit both the Menus and Widgets subsections. Just head into the Widgets subsection and (literally) drag some widgets into both the primary and secondary sidebar spaces, then create a menu in the Menus subsection. Once you have all your (possibly fake) content ready, you'll see it all on your WordPress site. It will probably look something like the image to the right.
Now that everything is in place, we need to start editing the styles.css file. You can either open it up in your favorite programming-friendly text editor, or you can go to the Appearance tab in the WordPress Admin section, choose Editor, and then choose styles.css from the right-hand menu (if it isn't already selected by default). Either way, you should now see the skeletal CSS structure you're going to use. It does not include every single style you may want to edit, but the main ones you'll need to get most of your style together. (Later on we'll discuss how you can discover other elements and how to style them as well, so if you want to take things further than the template we've provided you'll be able to do so easily.) Since everyone's design is going to vary a little bit, we're going to discuss what most of the styles do rather than offering up specific code you can use. You're going to need to bring your own design and CSS knowledge to the table, so if you're feeling a little shaky you can brush up your skills with our CSS night school lesson. So, without further ado, here's a rundown of the styles.css file. Each item we cover will demonstrate what it looks like now and what it could look like once you add some style.
Global: General Style Defaults
The General Style Defaults are pretty much laid out for you already and should be pretty familiar even if you don't know very much CSS. For the most part these styles are just setting the margins of the document (which are currently at 0 pixels), the default font to use on the page, what colors the background and text are, how links look in their various states, and more. You can leave this information as-is, or go in and make general changes as desired. For the most part, the look and feel of your WordPress site won't be too heavily influenced by these styles and, if anything, the changes you make will mostly relate to the fonts and colors.
Page Layout
The Page Layout section of the styles.css file contains only two code blocks: one for div#container and one for div#content. In both cases we're targeting DIV tags. The one called container is what contains pretty much everything on the page that is not the header or the footer. That means you've got the post, static page, or blog roll, the comments, and the sidebar widgets all wrapped into this one container. By default we've given it a 4px margin to inset all this content just a tiny bit from the header. You can adjust it however you like and add any new styles you wish here. The content DIV, on the other hand, only includes the post, static page, or blog roll (and comments, if they're visible). Any styles you add here will only effect that content. One of the first things you're going to want to do is position this DIV somewhere on the page. Traditionally it is aligned left by using this CSS code:
float: left;
Chances are you'll also want to define it's width, any margins or padding, and anything else you want to be different in that specific area of your site. Here's what my site's content DIV style looks like:
div#content { width: 640px; float: left; margin: 0 0 0 51px; padding: 0 18px 0 0px; } As you can see, it has a width of 640px. It also floats to the left, just like we talked about earlier. Additionally, I've added a 51px margin on the left side and 18px of padding on the right side. How do I know which numbers correspond to which sides? In CSS margins and padding code, it goes like this: top, right, bottom, left. This is easy to remember because, abbreviated, it looks like TRBL. That sounds like trouble or terrible when you sound it out. Either way, that's a quick and easy way to remember it.
Header
The header is a fun part of your page to style because you get to decide how the menus look. Although you might have additional elements in your header should you decide to add a few new things do the header.php file in your theme, menus are still the main draw. Menu items are given in a list style that, without styling, would look a lot like this:
- Page One
- Page Two
- Page Three
- Page Four
- Page Five
The dots wouldn't be green, but you'd basically end up with a list. You don't want that, and presumably you want the menu running along the top of the page. We handled that problem for you and styled the menu so it appears as one straight line of options rather than an unordered list. There are two pieces of CSS that make this happen. The first belongs to the .menu class' ul (unordered list) element:
.menu ul { list-style: none; margin: 0; } This code takes away the dots and any margin adjustments you'd get with an unordered list by default. The second relevant code block looks like this:
.menu li { display: inline; float: left; padding: 0 8px 0 4px; } This code tells the list to display inline, which means it'll display in a line rather than in a traditional list. Additionally, each list item (li) is told to float left (which will give us a little more freedom to move each item around) and have 8px of padding on the right and 4px of padding on the left (so the text isn't so scrunched together. All of that's enough to get you a basic menu, but we also want to style the a element (a as in a href, the link tag) to make all the links in the menu look the way we want. For that, we need this CSS:
.menu-item a { font-size: 30px; text-decoration: none; color: #3eaf00; } .menu-item a:hover { color: #5d8a05; } All this code does is set the font size (to 30px), the color of the font to green (specifically #3eaf00), and remove the underline that appears under links by default (text-decoration: none). The hover state just specifies a slightly darker green (#5d8a05) to display when the user rolls over any menu link. This is all pretty straightforward, basic CSS but it allows you to make your menu look different from the other text on your page without resorting to images. If you want to change the text even more, you can consider a different font or converting everything to upper or lowercase text. If you need some good web font options, you can find hundreds in the Google Web Font Directory.
Once you've made these style choices you're pretty much done styling the menu and your header. There are definitely other styles you can find and play around with, but we'll discuss how to locate those at the end of the post.
Content: Posts and Pages
Remember the div#content style we defined earlier? Pretty much everything in this and the following two content sections of this post relate to styles that exist just inside that DIV. Most of the
.entry-title
This is a style that relates to different page headers. In the styles.css file, you'll find it attached to h1s, h2s, and h3s most often. Post headers adopt the .entry-title style regardless of what h# tag they are, so you can define each individually by first specifying the h# tag and then adding .entry-title to it. You can see this in several pre-defined code blocks in your styles.css file, such as h1.entry-title and h2.entry-title. Static page titles work in the same way, but their style is .page-title and they generally only use the h1 tag along with that style. That means you shouldn't need to define any header styles for page titles beyond h1.page-title. Styling these titles are just like styling any other text, but you want them to be big. If they're as small as other text they won't stand out like they should.
.alignright and .alignleft
These two styles simply align images to the left and right of an entry (and you can probably guess which is which). You'll also notice that in your styles.css file, padding is applied to three sides of the image but not one. Why? The side with no padding is the side that won't be next to text. This is the right side of the image on right-aligned images and the left side on left-aligned images. This is done so the image doesn't look awkwardly indented in a block of text wrapping around it. When you're creating your WordPress posts and pages and adding images to them, you'll be able to choose the image's alignment within the editor. These styles will automatically be applied to any aligned image in your post. Unless you want to increase/decrease the padding, or add additional styles, you can leave these two classes alone.
.entry-content
The entry-content style is applied to the contents of blog posts and static pages you create in WordPress. This class pretty much applies its styles to any text, images, or whatever end up in the body of the content you create. For the most part, you don't have to do much here. You can set the text styles you want, decide what headers (h1, h2, h3, etc.) look like, style lists, and basically any other element you want to have a specific style in the content section.
.entry-utility
The entry utility is an class for a small section at the end of each post that provides context. It'll offer up information like the post's categories and tags, as well as an RSS feed. If you're not just a reader but rather a writer on your WordPress site, you will also see an "Edit" link in this section. Adding style to .entry-utility will determine how this section looks.
.entry-meta
It's easy to confuse entry-meta with entry-utility, but it's different. It contains the author name, date, and other metadata. If you want to change the way it looks, such as make the text smaller since it isn't vital information, you'll want to edit this class.
.navigation
Navigation is a class for styling the navigation links at the bottom of your theme. Navigation links are the links that point to older and newer posts.
Content: Comments
Although the comments section might seem like an easy styling task, it's actually one of the most complex sections of the blog. The comment form, itself, is pretty straightforward, but as people reply to comments and then reply to those replies, you end up with a lot of nested comments. There is also plenty of metadata, as well as an avatar, the shows up alongside a user's comment. This means you've got plenty of elements to style.
.comments
Primarily, there are three: h3, ol, li, and img. Of course, h3 refers to the comment header. Because comments are posted in an ordered list, the ol (ordered list) and li (list item) elements are necessary. In most cases you'll want to borrow a few styles from your header menu because you won't actually want numbers next to your comments. You may also want to change the background color of each comment in the list or add other styles as well. You can do that by styling the ol and li elements of the .comments class. Finally, styling the img element is important because comments will contain an avatar for the user. That avatar might be blank or generic, but it'll still show up for every commenter. Styling the img tag in the comments class (.comments img) will provide you control over how those avatars look and how they behave when paired with the comment text.
.comment
Very similarly named to the previous class, .comment is the style that applies to specific comments.
.children
Children is the class used to target replies to comments. These replies are considered children of the comment. Replies to the replies are also considered children.
div#respond
The respond DIV is the DIV holding the comment reply form. If someone wants to leave a comment, they'll need to use this form to do so. You'll want to style this DIV in order to make the form look the way you want. For the most part you'll just be changing text, but you can also style form elements and buttons for an especially unique look.
Content: Sidebar
Styling the sidebar is actually pretty easy, but it can get more complex if you want to get very specific. WordPress gives you two widget areas: div#primary and div#primary. You can target each of those DIVs individually, or you can add styles to both of them using the .widget-area class. Furthermore, each widget you add to a widget area is added as—surprise!—a list item. The .xoxo class is applied to this list and can be used to separate and style each widget the way you want. If you want to get really specific, however, you'll need to target each widget directly. We'll discuss how to do that in the next section.
Additional Styles
Now that we've talked about all the basic styles you'll need to target in order to turn this blank theme into your own, let's discuss how you can take it a bit further. WordPress themes contain tons of elements so there are undoubtedly more you'll want to style. In order to easily discover what they are as you're going through the development process, all you need is the right tool.
If you're using Chrome, that development tool is built right in. Just preview your theme as you're developing it and open up the Developer Tools. You can do that by going to the View menu and choosing Developer -> Developer Tools. In Firefox (and many other browsers), just download and install Firebug, then click on the Firebug extension to activate it. Whichever tool you use, it'll cause the screen to split into top and bottom halves. The top half will contain the page and the bottom half will contain the pages code. If you mouse over any element on the page you'll see it highlighted in the code so you can inspect further. This will quickly tell you what the element is called and show you any styles already applied to it. You can then use this knowledge to add a new style for that element (or the class applied to it). Just continue doing that until you've found all the styles you want to add to your styles.css file. When you're finished, you'll have a completed theme!
If you've made a WordPress theme before and have additional tips for making it easier, please share them in the comments. Additionally, if you use this process to make a WordPress theme yourself, be sure to post a screenshot in the comments as well. Happy theming!
No comments:
Post a Comment