Scribd
Upload
147 views

Wordpress Html5 Integrate Telerik

This document provides steps for integrating an HTML5 template into a WordPress theme. It begins with an introduction to WordPress and its capabilities. It then outlines 17 steps to follow, including setting up a development environment, migrating CSS and template files, adding required theme files like header.php and footer.php, fixing image paths, adding dynamic WordPress tags, and defining menus and comments. The document recommends plugins that can add additional functionality and provides tips on becoming an expert WordPress theme developer.

Uploaded by

imamjabar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
147 views

Wordpress Html5 Integrate Telerik

This document provides steps for integrating an HTML5 template into a WordPress theme. It begins with an introduction to WordPress and its capabilities. It then outlines 17 steps to follow, including setting up a development environment, migrating CSS and template files, adding required theme files like header.php and footer.php, fixing image paths, adding dynamic WordPress tags, and defining menus and comments. The document recommends plugins that can add additional functionality and provides tips on becoming an expert WordPress theme developer.

Uploaded by

imamjabar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like