Building a WordPress theme from scratch

Slide 1

Slide 1 text

BUILDING A WORDPRESS THEME FROM SCRATCH EMANUEL BLAGONIC / @EBLAGONIC

Slide 2

Slide 2 text

No stress. We’ll get to it. :) RULE 1

Slide 3

Slide 3 text

Ask me anything. RULE 2

Slide 4

Slide 4 text

We’ll have one break, but we can decide on needed breaks together. RULE 3

Slide 5

Slide 5 text

10:00 Introduction 10:15 Chapter 1: Building a basic WordPress theme 10:45 Chapter 2: Understanding WordPress theme building process 11:15 Break 11:30 Chapter 3: Let’s build a real WordPress theme 13:00 Q&A TODAY’S PLAN

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

— Let’s write a couple of posts and pages — Add images inside if you want — Add featured image to at least one post — Use read more on at least one post — Add excerpt to at least one post BEFORE WE START

Slide 10

Slide 10 text

I have a confession…

Slide 11

Slide 11 text

I am a designer, not a developer

Slide 12

Slide 12 text

WordPress Codex  https://codex.wordpress.org/ WordPress Theme Handbook  https://developer.wordpress.org/themes/ WordPress Code Reference  https://developer.wordpress.org/reference/

Slide 13

Slide 13 text

— Templates files (like page.php, header.php, footer.php etc.) exist within a theme and express how your site is displayed. — Page Templates are those that apply only to pages to change their look and feel. TERMINOLOGY

Slide 14

Slide 14 text

— Template Tags are built-in WordPress functions you can use inside a template file to retrieve and display data (such as the_title() and the_content()). — Template Hierarchy is the logic WordPress uses to decide which theme template file(s) to use, depending on the content being requested. TERMINOLOGY

Slide 15

Slide 15 text

Template Hierarchy!

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CHAPTER 1 BUILDING A BASIC  WORDPRESS THEME

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

— for every WordPress theme to work (so you can activate it), you’ll need only two files, really – just two files :) — index.php is where the code for theme goes — style.css is to give your theme some basic information like who is the author, what textdoman does it use etc. OUR BASIC THEME

Slide 21

Slide 21 text

/* Theme Name: My WordPress Theme Theme URI: https://www.yourwebsite.com/my-wordpress-theme Author: Your Name Author URI: https://www.yourwebsite.com Version: 1.0 Text Domain: mywptheme */ STYLE.CSS

Slide 22

Slide 22 text

INDEX.PHP

Slide 23

Slide 23 text

But our theme won’t have an image on “Themes” screen :’(  #sadunicorn

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

— To add screenshot to our theme, just save screenshot.png in your theme folder. Screenshot has to be 1200x900px PNG file ADDING A THEME SCREENSHOT

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Adding header and footer to our theme

Slide 28

Slide 28 text

— Use get_header() and get_footer() in your index.php ADDING HEADER AND FOOTER TO OUR THEME

Slide 29

Slide 29 text

INDEX.PHP

Slide 30

Slide 30 text

— get_header() and get_footer() will use the default code until we add our own header.php and footer.php files REMEMBER!

Slide 31

Slide 31 text

index.php header.php footer.php style.css screenshot.png FILES WE HAVE SO FAR

Slide 32

Slide 32 text

> > HEADER.PHP

Slide 33

Slide 33 text

Wait, no title tag? Let’s play with functions.php

Slide 34

Slide 34 text

FUNCTIONS.PHP

Slide 35

Slide 35 text

FOOTER.PHP

Slide 36

Slide 36 text

Coming up next: The Magnificent Loop

Slide 37

Slide 37 text

THE LOOP

Slide 38

Slide 38 text

— If there are any articles that needs to show on the page requested – show them — While there are articles to show, show them and then – continue with the next one THE LOOP EXPLAINED

Slide 39

Slide 39 text

INDEX.PHP

Slide 40

Slide 40 text

Why our loop doesn’t   do tricks?

Slide 41

Slide 41 text

USE THIS INSIDE THE LOOP TO GET TITLE AND CONTENT

Slide 42

Slide 42 text

— header.php is for showing page header code — footer.php is for showing page footer code REMEMBER!

Slide 43

Slide 43 text

— single.php is for showing single post — page.php is for showing single page — functions.php is used for our custom functions — sidebar.php is used to show sidebar widgets REMEMBER!

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

CHAPTER 2 UNDERSTANDING WORDPRESS THEME BUILDING PROCESS

Slide 47

Slide 47 text

SHOWING A POST

Slide 48

Slide 48 text

How to localize your theme?

Slide 49

Slide 49 text

// Support localization add_action('after_setup_theme', 'mywptheme_textdomain'); function mywptheme_textdomain(){ load_theme_textdomain('mywptheme', get_template_directory() . '/languages'); } IN YOUR FUNCTIONS.PHP

Slide 50

Slide 50 text

the_content( __('Read more','mywptheme') ); // or echo esc_html__( 'Text', 'mywptheme' ); // or _e( 'Jump to navigation', 'mywptheme' ); IN YOUR FILES

Slide 51

Slide 51 text

Using conditional tags

Slide 52

Slide 52 text

— is_front_page() – when the front of the site is displayed, whether it is posts or a Page. — is_single() – when a single post of any post type (except attachment and page post types) is being displayed. — is_single( ’17’ ) – when a single post with a specific ID is being displayed. CONDITIONAL TAGS

Slide 53

Slide 53 text

— is_page() – when any Page is being displayed. — is_page( ’17’ ) – when a Page with a specific ID is being displayed. — is_page_template( 'about.php' ) – when a Page Template 'about' is being used. CONDITIONAL TAGS

Slide 54

Slide 54 text

— is_author() – when any Author page is being displayed. — is_archive() – when any type of Archive page is being displayed. Category, Tag, other Taxonomy Term, custom post type archive, Author and Date- based pages are all types of Archives. — is_404() – when there’s an 404 error page. CONDITIONAL TAGS

Slide 55

Slide 55 text

— is_user_logged_in() – when any user is currently logged-in, any roles. CONDITIONAL TAGS

Slide 56

Slide 56 text

How to include template parts?

Slide 57

Slide 57 text

— get_header() – will include header.php. — get_footer() – will incude footer.php. — get_sidebar() – will incude sidebar.php. — get_search_form() – will incude search.php. INCLUDING HEADER, FOOTER, AND SIDEBAR

Slide 58

Slide 58 text

— get_template_part( ‘navigation’ ) – will include navigation.php template part. — get_template_part( ‘articles’, ‘archive’ ) – will include articles-archive.php template part. — get_template_part( ‘partials/navigation’ ) – will include navigation.php from the “partials” directory. INCLUDING TEMPLATE PARTS

Slide 59

Slide 59 text

Most used template tags that you should be aware of

Slide 60

Slide 60 text

— wp_head() – placeholder for all additional actions plugins or WordPress may use (like scripts, styles etc.). Use it! — wp_footer() – placeholder for all additional actions plugins or WordPress may use. Use it! — body_class() – display the classes for the body element. TAGS YOU SHOULD ALWAYS USE! LIKE, ALWAYS!! :)

Slide 61

Slide 61 text

— get_bloginfo() – retrieves information about the current site. — get_bloginfo( ‘name’ ) – site title. — get_bloginfo( ‘description’ ) – site tagline. — get_bloginfo( ‘url’ ) – the Site address (URL). TAGS USED TO SHOW BLOG INFORMATION

Slide 62

Slide 62 text

— get_home_url() – retrieves the URL where the front end is accessible. — get_site_url() – retrieves the URL where WordPress application files (e.g. the wp-admin/ folder) are accessible. — get_template_directory_uri() – retrieves theme directory URL. TAGS TO GET URLS

Slide 63

Slide 63 text

— wp_nav_menu( $args ) – displays a navigation menu for given arguments (keep in mind that you need to define a navigation menu in your functions.php for this to work). — wp_list_pages() – retrieve or display list of pages. — wp_list_categories() – display or retrieve the HTML list of categories. TAGS TO SHOW NAVIGATION

Slide 64

Slide 64 text

— the_title() – displays or returns the title of the current post. — the_excerpt() – displays the post excerpt. — the_content() – displays the post content. TAGS USED WITHIN THE LOOP

Slide 65

Slide 65 text

— the_permalink() – displays the URL for the permalink to the post. — the_category() – displays a link to the category or categories a post belongs to. — the_tags() – displays a link to the tag or tags a post belongs to. TAGS USED WITHIN THE LOOP

Slide 66

Slide 66 text

— the_date() – Displays or returns the date of a post, or a set of posts if published on the same day. — get_the_date() – retrieves the date the current post was written. Will always return the date. TAGS USED WITHIN THE LOOP

Slide 67

Slide 67 text

Adding featured images   to your theme

Slide 68

Slide 68 text

if ( function_exists( 'add_theme_support' ) ) { // Add support for featured images first add_theme_support( 'post-thumbnails' ); // Add a post thumbnail size for ‘article photo’, hard crop add_image_size( ‘article-photo', 1200, 600, true ); } FUNCTIONS.PHP

Slide 69

Slide 69 text

if ( has_post_thumbnail() ) { // We want to show our custom defined size the_post_thumbnail( ‘article-photo' ); } WITHIN THE LOOP

Slide 70

Slide 70 text

Using custom queries

Slide 71

Slide 71 text

'3', ); $query = new WP_Query($query); ?> have_posts()) : ?> have_posts()) : $query->the_post(); ?> CUSTOM WORDPRESS QUERY

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Conditional tags  https://codex.wordpress.org/Conditional_Tags Template Tags  https://codex.wordpress.org/Template_Tags StackOverﬂow: WordPress (100k+)  http://stackoverflow.com/questions/tagged/wordpress StackExchange: WordPress (70k+)  http://wordpress.stackexchange.com/questions