How to Create a Custom Theme for Your WordPress with Minimal Coding Required

How to Create a Custom Theme for Your WordPress with Minimal Coding Required

 

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 .
  • A design you’ve made for your WordPress site.
  • Optional: If you don’t want to use the theme editor built into WordPress, you should get a programming-friendly text editor.
  • 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.

sagar time

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:

  1. 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).
  2. Go to the appearance tab on the left-hand menu and choose Appearance -> Themes.
  3. From the menu up top (which only has two tabs), choose Install themes.
  4. Click the Upload link.
  5. Click the Choose file… button to select the lh_wordpress_blank_theme.zip file you downloaded and then click Install Now.
  6. 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.

sagar time

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.

 

Spread the love

Leave a Reply