This document discusses using HTML/CSS in WordPress themes. It recommends using the Underscores starter theme to reduce time and effort. The Underscores theme provides default pages and structures that save developer hours. Key theme files like functions.php, header.php and footer.php are outlined. Styling elements with style.css is also covered. Child themes are recommended over directly modifying themes to avoid issues with updates. The document concludes with a practical example of creating a custom template file to build homepage slices directly in WordPress.

1. HTML/CSS for WordPress
Presented By: Kanchha Kaji Prajapati (Creativekaji)
+

2. Kanchha Kaji Prajapati (creativekaji)
Facebook: www.facebook.com/creativekaji
Twitter: www.twitter.com/creativekaji
Email: creativekaji@gmail.com
Website: Creativekaji.com

3. Why HTML/CSS on WordPress?
 Most of our HTML/CSS is converting on WordPress
 To reduce double work
 To reduce time and effort of designer and developer
 To Know something about WordPress

4. Setup WordPress
Download WordPress from https://wordpress.org/

5. Create a database

6. Extract on your local server

7. Finally, Run it from browser and setup WordPress

10. What is Underscores?
 A startup theme
 Released in 2012 by automattic
 Maintained on Github
 Collective knowledge of the WordPress.com Theme Team
 1,000 hour head start

11. What it isn't
 Not a plug and play theme
 Not a parent theme

12. But Why Underscores?

14.  Fine work of WordPress maker team
 Come up with default pages saves hours
 Less overhead than a full theme
 Most of developer are using it
 Reduce time and effort
 It will become your own theme

15. Download Underscores from http://underscores.me/
How to get Underscores theme?

16. Extract zip file and paste it on theme file directory

17. Activate new theme form backend dashboard

18. New Website first look… Not so cool hum.

19. Expecting something like this? 

20. HTML Structure 1 – Header & Navigation
Example

21. HTML Structure 2 – Site Content, Primary and Secondary
Example

22. HTML Structure 3 – Post list (article)

23. Example

24. HTML Structure 4 – Sidebar (Widget list)
Example

25. HTML Structure 5 – site footer
Example

26. Some major working files for designers
• functions.php
Enqueue style and js files
• header.php
Write header contents
• footer.php
Write footer contents
• screenshot.png
To recognize your theme in theme list
• style.css
Main CSS file

27. Styling default elements – style.css
• Typography
• Color
• Buttons
• Navigation
• Form fields
• Widgets
• Post and page
• Archive page
• Comment section
• And more . . .

28. Does have any alternative of _S?
 Sage by Roots
 Bones
 Quark
 Html5blank
 _tk
 Blankslate
 Responsive
 Twenty Sixteen
 Backbone
 PageLines
 The answer is YES, & may be these;

29. Now, let’s talk about child theme

30.  If you modify a theme directly and it is updated, then your modifications
may be lost
 Can speed up development time.
 A great way to learn about WordPress theme development.
WHY SHOULDYOUUSEAWORDPRESSCHILDTHEME?

31. 1. The child theme directory
2. style.css
3. functions.php
How to Create a Child Theme

32. Tips:
 Do not style, if the parent theme have options
 Let’s try to use enqueue_style rather than @import CSS.

34. Now, Let’s do practical

35. CREATE CUSTOM TEMPLATE
TASK:

36. 1) Create a blank file in theme directory on named
template-home.php
2) Open the file and write a template name
Let’s follow these steps:
<?php
/**
* Template Name: Home Page
*
* @package wpsite
*
*/

37. 3) Go to dashboard and add a new page, choose template and
publish it.

38. 4) Choose added page as static page for front page and save
changes

39. 5) Visit your new front page.
Now, you can work as normal Slice in WordPress . COOL !!!

40. THANK YOU 
ANY QUESTION?