WordPress Development for Noobs is a fun and exciting course that you can take online through these articles in order to learn how to build your own WordPress sites. I create value every day as a WordPress developer in Minneapolis, and I think WordPress is a perfect web design solution for small- to medium-sized clients who need a website, or larger clients whose websites are built around pushing out a lot of content or articles. (Every company should now be positioning themselves as a media company as Content Marketing has blown up, and most need some of it to thrive online.) This article will go over the first steps of creating your first WordPress theme from scratch.
What you will learn in this article:
- Can’t I just use a theme? What are the benefits of creating a WordPress site from scratch?Skip to It Daddy-O
- What are some basic “naked” theme frameworks I can use to start off right in WordPress Development?Get to It, Sugar
- Here’s how you get started writing your theme from scratch, and the main things you’ll need to have in place for it to workCome on and Give It to Me
Can’t I just use a theme? What are the benefits of creating a WordPress site from scratch?
One of the biggest problems with just using a theme is that you think of the problem in terms of what the theme lets you do instead of what’s best for the client or the website, or what’s best to help the visitors do what they want or you want them to do.
I started making websites for clients by modifying themes. I tried not to be hemmed in by the theme, but in the end, if there’s a theme option that’s 80% as good as what I had intended, I’d use it, because hey, who wouldn’t? The idea of creating a theme from scratch to match the visual design that you made where you didn’t even have a theme in mind means that you can design with the client and their customer in mind instead of designing from some one-size-fits-all template.
By creating a site from scratch around a visual design that’s intended to serve the client and their customer’s needs rather than fit a pre-built template, you’re setting your services up as a custom high-value solution rather than a run-of-the-mill commodity.
If all you do is implement content and a couple tweaks within something that already existed, you may not be able to share your hard work as the custom high-end solution that you are trying to sell your work as. I find developing from scratch (I usually use a responsive naked framework as a starting point) reminds me to relentlessly seek the best solution, not the easiest.
What are some basic “naked” theme frameworks I can use to start off right in WordPress Development?
_TK is a solid naked theme based on bootstrap (a CSS framework for responsive design structure) and Underscores (the maker’s of WordPress’ naked theme with the PHP loops set up) to get get started on.
With Bootstrap‘s out-of-the-gate responsive design features, mobile menu, and many bits and pieces of functionality like dropdowns, show/hides, and some basic styles built in, you have a tool that gets projects up off the ground quickly but doesn’t impose too intense of initial style on your project.
With _Underscores pleasant start-up kit of your basic PHP loops you can get into theming without having all this stuff memorized or consulting WordPress documentation for every tiny thing.
Combine them together and you have _tk. I have been on a project using this framework and it did its job beautifully. WordPress developers would do well to become acquainted with this base theme for the obvious reasons. It has a quick start time on projects and, of course, the loose restrictions that a very basic theme will give you. Of course by knowing this, it’s important to note you will have to write a good amount of CSS overlaying on what bootstrap’s styles are. It would be a very boring site indeed that used out-of-the-box styles without modification to create a compelling design. Get the _tk Starter Theme Here.
This is, in the end, why someone would want to use a tool like this. The very basic styling that comes with Bootstrap is intended to be helpful without being obtrusive, and enables developers and designers to bring their own flare to the table and adjust things without being overly designed to begin with.
Here’s how you get started writing your theme from scratch, and the main things you’ll need to have in place for it to work
With a new theme, the key things to have in place first is a Style.css file with the name of the theme up at the top, a page.php, header.php, and footer.php files with proper PHP loops.
An example of a CSS file for WordPress, which will define the theme:
In chapter two, I showed you how to do this for a child theme, but the header of your CSS file for the parent theme should look like this, and if the file has to be named ‘style.css’ and be in the root folder of the theme.
/* Theme Name: Theme Name Theme URI: https://www.timbdesign.com/theme-page Description: The theme for "Theme Name" Author: Tim B Design Author URI: https://www.timbdesign.com Template: theme_name Version: 1.0.0 */ /* ----------All your styles can be below here ----------------- */
Here is some code that you might use as a very basic header:
It first defines the doctype, displays the title for browsers to read using a WordPress PHP loop, and gets the favicon for the site if you have it dropped in the theme folder. The “body class” is applied to the tag so that page templates and ID’s are automatically added for easy targeting with CSS classes. Clearly a basic header structure is included here, and the menu is called, so that whatever menu you are referring to in the WordPress admin as the “primary” will show up in the admin bar. Of course, if you are working in a blank theme, none of this will be styled yet, but it will just be raw elements that you can get ready to shape once we have the bones in place.
/** * The Header for our theme. * * Displays all of the <head> section, header and top navigation areas * * @package theme_name * */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrap"> <header id="branding"> <div id="logo"><a href="<?php echo home_url() ?>/"><?php bloginfo( 'name' ); ?></a></div> <div id="tagline"><?php bloginfo( 'description' ); ?></div> </header> <nav id="top-nav"> <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> </nav>
Here is some code that you might use as a very basic footer:
<?php /** * The template for displaying the footer. * * @package theme_name */ ?> <footer> <p>© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p> </footer> </div><!-- end of wrapper --> <?php wp_footer(); ?> </body> </html>
Of course, if you’ve downloaded one of the starter themes above you’ll already have these things in place, plus some divs and structure that will be used for quickly shaping the responsive aspects of the site. In the next chapter, I will share how to get some basic responsive structure in place if you are working from complete scratch, and how to start manipulating the design if you are using a responsive framework, like one of those above.
Thanks for reading ‘WordPress Development for Noobs: When to Use Theme Options and when to code!’ If you found this useful, please tweet this so others can check it out, too.
I enjoy creating some of the best web design on WordPress in Minneapolis and sharing the things I learn. I do it because I know it’s something people need and I like being of use. If I can help you with WordPress design and development, let me know, that is my specialty.