WordPress
Build a WordPress theme from HTML5 template
Mario Peshev
CTO @ Devrix TMS @ OnTheGo
About me
ThemeForest author Open Source trainer
and consultant at DevriX
Technical Marketing
Specialist at OnTheGoSystems
Building
custom themes, plugins, extending premium solutions based on the WP platform; WPTRT member
2
Java/PHP/Python background
OnTheGoSystems
WordPress
Super mega powerful!
(surprise, surprise)
Over 70 000 000 websites
online (both
Tens of thousands of themes and plugins
free and premium)
Ready for eCommerce, Groupon, Q&A, forum,
social network, ticketing system and more
Integrating HTML5 template into a WP theme
Start
We want to integrate our HTML sliced
design
into WordPress
The end results are:
Same look and feel (design)
Dynamic functionality
Working menus, areas, blocks, comments and other CMS-related elements
Warning!
Super important
A PSD is not:
A brochure A calendar A wallpaper / magazine cover / whatever
Site design should work with:
Different content (thousands of pages)
Different resolutions/browsers/operating systems/platforms
8
CMS integration
Every CMS has its
own specifics and expectations in terms of markup to draw the appropriate design and slice it properly
Its best to know the system in depth in order
WordPress
Lets integrate!
Our target
Some random free HTML5 template
11
Step 0
Make sure that:
Code is valid and understandable Code is reusable Template markup seems WP-compatible
Note: some super basic
PHP knowledge is
required
12
Step 1
Download the HTML template Browse
all required resources:
HTML CSS
JS
Flash
Fonts
13
Step 2
Setup development environment XAMPP,
LAMP/WAMP/MAMP
Create a database Install WordPress
for the new install
(hint: famous 5-min install or wp-content/themes
my video)
Create a new folder in
14
Step 3
Add the required files there:
style.css index.php
These are the two mandatory files for a
WordPress theme
15
Step 4
Add an appropriate
heading to style.css:
16
Step 5
Migrate your
template CSS to style.css
If there are more than 1 stylesheet files, there
are 2 options:
Include them in header with normal <style> tag
Use wp_enqueue_style in functions file
17
Step 6
Add header.php, footer.php and sidebar.php Separate the common parts
of the site and move them to header, footer or sidebar pages
There are other template files as well
18
Step 7
Fix all static
image paths in the style.css file
Organize images in images/ folder
20
Step 8
Add the style.css
file to the header of the site:
Fill
in the index.php code for all pages (everything left besides header/footer code
21
Step 9
Clear out all static
page content from your markup (the demo texts title and static content)
Use this snippet instead:
22
Step 10
Use predefined tags, such as:
the_title() the_content() the_permalink()
They work in a loop
A single post view is like an array with 1 element
23
Step 11
Move index.php to home.php or front.php if
you want a landing page
Replicate index.php, but:
Add sidebar section
Correct small dynamic details such as dates
Use date(Y), date(M), date(d) for y/m/d
24
Step 12
Define sidebar
25
Step 13
Add sidebar to a page
26
Step 14
Define menu
Call it a few times or use
register_nav_menus
for several menus
27
Step 15
Add the menu to a block in the markup
theme_location is sufficient
28
Step 16
Call
comment_form() or comments_template():
29
Step 17
Enjoy!
30
Whats next?
Once youre ready
with the theme, you could:
Add some complex plugins for more functionality Integrate some APIs to social networks or remote services Work on the next theme of yours
31
Recommended Plugins
Types and Views WPML WooCommerce BuddyPress
S2Member
Contact Form 7 / Gravity
Forms
Free and Paid
32
Want to be a WP theme ninja?
Check out Theme Reviewers Team guides:
Theme Review Theme Unit Test WPTRT page
Theme-Check plugin
Become a Pro
and submit on ThemeForest and free WPML
33
WPORG
Get popular and well provide a
author license for you.
WordPress
Questions?
http://me.peshev.net/ http://html5course.telerik.com
