Saigon Wordpress Meetup - Themes Wordpress Meetup

23
WORDPRESS THEME FROM SCRATCH Name: Vo Minh Man Website: http://minhman.com Facebook: Check my website Email: [email protected] Work: www.izwebz.com Free screencast tutorial about html, css, jquery, php, mysql, wordpress….

description

Hướng dẫn cách tạo một giao diện Wordpress đơn giản

Transcript of Saigon Wordpress Meetup - Themes Wordpress Meetup

Page 1: Saigon Wordpress Meetup - Themes Wordpress Meetup

WORDPRESS THEMEFROM SCRATCH

Name: Vo Minh ManWebsite: http://minhman.comFacebook: Check my websiteEmail: [email protected]: www.izwebz.comFree screencast tutorial abouthtml, css, jquery, php, mysql, wordpress….

Page 2: Saigon Wordpress Meetup - Themes Wordpress Meetup
Page 3: Saigon Wordpress Meetup - Themes Wordpress Meetup
Page 4: Saigon Wordpress Meetup - Themes Wordpress Meetup
Page 5: Saigon Wordpress Meetup - Themes Wordpress Meetup

+

+

+

Page 6: Saigon Wordpress Meetup - Themes Wordpress Meetup
Page 7: Saigon Wordpress Meetup - Themes Wordpress Meetup

STEP BY STEP

WORDPRESS THEME

Page 8: Saigon Wordpress Meetup - Themes Wordpress Meetup

Template Core Files

index.php style.css screenshot.png

Size: 880 × 660 pxtake screenshot of website

Define website informationsname, author, license, tags….

Show whatever you want !!!with html/css and template tags

Page 9: Saigon Wordpress Meetup - Themes Wordpress Meetup

DEMO(index.php / style.css / screenshot.png)

Page 10: Saigon Wordpress Meetup - Themes Wordpress Meetup

index.php

header.php(fixed content)

Main content(dynamic content)

sidebar.php(fixed content)

footer.php(fixed content)

Fixed content:Will NOT change in every pages

Dynamic content:Will change in every pages

Page 11: Saigon Wordpress Meetup - Themes Wordpress Meetup

header.php(fixed content)

<?php get_header(); ?>

footer.php(fixed content)

<?php get_footer(); ?>

sidebar.php(fixed content)

<?php get_sidebar(); ?>

Page 12: Saigon Wordpress Meetup - Themes Wordpress Meetup

DEMObasic index.php / header.php / footer.php / sidebar.php

Page 13: Saigon Wordpress Meetup - Themes Wordpress Meetup

Main content(dynamic content)

the loopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.Read: http://codex.wordpress.org/The_Loop

Page 14: Saigon Wordpress Meetup - Themes Wordpress Meetup

THREE SIMPLE WAYS TO USE

THE LOOP

Page 15: Saigon Wordpress Meetup - Themes Wordpress Meetup

Loop basics

The loop

template tags

Page 16: Saigon Wordpress Meetup - Themes Wordpress Meetup

Loop with query

The loop

template tags

Page 17: Saigon Wordpress Meetup - Themes Wordpress Meetup

Loop with confirm query (Recommend this)

The loop

template tags

Page 18: Saigon Wordpress Meetup - Themes Wordpress Meetup

DEMObasic the loop (index.php / wp_nav_menu)

Page 19: Saigon Wordpress Meetup - Themes Wordpress Meetup

Template File Hierarchy

link to page.phpshow your page detail

link to category.phpshow all post in ‘news’ category

link to single.phpshow your post detail

Page 20: Saigon Wordpress Meetup - Themes Wordpress Meetup

Post vs Page

Post Page

Posts are content entries listed in reverse chronological order on your blog’s home page.

Pages are meant to be static “one-off” type content such as your about, contact, privacy policy, legal disclaimers, etc.

Posts are timely Pages are timeless

Posts can be categorized Pages are hierarchical

Posts are included in RSS feed Pages are not

Posts do not Pages have custom template

Page 21: Saigon Wordpress Meetup - Themes Wordpress Meetup

DEMOsingle.php // page.php // category.php // sidebar.php

Page 22: Saigon Wordpress Meetup - Themes Wordpress Meetup

Sample data: http://themetrust.com/knowledgebase/how-to-import-the-demo-contentThe loop: http://codex.wordpress.org/The_LoopQuery parameters: http://codex.wordpress.org/Class_Reference/WP_Query#ParametersTemplate hierarchy: http://codex.wordpress.org/Template_HierarchyTemplate tags: http://codex.wordpress.org/Template_TagsSidebar Generator: http://generatewp.com/sidebar/WP-PageNavi The Right Way To Use:- query_posts() http://scribu.net/wordpress/wp-pagenavi/right-way-to-use-query_posts.html- WP_Query() http://scribu.net/wordpress/wp-pagenavi/wpn-2-74.htmlRage Comic: http://ragemaker.net

Resources

Page 23: Saigon Wordpress Meetup - Themes Wordpress Meetup