Click here to load reader

WordPress Theme Development

  • View
    365

  • Download
    0

Embed Size (px)

Text of WordPress Theme Development

WordPress Theme Development

Nilambar SharmaWordPress DeveloperCo-founder WEN Themeshttp://wenthemes.comWordPress Theme Development2Bipin SinghWordPress DeveloperThemeGrillhttp://themegrill.com/

WordPress Theme Development Santosh KunwarWordPress DeveloperCo-founder eVision Themeshttp://evisionthemes.com

2

WordPress Theme Development3What is WordPress theme?Collections of files working togetherFocus on frontend display, graphical interface and designLicensing is always GPL in wordpress.org

3

WordPress Theme Development4Why WordPress theme?To create unique look for your siteEase for WordPress site owner. ( No need to have knowledge PHP, CSS, HTML )

4

WordPress Theme Development5Why create WordPress theme?WordPress is Free as in SpeechAllow users to change the look and functionality easilyWordPress is Flexible, Easy to Use and LearnContribution for WordPress Community

5

WordPress Theme Development6RequiredWordPress setupBasic knowledge of PHP, HTML, CSS and JavaScriptsGood text editor / IDELocal Server (eg, XAMPP, WAMP) & Browser (eg, Firefox)

6

WordPress Theme Development7RecommendedAccount in stackoverflowPassion to learnBookmark WordPress Codex and supportWall nearby to bang your head

7

WordPress Theme Development8Setting up a Development EnvironmentSetting up Local EnvironmentXAMPP / WAMP / LAMP /MAMPInstall WordPressEnable WP_DEBUG in wp-config.phpImport Theme Unit Test DataInstall Theme Check and Developer Plugin

8

WordPress Theme Development9Lets start CodingTheme lies in /wp-content/themes/Theme Development OptionsStarting from scratchTaking reference of already developed theme (Twenty Sixteen,Twenty Fifteen, etc)Using Starter theme ( eg : UnderscoreS - http://underscores.me/)

9

WordPress Theme Development10Theme FilesRequired filesstyle.css; index.phpFunctions file-functions.phpTemplate filesheader.php ; footer.php; archive.php; single.php; etc OtherHelper files

10

11

11

WordPress Theme Development12Template HierarchyWordPress determines which template file(s) to use on individual pagesFor eg:page.php : displays single pagesingle.php : displays single postsingular.php : fallback for page.php and single.php (since WP 4.3)Several other templates has different priorityRef: Template Hierarchy

12

WordPress Theme Development13Template TagsSpecial functionsWorksGet database valueGet themes filesExamplesget_header()get_footer()the_title() etc

13

WordPress Theme Development14The LoopPHP code used by WordPress to display posts.Use template tags to display content

14

WordPress Theme Development15style.cssThe main theme fileNot only CSSDetails about the Theme in the form of commentsTheme NameAuthorAuthor URIDescriptionVersionLicenseLicense URITagsText Domain

15

WordPress Theme Development16index.phpThe main templateLowest fallback in template hierarchyBasically displays blog listing using Loop

16

WordPress Theme Development17functions.phpLoaded automatically during WordPress initializationUse to add unique features to your WordPress theme.Theme features like, Navigations, Sidebars, Post FormatsLoad Text DomainOther features

17

WordPress Theme Development18Other filesheader.phpHeader section of your web pagewp_head() must be there just before closing tagDont link script and stylesfooter.phpFooter section of your web pagewp_footer() must be there just before closing tag

18

WordPress Theme Development19Other files (contd)single.phpDisplay single blog postpage.phpDisplay single pagesearch.phpDisplay search resultsarchive.phpDisplay blog posts under certain archive like category, tag, date, etc.

19

WordPress Theme Development20Other files (contd)comments.phpDisplay comments, comment form, etc404.phpError page ( if requested page is not found )sidebar.phpDisplay sidebarFunction `dynamic_sidebar` is used to displayed registered sidebar

20

WordPress Theme Development21Hooks: Action and FilterTriggers while WordPress runAction:Add functionalityFilter:Modify functionality

21

WordPress Theme Development22Keep In MindImplement WordPress template tags and hooks properlyPrefix your functions or classes with theme nameProper Input Sanitization and Output EscapingAlways use WordPress functions if availableSupport WordPress-generated CSS classes.Make your theme Translation Ready

22

WordPress Theme Development23Releasing WordPress Themes in WordPress.orgRequired Theme Filesstyle.cssindex.phpcomments.phpscreenshot.pngTheme Review GuidelinesShould be 100% GPLTesting

23

WordPress Theme Development24Other Helpful topicsPage templatesPost MetaConditional TagsCustom Post TypesWordPress DatabaseSettings API / Customizer APIAJAX in WordPress themeCustom Query

24

10/29/2015WordPress Theme Development25https://developer.wordpress.org/themes/getting-started/https://codex.wordpress.org/Theme_DevelopmentReference Links

25

10/29/2015WordPress Theme Development26

Search related