Words on WordPress

When I say “Dev Tools” in an email or when talking to someone in person, what I mean are Developer Tools, which are utilities that are a part of web browsers. These tools allow one to look at the code behind a website, including the HTML, CSS and Javascript. They’re called Developer Tools because they can be used to both develop websites and to fix bugs and issues in sites.

Dev tools are incredibly useful and save lots of time, because one of the functions of dev tools is that they allow you to change CSS on the fly and see the changes right in the browser. And dev tools contain a console that will show you Javascript errors, too. You can test the network speed of a site, look for missing images and other 404 errors, test the site by with different user agents (desktop or mobile), and on and on. Dev tools are really the first place to start with troubleshooting an issue with any website, and for any novice or anyone first getting into development, learning dev tools is a very good place to start.

In relation to WordPress, I use dev tools to work with themes and CSS. I can tweak CSS right in the browser, see how the changes work, and if I want to make them permanent, I edit the theme’s CSS file. I reload the site in the browser and check the changes, and keep working. Dev tools are also very handy to look at a site I’ve been asked to work on. The tools will show me Javascript errors, other code errors and give me some idea of the work involved. Dev tools are really the first place to look, along with running the site through the W3C Code Validator at The W3C Markup Validation Service (more on that in another post).

I mostly use Safari as a web browser, so I use the dev tools available in Safari. If you use Safari don’t already use dev tools or have a menu item titled “Developer” in the top Safari menu bar, enable them this way: go to your Preferences (Safari menu >> Preferences) and then go to the “Advanced” tab and at the bottom tick the box that says “Show Develop menu in menu bar.” That will give you a new menu item. On any website, pull down to “Show Web Inspector.” That will open up a new window in the bottom half of the browser and give you tabs and screens of everything that is happening on the web page.

Dev tools window open on the home page of https://markratledge.com

Dive in and play around with dev tools on a site. See what the different tabs show you. Change some CSS in the elements and look for the changes. Look at the scripts that have loaded. You can’t break a site because what you’re doing is changing the website only in your browser and not on the server.

Think of dev tools as a huge tool box that you can use on the engine of a car while it runs, knowing that you can’t break anything or bust your knuckles. The best way to learn is to jump in. See Apple for more information on Safari’s Developer Tools: Safari’s Developer Tools.

I also use Firefox sometimes, and Firebug is a great plugin that provides dev tools. Firebug was about the first implementation of dev tools for browsers, before Safari and IE. Get Firebug here and install it. For Chrome, dev tools are built in, like Safari. See Chrome DevTools — Google Developers. And if you use Internet Explorer, you can usually press F12 to get to dev tools. See the Microsoft Developer Article How to use F12 Developer Tools to Debug your Webpages.

If you do much with WordPress, you will discover the need to create page templates at some point. Page templates are theme files that produce the layouts for pages, posts, custom post types, category pages, and more. In this context, “page” means more that just a page: it means a file template that helps to show any content in a theme.

When do you need page templates? All the time, really. Any WordPress theme will have page templates included in it: for the index page, for a single post, for a single page, etc. If you are happy with the way a theme displays content, you won’t need any new templates and can do all the changes you need in the style sheet in the theme, i.e. style.css file in the theme folder. (Remember to make a Child Theme Child Theme rather than edit the original theme itself.)

But you may decide you want have a page that doesn’t show the time and date, or one that doesn’t show the author’s name, or maybe a page without a sidebar. This is where page templates come in; you can make a page template with or without features and html, and select that template in the page editor to be used by that page.

The wordpress.org documents are helpful to see how Page Templates work in terms of where they go in a theme folder, the hierarchy of how they are processed, and much more. But you may not need to know all those details. If you just need a page template for a specific thing, templates are easy to make and use.

First, you need to look at page templates as they exist in your current theme. Themes from the wordpress.org theme directory must follow some standards for theme architecture and PHP code, while page templates for frameworks such as Genesis can be very different in format and code.

All page templates will show something like this in the header of the file, which is a block of commented text along with the name of the template:

 
<?php
/**
 * Template Name: One column, no sidebar
 *
 * A custom page template without sidebar.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
 
get_header(); ?>

The text that is in between the /** and the */ are comments and notes for users like you and me and the notes are not processed as programming or PHP code. The get_header(); ?> is PHP code and is processed. The “Template Name: One column, no sidebar” is what appears in the Page Attributes meta box in your page editor.

If you had a page template for a page you wanted called My Custom Page, then you’d copy the page template file above and name the new file something like page-my-custom-template.php. And change the name in the file header to “My Custom Page”, and this would appear in Page Attributes meta box when you select that template for use by a page, as in this image on the right:

And now, of course, you need to change the code in your new page template to match what you want it to do.

And, don’t forget the cardinal rule of editing themes: if you need to add a page template or otherwise edit a theme, make a child theme. See my other Words on WordPress post on Creating a Child Theme