HTML/CSS for WordPress

Presented By: Kanchha Kaji Prajapati (Creativekaji)

+

Kanchha Kaji Prajapati (creativekaji)

Facebook: www.facebook.com/creativekaji Twitter: www.twitter.com/creativekaji

Email: creativekaji@gmail.com Website: Creativekaji.com

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

Setup WordPressDownload WordPress from https://wordpress.org/

Create a database

Extract on your local server

Finally, Run it from browser and setup WordPress

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

What it isn't

Not a plug and play theme

Not a parent theme

But Why Underscores?

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

Download Underscores from http://underscores.me/

How to get Underscores theme?

Extract zip file and paste it on theme file directory

Activate new theme form backend dashboard

New Website first look… Not so cool hum.

Expecting something like this?

HTML Structure 1 – Header & Navigation

Example

HTML Structure 2 – Site Content, Primary and Secondary

Example

HTML Structure 3 – Post list (article)

Example

HTML Structure 4 – Sidebar (Widget list)

Example

HTML Structure 5 – site footer

Example

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

Styling default elements – style.css

• Typography• Color• Buttons• Navigation• Form fields• Widgets• Post and page• Archive page• Comment section• And more . . .

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;

Now, let’s talk about child theme

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 SHOULD YOU USE A WORDPRESS CHILD THEME?

1. The child theme directory2. style.css3. functions.php

How to Create a Child Theme

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

Now, Let’s do practical

CREATE CUSTOM TEMPLATE

TASK:

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 * */

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

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

5) Visit your new front page.

Now, you can work as normal Slice in WordPress .

COOL !!!

THANK YOU

ANY QUESTION?