Build a WordPress theme from HTML5 template @ Telerik
-
Upload
mario-peshev -
Category
Technology
-
view
7.329 -
download
0
description
Transcript of Build a WordPress theme from HTML5 template @ Telerik
![Page 1: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/1.jpg)
WordPressBuild a WordPress theme from HTML5 template
Mario PeshevCTO @ DevrixTMS @
OnTheGo
![Page 2: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/2.jpg)
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
Java/PHP/Python background2
![Page 3: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/3.jpg)
OnTheGoSystems
3
![Page 4: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/4.jpg)
Super mega powerful! (surprise, surprise)
Over 70 000 000 websites online Tens of thousands of themes and plugins (both free and premium)
Ready for eCommerce, Groupon, Q&A, forum, social network, ticketing system and more
WordPress
4
![Page 5: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/5.jpg)
Integrating HTML5 template into a WP
theme
![Page 6: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/6.jpg)
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
Start
6
![Page 7: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/7.jpg)
Warning!
7
![Page 8: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/8.jpg)
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
![Page 9: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/9.jpg)
CMS integration Every CMS has it’s own specifics and expectations in terms of markup
It’s best to know the system in depth in order to draw the appropriate design and slice it properly
9
![Page 10: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/10.jpg)
WordPressLet’s integrate!
![Page 11: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/11.jpg)
Our target Some random free HTML5 template
11
![Page 12: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/12.jpg)
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
![Page 13: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/13.jpg)
Step 1 Download the HTML template Browse all required resources:
HTML
CSS
JS
Flash
Fonts
13
![Page 14: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/14.jpg)
Step 2 Setup development environment – XAMPP, LAMP/WAMP/MAMP
Create a database for the new install
Install WordPress (hint: famous 5-min install or my video)
Create a new folder in wp-content/themes
14
![Page 15: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/15.jpg)
Step 3 Add the required files there:
style.css
index.php These are the two mandatory files for a WordPress theme
15
![Page 16: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/16.jpg)
Step 4 Add an appropriate heading to style.css:
16
![Page 17: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/17.jpg)
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
![Page 18: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/18.jpg)
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
![Page 19: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/19.jpg)
![Page 20: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/20.jpg)
Step 7 Fix all static image paths in the style.css file
Organize images in images/ folder20
![Page 21: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/21.jpg)
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
![Page 22: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/22.jpg)
Step 9 Clear out all static page content from your markup (the demo texts – title and static content)
Use this snippet instead:
22
![Page 23: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/23.jpg)
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
![Page 24: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/24.jpg)
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
![Page 25: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/25.jpg)
Step 12 Define sidebar
25
![Page 26: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/26.jpg)
Step 13 Add sidebar to a page
26
![Page 27: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/27.jpg)
Step 14 Define menu
Call it a few times or use register_nav_menus for several menus
27
![Page 28: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/28.jpg)
Step 15 Add the menu to a block in the markup
theme_location is sufficient28
![Page 29: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/29.jpg)
Step 16 Call comment_form() or comments_template(…):
29
![Page 30: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/30.jpg)
Step 17 Enjoy!
30
![Page 31: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/31.jpg)
What’s next? Once you’re 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
![Page 32: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/32.jpg)
Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity Forms Free and Paid
32
![Page 33: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/33.jpg)
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 WPORG
Get popular and we’ll provide a free WPML author license for you. 33
![Page 34: Build a WordPress theme from HTML5 template @ Telerik](https://reader033.fdocuments.net/reader033/viewer/2022061103/540bec678d7f726a208b47b1/html5/thumbnails/34.jpg)
WordPress
Questions? ?
?? ? ?
???
?
?
http://html5course.telerik.com
http://me.peshev.net/