Some rights reserved by Yandle

28 JANUARY, 2015

Adapting and understanding themes Wordpress

Tuva Solstad, partly based on slides by Anne Tjørhom Frick

What you will learn today Last time we talked about how to change the appearance of your site with the tools that are available in the admin interface. Today we will talk about adapting and customizing your site by • Making changes to style sheets. • Adapting templates and using template tags. • Making Child Themes The way themes are organized will vary so how a specific theme should be adapted will differ from theme to theme but they will follow “the WordPress way”. So you’ll need some understanding about how WordPress works to be able to adapt your theme to your needs.

26 JANUARY, 2015

Templates and functions A template defines part of a web page generated by a WordPress theme. They are made up of a combination of HTML and PHP. PHP is used to fetch content and information about content (title, dates, categories, tags, ...) and to insert templates within templates. PHP also provides programming logic such as loops (for, while) and conditional statements (if).

27 JANUARY, 2015

content_single.php

The WordPress core defines functions that retrieves data from the database

The post title and content are stored in wp_posts in the database 26 JANUARY, 2015



The anatomy of a WordPress web page A page is made up of these parts (the layout will differ, e.g left sidebar or header on top of sidebar) header.php

The templates used to build the main content is determined by the Wordpress Template Hiearchy

Main content sidebar.php

footer.php

26 JANUARY, 2015

Template hierarchy WordPress has a template hierarchy which means the site creator has the option to choose to make specific templates or use a template higher up in the hierarchy. 1. A page is requested (e.g. http://bibin.hioa.no/wp/tuvaso/?cat=8) 2. WordPress determines what page type is being requested (archive page, a home page, a search page etc.) 3. Once page-type has been determined (in this case category page) WordPress tries to find a template for that type. 4. WordPress will first look for a template for that particular category with the category-slug (in this case theatres ) in the filename (category-theatres.php) 5. If this can’t be found WordPress will then look for a template for that particular category id ( category-8.php) 6. If WordPress can’t find the category-8.php file, it will move up one level and use the category.php template to render the page 7. If the category.php template isn’t available, WordPress will use the archive.php template (category is just a specific type of archive). 8. If archive.php can’t be found, it will fall back on the default index.php template.

27 JANUARY, 2015

Which template does Wordpress choose? The site’s front page (set to static front page): front-page.php page hierarchy (see single page)

index.php

The site’s front page (set to blog post index): front-page.php home.php index.php Blog posts index: home.php index.php Single page: custom.php

page-slug.php

Single post: single-[post-type].php

single.php

page-id.php

page.php

index.php

More information about template hierarchy (http://codex.wordpress.org/Template_Hierarchy) and http://wphierarchy.com/ 27 JANUARY, 2015

index.php

Viewing and editing the theme templates In the Admin interface choose Appearance > Editor. The list of templates that the theme uses will be listed on the right. Select the template or the style sheet (styles.css) to view or edit the file. We will use page.php from the twentyfifteen theme as an example in this lecture.

26 JANUARY, 2015

26 JANUARY, 2015

Every thing inside /* and */ is a comment in PHP which is for a person reading the file and is generally ignored by PHP. Tips: use the search field in the WordPress Codex to find information about WordPress functions.

Or go to the Code Reference (https://developer.wordpress.org/reference/)

28 JANUARY, 2015

How templates gets loaded when displaying a page (twentyfifteen) get_sidebar()

header.php get_header()

get_template_part()

content_page.php page.php

comments_template()

get_footer()

comments.php

footer.php 28 JANUARY, 2015

sidebar.php

Header The header-template is typically in charge of: • Printing the head of the html-page which contains instructions for the browser and calls the wp_head which pulls in a variety of plugin resources.

• Printing the sites title and description (subtitle) • May be in charge of displaying a search-box or loading the sidebar template • May be in charge of setting up the navigation and menu • Printing the beginning of the content portion of the page.

28 JANUARY, 2015

Header (continued)

28 JANUARY, 2015

Sidebar For the twentyfifteen theme: The header-template inserts the sidebar-template (sidebar.php) with the function get_sidebar(); sidebar.php prints the sidebar, including the site navigation and widget area. When sidebar.php ends Wordpress returns to header.php. When Wordpress complete the processing of header.php it returns to page.php.

26 JANUARY, 2015

The loop The next thing to happen in page.php is the loop. The Loop is PHP code used by WordPress to display posts

All posts

Are there more posts? while (have_posts()) No

Yes Get a post the_post()

Use content-template to display post get_template_part( 'content', get_post_format() ); 28 JANUARY, 2015

The_post() This is used to get all the information on the page ready to be used in other functions. More information about the_post (http://codex.wordpress.org/Function_Reference/the_post ).

get_template_part( 'content', 'page' ); This is used to insert the content-page.php template which prints the actual page contents More information about get_template_part() (http://codex.wordpress.org/Function_Reference/get_template_part).

28 JANUARY, 2015

content-page.php The template content-page.php includes functions to print the title of the page inside a h1-tag which is inside a header-tag: ">