How to Put Together a Mobile First, Performance Orientated WordPress Theme [Part 1] In its core, putting together a WordPress theme is a rather simple task. WordPress delivers a really friendly environment and makes it clear which PHP functions to use for what purpose along the way. However. Even though it’s simple, it’s far from easy, and especially if you want your theme to be mobile-optimized. There’s a range of unique issues that you ought to overcome if you want to end up with a quality product that loads fast, operates in a predictable way, and (what’s the most important thing) is user-friendly and accessible to people using different devices and screen sizes.
This two-part guide will walk you through the process in 10 steps, listing the most important things to take care of when building a mobile first, performance orientated WordPress theme. For part 2, see here: How to Put Together a Mobile First, Performance Orientated WordPress Theme [Part 2] 1. Things worth doing: 2. Image optimization is even more important for mobile than for any other scenario. 3. 4. 5. A Quick and Dirty Guide to Post Type Templates in WordPress 4.7.
WordPress 4.7 has delivered some fantastic new enhancements to the CMS’s template system. Templates have now been expanded to include all post types, allowing developers to create more nuanced themes and at the same time allowing site owners to manage content more easily. But how does it all work? In this article, I’ll show you how to use post type templates in your themes with a few easy examples.
So What are Templates in WordPress? Templates are essentially special files that can change the look and feel of a page and/or add functionality to your WordPress website. Prior to WordPress 4.7 templates were only available for pages, thus they were dubbed page templates. Once templates are registered in the theme, they can be selected on single post edit pages. Laying the Groundwork for Using Templates Let’s work on an example. To test this out we should create a child theme first.
To get started, create a new folder in your theme directory. All set! Creating a Custom Post Type Creating Templates. Toolset - Develop WordPress Sites with No Coding. Troubleshooting White Screen of Death Errors in WordPress. Sometimes WordPress just stops working. When you visit your site you’re met with is a stark white page and nothing else. It’s aptly referred to as the “white screen of death.” It can be extremely frustrating and problematic ,to say the least, especially when you don’t see and PHP errors listed to tip you off as to the cause of the error.
You could guess what the problem is, but that could take too long. In this Weekend WordPress Project, we’ll take a look at the troubleshooting process for white screen errors, which includes a bit of coding or using plugins. Troubleshooting with Coding Your wp-config.php file in the root of your WordPress install is the key to figuring out what the problem is with your site. If you would like the full details on debugging your site, take a look at our post Debugging WordPress: How to Use WP_DEBUG. Turning on debug mode will effectively display the list of current errors. Place it above the line in the example below: Troubleshooting with a Plugin Conclusion. Debugging in WordPress. Languages: English • Español • Français • Hrvatski • Italiano • 日本語 • Português do Brasil • (Add your language) Debugging PHP code is part of any project, but WordPress comes with specific debug systems designed to simplify the process as well as standardize code across the core, plugins and themes.
This page describes the various debugging tools in WordPress and how to be more productive in your coding as well as increasing the overall quality and interoperativity of your code. NOTE: While it is not mandatory to account for WP_DEBUG in plugins and themes it is highly recommended that plugin and theme developers use WP_DEBUG mode while working on code they plan to release publicly.
If your plugin or theme is not compatible then the errors, notices and warnings it throws will make it impossible for other developers to use your plugin/theme while they have WP_DEBUG enabled and your theme will not be eligible for promotion via the official WordPress tools. PHP Errors, Warnings, and Notices. Query Monitor — WordPress Plugins. Query Monitor is a debugging plugin for anyone developing with WordPress. It has some advanced features not available in other debugging plugins, including debugging of AJAX calls, REST API requests, redirects, and the ability to narrow down its output by plugin or theme. For complete information, please see Query Monitor's GitHub repo. Here's an overview of what's shown: Database Queries Shows all database queries performed on the current requestShows affected rows and time for all queriesShows notifications for slow queries, duplicate queries, and queries with errorsFilter queries by query type (SELECT, UPDATE, DELETE, etc)Filter queries by component (WordPress core, Plugin X, Plugin Y, theme)Filter queries by calling functionView aggregate query information grouped by component, calling function, and typeSuper advanced: Supports multiple instances of wpdb on one page (more info in the FAQ) Hooks Theme PHP Errors Request Rewrite Rules Shows all matching rewrite rules for the current request.
Developer. Debug Bar. Log Viewer — WordPress Plugins. ** The plugin is recommended to use only in development. ** This plugin provides an easy way to view any *.log files directly in admin panel. Also you can perform simple actions like empty the file or deleting it. To activate WordPress logging to file you have to set define( 'WP_DEBUG_LOG', true ); in your wp-config.php file. In Multisite installations you have to be Super Admin for using this plugin. There is an first integration for a panel to the Debug Bar Plugin. If you're experiencing problems please report through support forum or check FAQ section. Known limitations / Bugs: Autorefresh is currently fixed at 15 seconds if enabled - will let you choose custom timing soonafter an action in files view a wp_redirect should be called but there's already output present so not working.
ToDo: Adding Dashboard functionality ( and/or File View in Dashboard menu (WP_NETWORK_ADMIN) )Translations ( DE )Cleanup on uninstallingMessage if WP_DEBUG not set ( on activation? Using The WordPress Debug Log. Do you ever make mistakes? I do. The first step to fixing your mistakes is knowing what the mistake is. I can’t solve all of your problems, but I can help fix those that are generated by PHP code on your WordPress site by helping you work with debug logs. A few weeks ago, when I wrote about customizing your WordPress site’s wp-config.php file, I covered settings for debugging. I covered both how to show errors, and when you might not want to do that.
While enabling WP_DEBUG, as I described in that article is important in development, you may have some non-fatal errors and warnings that you can’t avoid for whatever reason that you don’t want to displayed to all of your visitors. For these reasons, on a live site, its a good idea to leave WP_DEBUG enabled, but to prevent errors from being displayed. Logging errors, even when you’re displaying them is still useful as having a record of your errors is often very useful in development.
Setting Up Viewing Your Debug Log All Kids Love Log. Turn on WordPress' WP_DEBUG_LOG but without E_STRICT. Accompanying blog post: Leveraging Chrome Developer Tools for WordPress Development. One of the most common questions I see in forums, and when talking to people one-on-one is “how do you know?” How do you know what style rules a specific element has? How do you know exactly what classes are applied to it? How can you tell that the script isn’t loading properly? There are JavaScript errors?
My answer is Chrome Developer Tools! In this article we take a look at Chrome’s Developer Tools, but the general idea can be applied to all large browsers. If you have Chrome open, go to View > Developer > Developer Tools or press Command + Shift + C on your Mac or Control + Shift + C on Windows to bring up the developer tools. Inspecting Elements The foundation of any HTML/CSS information is the Elements section and the Element Inspector. By default the inspector will be turned on. The inspector allows you to hover over an element on the page and click to select it. One trick I like is that you can copy/edit/delete nodes.
Working With CSS Element Style Overview View and Add Rules. WordPress hooks database - action and filter hooks for wp plugin developers -- Adam Brown, BYU Political Science. What is a hook? In brief, WordPress hooks enable you to change how WordPress behaves without editing any core files. Because you leave the WordPress files untouched, you can painlessly upgrade your blog with each new version of WordPress. It's this hooks architecture that makes WordPress the best blogging solution. If you don't know what WordPress hooks are for, read the Plugin API or this tutorial. If you're new to web design, you might also enjoy my easy PHP tutorial. What is this directory? If you're a plugin or theme developer, you know how difficult it can be to figure out which hooks are available. What is this good for? See what new hooks are available with each new version of WordPress See which hooks have been deprecated or renamed (use the "view all hooks" option) Easily learn exactly which WP file(s) use each hook.
How to help? Update and improve the official action and filter references. A Walkthrough on Conditional Tags in WordPress: Introduction - Tuts+ Code Tutorial. One of the most important strengths of WordPress is the extensibility of the core. With plugins and themes, WordPress users have been able to mold their websites for almost a decade. (WordPress was first released in 2003, but plugins were introduced in 2004 and themes were introduced in 2005.) And to create such a solid infrastructure, WordPress includes lots of handy sub-systems (functions, classes or whole APIs). One of them is "Conditional Tags", which allow our code to function differently in particular situations. In this series, we're going to learn about these Conditional Tags. Let's begin! In the Codex, Conditional Tags are described like this: The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches.
Your Code: Hey man, I need some help. Let's have a quick example of how a Conditional Tag works: Get it? See what we did? See you in the next part!