Build Your Own Theme and Customizing Child Themes

Transcription

1 Build Your Own Theme and Customizing Child Themes Prerequisite Skills You will be better equipped to work through this lesson if you have experience in and familiarity with: Spent some time in the admin section of WordPress Basic knowledge of installing and activating WordPress themes Basic knowledge of HTML, CSS Twenty Thirteen theme - easy theme to use and modify. Find in the WP Themes Library. Screening Questions Are you familiar with installing and activating themes via the WordPress Dashboard? Will you have a locally or remotely hosted sandbox WordPress site to use during class? Do you have a code editor to view PHP, HTML, CSS, and other files? Are You Serious about WordPress? Websites WPBeginner Books: Digging into WordPress WordPress Themes in Depth LearnPub.com - Search wordpress 1

2 WordPress Anatomy The Structure of the Installation Files The only folder you will ever use is wp-content. Everything else is considered wp-core files. Any editing or deleting of any other wp-core files could break your site. A reinstall will be inevitable. Backups are your friend. The exception is the wp-config.php file and the.htaccess files. Both can have custom content to extend WordPress. 2

3 Inside wp-content The index.php file inside the wp-content folder should not be deleted or edited. Also the upgrade folder should not be touched. The plugins folder holds all the plugins installed. Deleting a named plugins folder inside will only be used in the case of a problem where you may have to manually install, rename or delete conflicting plugins. The themes folder is where you will spend most of your time whether you are creating your own theme from scratch or creating a child theme that will override/customize the parent theme. Themes as well as plugins can be added or deleted from their respective folders manually. But please use the Admin Dashboard for simple installation. Default themes folder from installation. Twentyseventeen activated automatically as of Up and Running You will need a database to store the content of your site: posts, pages, plugin settings, and site options. The database is the most import part of your Wordpress site. If the database is not connecting properly your site will not work. Even if you had a server 3

4 meltdown and have a backup copy of the database you would be okay. Remember backups are your friends! Local Server Environment with a database MAMP There are many software tools to choose from. The best I have come across that works across both Mac and Windows well is Mamp. It is free and has a Pro version. MAMP TV videos on YouTube - Both OS YouTube videos from Quentin Watt Tutorials Mac installation video: Windows installation video: phpmyadmin is a companion application that comes with Mamp and helps you create and manage databases 4

5 Tools of the Trade Code Editor If you are wanting to customize WordPress you are going to have to get your hands dirty in some code. Here are some code editors to mention: Mac and PC: Atom, FREE - Brackets, FREE - Visual Studio Code, FREE - 5

6 Anatomy of a Theme Every Theme is Different Themes are built differently in style and in the way they function, from simple to complex. But there are files that are needed to make WordPress recognize it as a theme: index.php style.css Then this is where things can get confusing - the Theme Hierarchy - developer.wordpress.org/themes/basics/template-hierarchy/ Which files come first is based on certain factors. The easy way to try and wrap you head around this is Is there a situation where you need to override a file and do something different? Then you need to create another file that WordPress is looking for to do that. What are good themes? Themes that are listed in Wordpress Theme library have gone through tests and guidelines before they are put in the library. If you need to testa 3rd party theme downloaded outside of the WP theme library go to Theme Check themecheck.org/ type in the name to see if it has been already submitted or if you can get the.zip file, upload it to check it s score. A good idea is to check the names of themes that are featured in articles highlighting FREE themes. The Secret of WordPress Everything is a post, just a different type of post. A Page is just a post type. Don t get it stuck in your head that a page and a post are different things. The Loop is used to get Posts that are of the post-type of Page 6

7 7

8 8

9 The Fallback The ultimate fallback in a theme is the index.php. If no file WordPress is looking for is found - index.php will serve up the page. Sometimes this will be fine, other times you want to make an override file to make it look or act differently. This is where Page Templates enter to do the override. Page 6 is the watered down version and page 7 is the Official WordPress version. Sooner or later what you are looking at will make sense but probably not today. Keep them as reference. :) The Hierarchy on page 7 is a bit more detailed in the flow of what WordPress is actually looking for. The Page Structure A simple WordPress web page structure is made up of 3 basic building blocks : header, content and footer. Each one of the blocks is calling in information from other files or data from the database. There is another common block called the sidebar that deals with widgets. That is for another class. :) 9

10 header.php - The header file contains all the information that needs to be at the top of every webpage Hey wait a minute? What is the PHP code doing in there? So glad you asked The PHP tags are dynamically injecting information into the page. 1. Normal HTML doctype - document type 2. Helps browsers know what language the content is in and this is set when WP is installed. Helpful when you set your site to multilingual. 3. Starting HTML head tag 4. This line tells the (character set) or charset to the browser, avoiding unknown characters for security purposes! 5. This tag removes/resets any default zoom of a mobile device like ipad and iphone, very useful if you are working on a responsive layout. 6. Injecting the Blog Name 7. This is a very important function, you MUST call this function! Through this function, WordPress adds code from plugins, other JavaScript libraries, CSS, and much more. 8. Ending HTML head tag 9. This line dynamically injects css classes about the page that is being called by the template hierarchy. Pretty cool! 10

11 Just a little PHP - Files need to end in.php - All PHP code must start with <?php and end with?> that is mingled within HTML. If the entire page is PHP, you do not have to use the closing tag. Anatomy of a WordPress function A WordPress or template function is a PHP function that performs an action or displays information specific to your blog. the_id(); - displays the ID number for a blog entry or post. To use it in your code: <?php the_id();?> Functions come along with parameters or information you can pass through to the function to get something more than just the default function will return. <?php bloginfo('name');?> The name parameter displays the Site Title set in Settings > General or a.k.a. the name of your site. There are 20 other parameters you can use to get other information. This is just one example of a template tag. Have fun with them all: Template_Tags. Some you might never use and some you will use frequently. On to the cheatsheet 11

12 Wordpress Beginner Cheat Sheet This is NOT the entire Template tag list. This is: Template_Tags These tags will get you started: <?php get_header();?> Includes the header.php file <?php get_footer();?> Includes the footer.php file <?php get_sidebar();?> Includes the sidebar.php file <?php the_content();?> Displays the content of a post <?php the_excerpt();?> Displays the excerpt used in posts <?php the_title();?> Title of the specific post <?php the_permalink()?> Link of a specific post <?php the_category(', ')?> Category of a specific post <?php the_author();?> Author of a specific post <?php the_id();?> ID of a specific post <?php wp_list_pages();?> Lists all pages <?php wp_list_cats();?> Lists all categories <?php site_url();?> The root URL for your site <?php bloginfo('description');?> Displays the tagline of your blog as set in Settings > General <?php bloginfo('name');?> The title of your site, or blog name <?php bloginfo('url');?> Your site s URL <?php bloginfo('stylesheet_url');?> Link to your themes s stylesheet file 12

13 Some of the files of WordPress index.php - Home The index file controls what the homepage of your site looks like. By default WP sets the Front Page to display the latest posts. front-page overrides this page when set to a static page. single.php - individual posts The loop of this page queries just one post and displays it. You can specify sidebars and which ones you want to display. page.php - individual pages This file controls what pages look like.you can choose to eliminate sidebars or other elements and add unique elements for pages alone. The Loop It starts with a query (which determines which posts or pages grab)and ends with a PHP end while statement. Everything in-between is up o you. You can even use multiple loops and queries on a single page. functions.php Allows you to put your own custom PHP code in order to modify core elements of you theme. style.css This is the main stylesheet for your theme. it is enqueued in the functions.php file along with other external stylesheets and javascript files such as Bootstrap. The top of the style.css file contains commented text at the top that tells WP the name, author and other information about your theme. Abbreviated from 13

14 Creating a Parent or Child Theme So which do you want to create? Both have the same process and you will be getting your hands dirty in code. Creating a parent theme from scratch is a little more messy than creating a child theme. The child theme pulls from the parents functionality, and you are just making the changes you want to make in the CSS, content and functions. Wordpress is documented so well that you really do not need to know PHP, but you will be writing it. You will be writing a lot of Template Tags. A template tag is code that instructs WordPress to "do" or "get" something. We will get to that a little later Starting a Child Theme - Go to the themes Appearance > Themes > Add New library and install the twentythirteen theme and press Activate. - Create the child theme folder. Inside the wp-content > themes folder where you see the 4 folders - Make a new folder called twentythirteen-child 14

15 - Inside the twentythirteen-child theme folder, create a style.css file Getting WP to Recognize a Theme It might be a bit strange, but the theme recognition happens in the style.css file. Commented code with specific titles are read by WP. You do not have to use them all just a few to get us started will do for now. /* Theme Name: Twenty Thirteen Child Author: Your Name Here Description: My Child theme for TwentyThirteen Version: 1.0 Template: twentythirteen */ The most important line is Template: twentythirteen This calls the parent theme. Now go back to Apprearance > Themes and see if your child theme was recognized. Yeah it is not much. There is not screenshot image to represent it yet but WP is happy. 15

16 If you do want a screen shot, make the image 1200px wide and 900px tall. Name it screenshot with a.png image file format and drop it in the root of the theme folder, in this case twentyfifteen-child. Click to see your Theme Details: Now Activate your theme and go take a look at it Um, yeah so our child theme (the first screen capture) is kinda broken. The fonts don t match. Let s fix that. To do that we need to connect the parent stylesheet and a child theme stylesheet to make our custom changes. Roll up your sleeves, we are going to write some code. 16

17 Connecting the Parent and Child Stylesheets Put your seatbelt on, we are going to write some code that might not make sense for a while. Never fear, there is WordPress s documentation out there for you. Digging into Wordpress website Including stylesheets in the past use to be easy. But the folks at WP found a better and faster way to call in CSS and JS files. Now, the recommended way is to enqueue both script and styles. To do this you need to create a functions.php file in your child theme folder. The functions.php file is used to add or change the functionality of WP. And use the following code in it <?php function mychild_enqueue_styles() { // enqueue parent styles wp_enqueue_style('parent-theme', get_template_directory_uri().'/ style.css'); // enqueue child styles wp_enqueue_style('child-theme', get_stylesheet_directory_uri().'/ style.css', array('parent-theme')); } add_action('wp_enqueue_scripts', 'mychild_enqueue_styles'); The // means it is a commented line and will not show up in the code. Those lines are just commented notes to help tell you what is going on. 17

18 Creating index.php The Loop - The Power to Control WordPress In your theme folder, in the same place as your functions.php, create a index.php file. Since this is the child theme, all overriding files will go into the child theme folder. Makes since right? Inside the index.php file, place this code: 1 <?php get_header();?> 2 <?php if ( have_posts( ) ) :?> 3 <?php while ( have_posts() ) : the_post();?> 4 <?php the_title();?> 5 <?php the_content();?> 6 <?php endwhile;?> 7 <?php else :?> 8 <?php _e( 'Content not found');?> 9 <?php endif;?> 10 <?php get_footer();?> Line 1 gets the header.php file. Line 2 checks to see if there are any posts to get. if it finds them it continues to line 3, 4, 5, 6, 9 and 10. If there are no post found it skips to line 7, 8, 9 and 10. More info on the loop:

19 Remember that all the data about your site resides in a database. We have to talk in a language that is a go-between to get the data out and onto the page. The loop talks the right words to see if there is data and loops through it all and then stop and do other tasks. Line 7 is only there to let something be on the page if no data is found. Otherwise, we get a blank screen since nothing comes back. _e ('Content not found'); is the fallback if the loop does not find any data. It simply echoes or outputs data to the screen. You may see it written this way as well: echo ( 'Content not found'); Let s take a look at what we have Wow, our Child theme looks exactly like the Parent except The text of the Hello Word post is smashed all the way to the left. Not Cool. Here is where we start copying the code of the parent theme more closely and making our own tweaks. Yes, we can do that!! The next question is why we do that. So the fine folks at Automatic - parent company of WP, make changes and code updates to their themes in the theme library. Just as all good theme authors should. Well, if you start customizing the parent theme and you bling bling it up just the way you like it, and an update is available, and you hit the update button POOF!! all the changes you made are reset to the original theme style. Aw SNAP!! This is why we create child themes - take the style and functionality of the parent - separate it off into its own container and make our changes. The child will inherit all the functionality and style but still be able to make changes without touching the parent - sort of passing on the genes in a new person. So ultimately you can copy the files from the parent into the child theme and customize it exactly the way you want. That s the secret! if something breaks, never fret! Just grab a copy of the parent file and try again. 19

20 The Home Page Option Do you want a blog or a static page on the home page? In the WordPress admin in the Settings > Reading you have an option: Your latest posts means you will have the header, footer and loop through your posts on the front page or home page of your site. If you downloaded a theme you are at the mercy of the theme developer on how they built the site in order to make changes. So you want to completely customize the content on your front page, and designate a page for the blog page. No problem. Choose A static page. By default, the WP installation comes already set to the blog being the front page/home page. Back in the day, WP was just a blogging platform, so they have just added features you can change to. So let s fix that smashed to left content of the Hello World post. By digging into the code of the parent theme, there is a <div class="entry-content"></div> that centers the content in the middle of the page. Put the opening div tag with the class in-between lines 1 and 2, and put the closing div tag between lines 9 and 10 to look like this: 20

21 Checking back with our code the content is now nicely centered, but it could be a bit wider. So hop on into the CSS file of the the child theme and override the.entrycontent class like this: save the CSS file and got back to the browser and refresh the page to see the content move slightly to the left - in essence getting wider. If you check the Parent code for the same class it is set to max-width: 604px CONGRATULATIONS you just made a customized change! Now let s move on to creating a completely customized front-page. 21

22 Setting a Customized Front-Page You must have already created the Home and Blog pages and published them before this step in order to save the static page as a setting. Go to Pages Create a page called Home and Blog and leave the content of the pages empty. After setting the Front Page to a static page, WP is looking for a page called frontpage.php A wonderful plugin ACF can extend and add more fields to the admin of a page. 22

23 So back to creating pages create front-page.php and place the template tags for the header and footer in there. Sneek a peek at the cheat sheet if you need to. In between the tags place the following code: <h2><?php the_title();?></h2> <h4>this is static text before the content</h4> <p><?php the _content();?> So you are probably a little lost as to WHY we had to name this page front-page.php. Well so glad you asked, because all pages have a designated template page.php file to render all pages. Wordpress has a template for the front page to override the standard page.php. But you have not created that page.php yet, and that is right. When the time comes to do that you don t have to worry about the front page, it will not change. If a small lightbulb just came on for you - take a another look at the Template Hierarchy. Custom Templates A New Look So as you have tried to make sense of the Template Hierarchy there are designated pages for designated processes of WP. You now know that to over ride index.php and page.php to have a custom static front page you use front-page.php. So any other page you create in the pages section like Services, About, Products etc will be using the page.php file and then falling back to index.php if page.php is not found. So if you want to customize a page and break out of the same file with a different design - you can so do that! So let s say you want to override the Contact page with a new design rather than the one that WP will choose by default Yep page.php. So the second override would be page-contact.php. By naming the file with page- and then the page slug name contact in this case, WP would completely understand that and serve it up rather then the page.php. We would have a different contact page. 23

24 The Ultimate Take Over Want to over ride that a third time. Sure not problem. Say that you have a spring contact page for a special registration for a limited time. This time you will need to organize your templates. Create a folder called templates in your child theme. Create a file inside your templates folder called spring-contact.php At the top of spring-contact.php place the following commented text inside a php tag: <?php /* * Template Name: Spring Contact */?> Then add the header and footer passing through a parameter of spring for both. <?php get_header('spring');?> <!-- Custom HTML Code Here --> <?php get_footer('spring');?> This parameter is looking for header-spring.php and footer-spring.php so this spring contact page can look very different from the rest of the site if you choose. Wordpress is smart and is looking for files with the Template Name: in commented text. When it finds one it will open up an extra option in the Page Attributes section: 24

25 Resources Useful Cheatsheets Wordpress Template Designer CheatSheet 25