0
THEME DEVELOPMENT IN
WORDPRESS
By:
Junejo Naeem Ahmed
WHY WORDPRESS THEMES?
• To create a unique look for your WordPress site .
• To take advantage of templates, template tags,...
A WORDPRESS THEME HAS MANY BENEFITS, TOO .
• It separates the presentation styles and template
files from the system files...
WHY SHOULD YOU BUILD YOUR OWN WORDPRESS
THEME? THAT'S THE REAL QUESTION.

• It's an opportunity to learn more about
CSS, H...
THEME DEVELOPMENT STANDARDS
• WordPress Themes should be coded using the
following standards:
• Use well-structured, error...
ANATOMY OF A THEME
• WordPress Themes live in subdirectories of the WordPress
themes directory (wp-content/themes/ by defa...
THEME STYLESHEET
• In addition to CSS style information for your theme, style.css
provides details about the Theme in the ...
THEME STYLESHEET (Cont’d)
FUNCTIONS FILE
• A theme can optionally use a functions file, which resides in
the theme subdirectory and is named functio...
WHAT IS A TEMPLATE TAG
• A template tag is code that instructs WordPress to
"do" or "get" something.
• In the case of the ...
TEMPLATE TAG -bloginfo
• Displays information about your site, mostly gathered from
the information you supply in your Use...
HOW TO PASS TAG PARAMETERS
• like PHP functions, many template tags accept arguments, or
parameters.
• Template tag parame...
INCLUDE TAGS
• The Template include tags are used within one Template file
to execute the HTML and PHP found in another te...
CONDITIONAL TAGS
• All of the Conditional Tags test to see whether a certain
condition is met, and then returns either TRU...
HOW WORDPRESS WORKS
• Visitors requests initial WordPress page: index.php
• WordPress activates themes
• WordPress checks ...
BASIC WORDPRESS THEME PAGE STRUCTURE AND ELEMENTS

•
•
•
•
•
•

Header (header.php)
Main content (index.php)
Sidebar with ...
ANATOMY OF A THEME
THE LOOP
• The Loop is PHP code used by WordPress to display
posts.
• Using The Loop, WordPress processes each post to
be ...
THE LOOP: VISIUAL MODEL
ADDITIONAL WORDPRESS TEMPLATE FILES
•
•
•
•
•

Archive (archive.php)
Custom Page (page.php)
Single Post (single.php)
Comme...
THE ARCHIVE TEMPATE FILE
•
•
•
•
•
•
•
•

archive.php
Fall back for 6 different page types:
Author
Tag
Category
Taxonomy
D...
THE CUSTOM PAGE TEMPATE FILE
• page.php
• Used to create all custom pages
• Additional custom page template can be created
Upcoming SlideShare
Loading in...5
×

Wordpress theme development

2,946

Published on

Wordpress theme development

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,946
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Wordpress theme development"

  1. 1. THEME DEVELOPMENT IN WORDPRESS By: Junejo Naeem Ahmed
  2. 2. WHY WORDPRESS THEMES? • To create a unique look for your WordPress site . • To take advantage of templates, template tags, and the WordPress Loop to generate different website results and looks . • To provide alternative templates for specific site features, such as category pages and search result pages . • To quickly switch between two site layouts, or to take advantage of a Theme or style switcher to allow site owners to change the look of your site .
  3. 3. A WORDPRESS THEME HAS MANY BENEFITS, TOO . • It separates the presentation styles and template files from the system files so the site will upgrade without drastic changes to the visual presentation of the site. • It allows for customization of the site functionality unique to that Theme. • It allows for quick changes of the visual design and layout of a WordPress site. • It removes the need for a typical WordPress site owner to have to learn CSS, HTML, and PHP in order to have a great-looking website .
  4. 4. WHY SHOULD YOU BUILD YOUR OWN WORDPRESS THEME? THAT'S THE REAL QUESTION. • It's an opportunity to learn more about CSS, HTML, and PHP. • It's an opportunity to put your expertise with CSS, HTML, and PHP to work. • It's creative. • It's fun (most of the time). • If you release it to the public, you can feel good that you shared and gave something back to the WordPress Community
  5. 5. THEME DEVELOPMENT STANDARDS • WordPress Themes should be coded using the following standards: • Use well-structured, error-free PHP and valid HTML. ( WordPress Coding Standards ). • Use clean, valid CSS. ( CSS Coding Standards ). • Follow design guidelines in Site Design and Layout .
  6. 6. ANATOMY OF A THEME • WordPress Themes live in subdirectories of the WordPress themes directory (wp-content/themes/ by default). • The Theme's subdirectory holds all of the Theme's stylesheet files, template files, and optional functions file (functions.php), JavaScript files, and images. • For example, a Theme named "test" would reside in the directory wp-content/themes/test/. • Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list. • WordPress includes a default theme in each new installation. Examine the files in the default theme carefully to get a better idea of how to build your own Theme files.
  7. 7. THEME STYLESHEET • In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. • The stylesheet must provide details about the Theme in the form of comments. • No two Themes are allowed to have the same details listed in their comment headers. • If you make your own Theme by copying an existing one, make sure you change this information first.
  8. 8. THEME STYLESHEET (Cont’d)
  9. 9. FUNCTIONS FILE • A theme can optionally use a functions file, which resides in the theme subdirectory and is named functions.php. • This file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). • Enable Theme Features such as Sidebars, Navigation Menus, Post Thumbnails, Post Formats, Custom Headers, Custom Backgrounds and others. • Set up an options menu, giving site owners options for colors, styles, and other aspects of your theme.
  10. 10. WHAT IS A TEMPLATE TAG • A template tag is code that instructs WordPress to "do" or "get" something. • In the case of the header.php template tag for your WordPress site's name, it looks like this: • <h1><?php bloginfo('name'); ?></h1>
  11. 11. TEMPLATE TAG -bloginfo • Displays information about your site, mostly gathered from the information you supply in your User Profile and General Settings WordPress Administration Screens. • It can be used anywhere within a template file. • This always prints a result to the browser. • If you need the values for use in PHP, use get_bloginfo(). • Usage – <?php bloginfo( $show ); ?> • Parameters – $show(string) (Optional) Keyword naming the information you want. – Default: name
  12. 12. HOW TO PASS TAG PARAMETERS • like PHP functions, many template tags accept arguments, or parameters. • Template tag parameters are variables you can use to change a tag's output or otherwise modify its action in some way. • Tags without parameters • Tags with PHP function-style parameters – Some functions take multiple parameters. – Multiple parameters are separated by commas. – The order of parameters is important! • Tags with query-string-style parameters
  13. 13. INCLUDE TAGS • The Template include tags are used within one Template file to execute the HTML and PHP found in another template file. • Include Generic Files – – – – get_header() get_footer() get_sidebar() get_template_part() • Include Other Components – get_search_form() – comments_template()
  14. 14. CONDITIONAL TAGS • All of the Conditional Tags test to see whether a certain condition is met, and then returns either TRUE or FALSE. – – – – Is_home() Is_single(); Is_admin(); Is_category();
  15. 15. HOW WORDPRESS WORKS • Visitors requests initial WordPress page: index.php • WordPress activates themes • WordPress checks to see which template files are present • Gathers settings stored in database • Retrieves specified number of most recent posts • Stores post data (title, author, content, comments, etc.) in variables • Outputs data into theme page
  16. 16. BASIC WORDPRESS THEME PAGE STRUCTURE AND ELEMENTS • • • • • • Header (header.php) Main content (index.php) Sidebar with Widget (sidebar.php) Footer (footer.php) CSS (style.css) The stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages.
  17. 17. ANATOMY OF A THEME
  18. 18. THE LOOP • The 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.
  19. 19. THE LOOP: VISIUAL MODEL
  20. 20. ADDITIONAL WORDPRESS TEMPLATE FILES • • • • • Archive (archive.php) Custom Page (page.php) Single Post (single.php) Comments (comments.php) Search Results (search.php)
  21. 21. THE ARCHIVE TEMPATE FILE • • • • • • • • archive.php Fall back for 6 different page types: Author Tag Category Taxonomy Date Archives
  22. 22. THE CUSTOM PAGE TEMPATE FILE • page.php • Used to create all custom pages • Additional custom page template can be created
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×