Creating WordPress themes from scratch is a difficult task. After you have done this work numerous times you begin looking for any easier route to take. I’ve found that building on a simple template model can really expedite the project timeline – the work is also far less stressful.
So I’ve created this unique WordPress template named "Bare Responsive" which you can download below. The design is mobile-friendly and responsive for differing screen widths. All the typical WordPress template files are included and you are free to edit this to any degree.
Ultimately I hope this template can provide a starting point for WordPress development, better than a blank canvas.
Along with the template files, I’ve also included some dummy data (which you can also download below) to import and test out with the design.
In the brief article below, I’ll explain a few of the WordPress features and how you can utilize them within your own themes.
Inside the Header
Looking into the header.php file, I’ve included a lot of extra metadata and 3rd party scripts. You should try to change the author meta tag to match your own name, or the name of your new website.
Also I’ve included an external stylesheet link to a Google web font Quando which I’m using in the header text.
Now you may also notice that I’m using a custom navigation setup inside the WordPress theme. You don’t technically need to make any edits to the PHP code. But you should look over the parameters for wp_nav_menu() just to figure out any changes you may want.
What you should do is create a new menu inside the WP Admin Appearance > Menus. Then you should be able to connect that new menu into the “header-menu” found in the template file.
In this way you can add custom links & pages, even sub-pages, to the top navigation without any programming required.
Custom Theme Functions
Possibly the most interesting chunk of code you should customize would be inside functions.php. This holds all the default theme properties, which include navigation menus and widgetized sidebars.
I’ve setup two distinct sidebars which are both widgetized. By default you don’t need to add anything into them since the template will display data non-widgetized. But it’s also very easy to find these sidebars inside Appearance > Widgets.
The main sidebar is floating off to the right side for all default layout styles. As the screen width becomes smaller eventually this sidebar is hidden and replaced with a responsive sidebar. This new mobile-friendly sidebar only contains 2 elements and will display underneath the page content.
It’s nice to have this option because you may choose to match the sidebars with identical content. But alternatively you can setup totally different context between the two sidebars which may be more reliable.
There are a couple more functions which I’ve defined inside the theme file.
First I’m removing the #more hash from the end of blog post links. I very much dislike this typical WordPress setting and it feels a bit forced.
Also in the archive pages we don’t have a “read more” link by default. So I’ve added that into the HTML using a custom WordPress filter.
Possible User Edits
The bare-responsive theme is simple enough that you can upload the template and start editing files right inside the WordPress admin panel. Although you do have the ability to work with the files individually – this is difficult if you don’t have a WordPress blog for testing the changes.
In the spirit of keeping things simple I’ve limited the theme files to only our bare essentials. Also all the responsive mobile CSS codes are located in the same style.css stylesheet.
You’ll be able to edit the template styles at any time to suit your needs better.
The custom script.js is used for the mobile responsive dropdown navigation panel. I feel this is one of the best solutions for the header navigation, and it looks really smooth.
If you feel the need to customize CSS styles on the mobile menu just be sure to keep the IDs and classes relatable to the jQuery script.
Final Thoughts
Again I do hope this bare-responsive template can provide a source of inspiration to young developers. It’s not easy working with WordPress and having a bit of code to start with can make all the difference.
I’ll be happy to answer questions and hear out suggestions, because obviously this isn’t a perfect template.
Working together with other developers is the best way to improve your own skills and pick up on common mistakes. So get out there and start coding!
Downloads
Download wptestdata.xml
Download and import this XML file into your WordPress to give it some dummy content.
Download Bare-responsive WordPress Theme
This whole project is purposefully released as open source under the MIT license which means you can edit and distribute unlimited copies for any project as long as you do not claim it your own, or re-sell it.
Freebie Release: “Bare Responsive” – A blank and responsive WordPress Theme
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.