In the 1st a part of this series concerning my WordPress theme style method, I lined, however, I am going concerning the idea and style part.
This post covers my method for developing a WordPress theme. That is, when the PSD mockup is complete, this can be however I am going concerning writing and making ready to unharness it as a business theme on Theme.
NOTE: this can be not meant to be a tutorial, however rather Pine Tree State sharing my personal vogue and method. I mention several technical aspects of new development here. If you’re unclear or curious about the additional detail on something mentioned here, let Pine Tree State apprehend within the comments and perhaps I’ll post Associate in a Nursing in-depth post concerning it!
First, the markup.
The panic finale has been my writing application of selection for the past two years some. a couple of months back I gave java an attempt, however, it didn’t follow Pine Tree State. The finale has everything I need: A clean interface, user-defined keyboard shortcuts & snippets, and an intrinsic seamless FTP consumer.
I begin by writing the most templates in valid XHTML and CSS. I’ve ne’er been one to use a CSS framework or pre-built example created by others (like the 960.gs). I favor creating each line of code my very own to confirm that each bit is optimized for this specific theme, with nothing leftover that I don’t would like.
That said, I even have crafted my very own “new theme” example, or set of files/folders if you’ll. I’ve been tweaking and raising this set of templates over time. It to hurry up the method at the terribly starting by covering all the things that I invariably place in each theme. My starter example consists of:
Index.html – blank-slate hypertext mark-up language doc, as well as the doc kind, basic hypertext mark-up language page structure, and a decision to the style sheet.
reset.css – Created by Eric Meyer, with a couple of my very own tweaks. I haven’t invariably used this within the past, however recently I do. It’s sensible for creating things consistent across all browsers from the terribly starting.
style.css – This has all of the essential components of a typical WordPress theme style sheet, as well as the theme information declaration at the highest. It includes the clear fix technique, basic designs, and margins assail the common components like P, H1-h6, UL, OL, etc. It conjointly incorporates a few WordPress-specific designs that I do know I’ll like later like some basic comments designs, .align left, .align right, .align center, block quote, and a couple of alternative things.
Scripts folder – I invariably embrace jQuery here. I understand that WordPress has jQuery in-built, however, I’m 1st beginning with the static hypertext mark-up language templates, and thus I’ll like my very own copy of it. I even have the jQuery cycle script here as a result of I take advantage of it thus typically.
With my starter example dismissed up in the finale, and my finished mockup open in Photoshop, I purchase to figure on slicing and writing up the static hypertext mark-up language example. My goal here is to induce the maximum amount of the positioning structure and details coded as I will. The items I would like to possess coded at this stage are:
Overall structure and layout.
Typography, as well as the implementation of Cufon (my selection for font-replacement in business themes. For alternative sites, I am going with Type Kit).
jQuery enhancements. This includes dropdown menus, featured posts sliders (though I take advantage of static content for now), etc.
Widget styling. Again, mistreatment static content currently, however styling the markup to be used later in WordPress.
Most of the time, I’ll do a home page (index.html) and generic interior page (page.html). typically I’ll produce a further journal page if journal posts can have a singular layout or one thing. sometimes in website development, I’d implement a system of includes, sort of a world header and footer. However, since WordPress can have its own include/template system, I don’t trouble to make includes for the static hypertext mark-up language templates.
Browser Testing & Validation
When it involves browser testing, I invariably say check early and check typically. Some people don’t even consider id est. till they’re done writing everything. This can be a nasty plan, as a result of additional typically than not, id est. needs you to re-think your (perfectly logical) code and you’ll find yourself dalliance to travel back and re-code.
I favor checking all browsers as I am going on, particularly as every major piece is enforced. for instance, I’ll get my featured posts slider operating absolutely across all browsers before moving onto the remainder of the positioning.
To finish off the static hypertext mark-up language part, I place my pages through the W3C validator till that refreshing inexperienced lightweight seems.
Most of the time I implement alternate color style sheets when doing the static hypertext mark-up language templates, however before group action WordPress. I do that in order that I will unharnessed the static hypertext mark-up language templates as their own product, with multiple color choices in-built.
The method I do that is solely by making further style sheets, that override specific designs and colors found within the main style sheet. Basically, I commit the most style sheet to be the “default” combination and use further style sheets for the opposite choices. I take terribly special care in selecting alternate colors. typically I’ll go to this point on choose and implement a combination, solely to trash it later as a result of I feel it’s not ok for unharnessed.
Time to integrate WordPress
Finally, the important fun begins…
I produce a contemporary installation of the most recent version of WordPress among the Theme demo section (this specific demo isn’t live yet). Then I import some basic journal content. WPCandy incorporates a nice “test content” import file you’ll transfer and use to quickly kindle a brand new demo web site. I even have created my very own version of this, that I feel works higher to showcase my themes on Theme.
Then I begin making the theme. For this, I even have created my very own personal starter example, that I even have named “Frame” (Framework + Theme, get it?). It’s not meant to be a WordPress Framework within the sense of the word. very simply a place to begin for my very own personal use. enclosed area unit a couple of things I favor to possess across all my themes:
The Theme choices panel – with basic choices enclosed. I’ll add additional choices specific to the current theme a small amount later.
Various SEO markup and example tag enhancements.
Some PHP functions I invariably use – like pictures and fingernail handling, registering widgets, a custom gizmo example, custom comments markup, custom excerpts, etc.
I duplicate Frame and rename it to the new theme name. Then I write the complete vogue.css file with the one I created earlier for the static hypertext mark-up language templates. currently we’ve got basic styling, however, the markup isn’t along, however.
I go line-by-line group action WordPress tags and functions with the markup I already created earlier. It’s simply a matter of pasting chunks of markup from the static hypertext mark-up language templates into the WordPress templates. I begin this method by putting in header.php, index.php, and footer.php as these three templates can essentially produce a page from prime to bottom. Then I’ll fill within the remainder of the example files.
Now is an honest time to re-test everything across all browsers.
The last part of WordPress integration is to implement all of the theme choices. This adds a further layer of example tweaks, turning static things into variables, adding inputs and sets of inputs to the Theme choices page, and curiosity.
Then, in fact, there’s testing, testing, and additional testing. TIP: check at the hours of darkness, however, checks once more in the morning once you’ve had an honest night’s sleep. You’d be stunned what percentage belongings you miss once you’re bleary ox-eyed. Their area unit such a big amount of very little things that go in a WordPress theme development , it will take a full week simply to traffic all the loose ends.
That wraps up the WordPress development part. If you have got any queries on behalf of me, or if you have got a distinct approach you’d wish to share, please leave your thoughts within the comments.