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.
Alternate
colors
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.
