Create a WordPress Theme from scratch

There is a lot to WordPress. I would like to take a stab at showing people how to create a theme in WordPress. Rather than go the traditional route, I’d like to rip a line from Robert Frost’s poem and take “the one less traveled by”.

Rather than make a pretty WordPress theme, I’m going to create an ugly, boring theme. I’ll let the great designers out there create their beautiful themes. I’m just going to concentrate on the stuff you need to know to create a theme. I believe the more simple I keep it, the easier it will be to learn this stuff. A wise person once told me that before you break the rules you need to know the rules. This is purely an exercise in getting to know the rules.

I am primarily going to use the Sublime Text editor to build this simply because it is the best editor I have ever used. It makes coding fast and fun. My browser of choice is Chrome.

  1. Write the simple HTML for our custom WordPress theme
    • Here we start the whole process off by creating a simple project in the Sublime Text 2 editor (ST2). We create our site structure which includes a simple HTML5 coded with a cool ST2 plugin called Zen Coding. We conclude the short screencast by viewing our HTML page in the browser.
  2. Create a CSS page for our custom WordPress theme
    1. Create a quick styled horizontal navigation bar
    2. Connecting the CSS to our HTML
    3. Viewed our styled HTML page in the browser
    4. Adding closing comments using a ST2 snippet
  3. Download WordPress
    1. Using ST2 and the Fetch plugin (another worthwhile link about using Fetch)
    2. Installing WordPress the long way on a PC using XAMPP
    3. Path to our WordPress custom theme
      1. simple-wordpress > wp-content > themes > simple-wordpress
    4. Required core files for custom theme
      1. style.css (in root of theme)
      2. index.php
    5. Other optional but widely used custom theme files
      1. header.php
      2. footer.php
    6. Style transplant
      1. take CSS from static site and put into WordPress custom theme style.css file
    7. Breakup index.html static site file
      1. place head section inside header.php
      2. place footer section inside footer.php
    8. Pull the code back together within index.phpinside WordPress custom theme
      1. get_header();
      2. get_footer();
  4. Install WordPress Locally
    1. local URL for install (the following our just sample links showing you what the URL will look like depending on whether you are using XAMPP’s or MAMP’s default install.
      1. http://localhost/simple-wordpress (pc)
      2. http://localhost:8888/simple-wordpress (mac)
    2. Create a Configuration File
    3. Create simple-wordpress database inside phpMyAdmin
    4. Fill out database connection details
    5. Dealing with database connection errors
    6. Run the Install
    7. Information Needed (Basic Info entered about your site)
    8. Install WordPress
    9. Success
    10. Log In with info you inputted in the Information Needed section
    11. Logged into the WordPress Dashboard
    12. Appearance > Themes
      1. Activating Our simple-wordpress theme
    13. Viewing our ‘live‘ site locally
      1. Site is blank
  5. WordPress Functions Find Our CSS
    1. Troubleshooting our blank theme
      1. Remember to save your files
      2. Remember to check your changes
    2. Site works!
    3. Viewing Site Source via the Browser
    4. Adding Static Content to Custom Theme
    5. Change CSS location
      1. assets > css > style.css
      2. using blog_info() WordPress PHP function to locate our style.css file
  6. Theme Info and Theme thumbnail
    • If you ever wondered how the thumbnail gets generated for a theme or the theme info on the wordpress admin page, this screencast explains how simple both procesess are.
  7. Screencast: Part 7: Turning our WordPress into a Blog
    • Blog? WordPress was build originally for blogs and here is where we learn all about how it is built. We talk about the WordPress ‘Loop’ which is a super important and powerful part of WordPress. We explain what a post is and start to explain the difference between a post and page inside the WordPress world.
  8. Linking Pages Together and Using Permalinks
    1. Creating About and Contact pages
    2. Save index.php as page.php
      • Now all pages will follow the page.php template
    3. Changing ugly query strings to pretty strings (Permalinks)
      • Dashboard > Settings > Permalinks > Choose Post name radio button > Save Changes
    4. Manually typing URLs to see new pages
    5. Manually adding links to navigation inside header.php
  9. Adding a Contact Page
    1. HTML mode is useful in the Dashboard
    2. Rich text editing is client friendly
    3. Remember to Publish
    4. Add link inside header.php navigation
    5. Add Plugin
      1. Plugin > Add New > Search for ‘Contact Form 7’ > Install > Activate
      2. You can delete a plugin
      3. Visit the plugin site for documentation
      4. Click new Contact Form in Dashboard
      5. Add Short code to Contact Page through the Dashboard
      6. Test Form
      7. Edit Contact Form 7
  10. Adding Images
    • I remember when I was first learning about WP I just wanted to get an image on my page. It seemed so simple but I couldn’t, for the life of me, figure it out. I explain how to do it in this screencast.
  11. Editing our Edit Link with CSS
    • This is a short screencast showing you a cool tip on styling your edit button your clients will use to alter their site content. It also gives you a peek inside the Chrome Developer tool which is native to the Chrome browser. I used to use Firefox and the Firefly plugin, but now I exclusively use Chrome and it’s toolbar.
  12. Adding Menus
    1. Create functions.php in theme root
    2. Delete static nav in header.php
    3. Add special code inside functions.php
    4. register_my_menus()
    5. once added we see menus in Dashboard
    6. Add special code inside header.php
    7. wp_nav_menu()
    8. Appearance > Menus
    9. Add Menu Name > Press ‘Create Menu‘ Button
    10. Under ‘Theme Locations‘, choose Main Menu
    11. Click ‘Save
    12. Check the checkbox for all the Pages and click ‘Add to Menu
    13. Remember to hit ‘Save Menu
    14. View new dynamic Nav in browser
    15. Rearrange Nav by dragging and dropping
    16. Rename Nav
    17. Save and view Nav in browser
    18. Adding a Login to Nav
    19. Adding Custom Link to Login Nav
    20. Remember to hit Save
    21. Test in browser
    22. Logout and view site
    23. Log back into site
  13. Backing Up Your WordPress site (2 Parts)
    • This is something that many people have a hard time with. Backing up your WordPress site is super important. If you screw it up, you’ll lose your site and all your hard work will be flushed down the toilet. Most of the core files and folders you won’t need to worry about. The important folder in the wp-content directory. This has your theme, plugin and uploaded images inside it. You also need to regularly export your database from phpMyAdmin (or MySQL directly). The .htaccess file will be recreated when you create or update your permalinks. The wp-config.php file is your connection info to your database. These are the important things you need to keep safe if you WP site is to be safe. I walk you through this information in this 2 part screencast.
  14. Transferring WordPress to a live server (2 parts)
  15. Creating a simple 404 error page for WordPress
  16. Adding a sidebar (2 parts)
  17. Validating HTML5 and CSS
  18. Create a new page that uses a different sidebar
  19. Create a WP search form
  20. Adding YouTube videos to WordPress
  21. Adding HTML5 video and Flash fallback video to WordPress
  22. Widgitizing your sidebar by adding a calendar plugin
  23. Practical Example Of Using WordPress conditionals
  24. Making your page title SEO friendly and using the body_class() function
  25. Highlighting the current page inside the MAIN navigation for your WordPress Site.
  26. Highlighting the current page inside the SUB navigation for your WordPress Site.
  27. Working with JavaScript (and jQuery) inside WordPress
  28. Creating a Blog Page not on the home page
  29. Creating a single post page showing the blog posts full content
  30. How do I use different headers for different pages in WordPress?

6 Replies to “Create a WordPress Theme from scratch”

  1. This link is not working “http://localhost/simple-wordpress”
    It’s located on “4. Install Word­Press Locally”

  2. You talked me into it… I’m going to build the film site from scratch instead of using roots. Thank you for the killer tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *