HTML/CSS for WordPress
-
Upload
kanchha-kaji-prajapati -
Category
Technology
-
view
291 -
download
1
Transcript of HTML/CSS for WordPress
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: [email protected] 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?