Step by Step for Editing Premium Whmcs Theme Upload

April 15, 2022 Post a Comment

Learning to create custom WordPress themes opens up a whole new world for yous to explore. It allows you lot to build custom designs for yourself, your clients and even contribute back to the open-source community.

In this guide, we're going to take you from zero to having a fully functional theme that can exist submitted to the WordPress.org theme directory.

To follow along you will need a bones understanding of HTML, CSS, PHP, and how WordPress works.

All the code used in this guide will be available for reference in this Github repository.

Tabular array of Contents:

Creating essential files for your custom theme
Create functions.php
Add template parts
Add atypical.php, archive.php, search.php, and 404.php
Ancillary files
Create folio templates
Make your theme compatible with RTL.css
Ever follow best practices
Distribute your WordPress theme
Test and amend code

Step #1: Creating Essential Files for Your Custom Theme

A functioning WordPress theme tin consist of just 2 files: manner.css and index.php. This is possible because of WordPress's template hierarchy.

When WordPress outputs a webpage it searches for the nigh specific template bachelor, if a template doesn't exist information technology will move down the hierarchy until it finds ane that does. Hither's a practical case:

The user is on https://example.com/practical-case, which is a page. WordPress volition try to locate a template in this order:

1. - page-{slug}.php – The page slug is /practical-example, WordPress will look to use your-theme/page-practical-case.php
  - page-{id}.php – The page ID is 42, WordPress will expect to utilise your-theme/page-42.php.
  - page.php – WordPress will try the general-purpose your-theme/page.php template.
  - atypical.php – The singular template can render Posts and Pages, so it's tried afterward the more specific page.php
  - index.php – Lastly your-theme/alphabetize.php is used if no other template is found.

Allow's start by building a theme with just the essential files and then we can layer on more features equally we explore how they work.

In /wp-content/themes/, create a folder named my-custom-theme and create these two following files:

style.css

For WordPress to recognize our theme and output it properly in the Advent → Themes list we need to place some WordPress-specific code at the top of fashion.css, information technology looks like this:

/* Theme Name: My Custom Theme Theme URI: https://yourwebsite.com/theme Author: Your Name Author URI: https://yourwebsite.com Description: This is my first custom theme! Version: 1.0.0 License: GNU General Public License v2 or afterwards License URI: <https://world wide web.gnu.org/licenses/gpl-2.0.html> Text Domain: my-custom-theme Tags: custom-background */

Technically none of the fields are required, but if yous want your theme to wait proficient in wp-admin and so they are highly encouraged. They are also required if you lot are distributing your theme on WordPress.

1. - Theme Name – You should always supply a theme proper name. If yous don't and so the folder name will exist used, my-custom-theme in our instance.
  - Theme URI – If used, the theme URI should provide a link to a page where visitors tin can acquire more about the theme.
  - Author – Your name goes here.
  - Author URI – A link to your personal or concern website can be placed here.
  - Description – The description is shown on the wp-admin theme modal and also on the WordPress theme listing.
  - Version – Version numbers help developers keep track of changes and let users know if they are using the latest version. We follow the SemVer numbering arrangement to denote the severity of changes in an update.
  - License – How y'all license your theme is up to you, but if you choose a not-GPL-compatible license then you lot won't be able to distribute your theme on WordPress.
  - License URI – This is simply a link to the license listed above.
  - Text Domain – The text domain is used when translating your theme into other languages. Don't worry nosotros volition explore this in-depth later. For at present, information technology's plenty to know that it'south a proficient practise for the theme binder and the text-domain to be the theme proper noun separated past hyphens instead of spaces.
  - Tags – Tags are only used if you lot are uploading your theme to the WordPress.org theme directory. They are the basis of the 'Characteristic Filter' machinery.

Copy and paste the above into style.css and y'all will have something like this:

Note: It looks a fiddling blank at the moment as we don't have a screenshot yet. Nosotros volition add that later on.

index.php

index.php is the only other strictly required file. Its job is to render all the front-stop output for our theme.

Since index.php is going to be rendering all of our pages (home, posts, categories, archives) it's going to be doing a lot of work. To start nosotros need a head section that will cover the HTML basics.

<!DOCTYPE html> <html <?php language_attributes(); ?>>   <head>     <meta charset="<?php bloginfo( 'charset' ); ?>">     <meta name="viewport" content="width=device-width, initial-scale=i">     <link rel="profile" href="https://gmpg.org/xfn/11">     <?php wp_head(); ?>   </head>

This is standard HTML with one exception, [wp_head()](<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head is a core function that allows WordPress and third-party plugins to insert lawmaking into the header without modifying your template files. This is called an activity hook.

If you are familiar with HTML you may notice at that place isn't a <championship> tag to output the page title. That'due south because WordPress can use the wp_head hook to dynamically insert the championship.

Another employ of wp_head is to enqueue styles (.css) and scripts (.js). There are very skillful reasons for doing this instead of hardcoding them, which we volition look at afterwards on.

Next, we have the body of the page:

<body <?php body_class(); ?>>

body_class() is a helper role provided past WordPress that will output a list of useful CSS classes which describe the page existence displayed such as:

            grade="page page-id-2 folio-parent page-template-default logged-in"

body_class(); also accepts a parameter so you can add your own classes, for instance:

<body <?php body_class( 'wide-template blueish-bg' ); ?>>

Adjacent, we accept the template header.

<header class="site-header"> 	<p class="site-title"> 		<a href="<?php repeat esc_url( home_url( '/' ) ); ?>"> 			<?php bloginfo( 'name' ); ?> 		</a> 	</p> 	<p class="site-clarification"><?php bloginfo( 'description' ); ?></p> </header><! – .site-header – >

Here we are using WordPress' built-in template functions to output the Site Title and Description. We've too used a helper office, home_url(), to link the Site Championship dorsum to the homepage.

Side by side upward, the body of the page:

<div class="site-content"> 	<?php 	if ( have_posts() ) : 	 		while ( have_posts() ) : 	 			the_post(); 			?> 	 			<article <?php post_class(); ?>> 			 				<header class="entry-header"> 					<?php the_title( '<h1 course="entry-title">', '</h1>' ); ?> 				</header><! – .entry-header – > 			 				<div class="entry-content"> 					<?php the_content( esc_html__( 'Go on reading &rarr;', 'my-custom-theme' ) ); ?> 				</div><! – .entry-content – > 			 			</article><! – #post-## – > 			 			<?php 			// If comments are open or we have at least one comment, load up the comment template. 			if ( comments_open() || get_comments_number() ) : 				comments_template(); 			endif; 	 		endwhile; 	 	else : 		?> 		<commodity class="no-results"> 			 			<header course="entry-header"> 				<h1 class="page-title"><?php esc_html_e( 'Aught Found', 'my-custom-theme' ); ?></h1> 			</header><! – .entry-header – > 		 			<div class="entry-content"> 				<p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> 			</div><! – .entry-content – > 		 		</article><! – .no-results – > 	<?php 	endif; 	?> </div><! – .site-content – >

This is where information technology gets interesting (and a bit more circuitous). Here we are using the well-nigh important feature of WordPress, the Loop. The loop does the hard piece of work of figuring out which folio the user is on and what should be shown. It then returns a listing of ane or more 'posts' that nosotros tin loop through and output data using template functions.

If the Loop doesn't return any results, for case on a 404 page or deleted post, nosotros use an else operator to show a predefined message.

Without whatever of the surrounding lawmaking, a simplified loop looks similar this:

if ( have_posts() ) : // check if the loop has returned any posts.  	while ( have_posts() ) : // loop through each returned postal service. 		the_post(); // gear up the content so we can use template tags like the_title(). 		the_title(); // output the postal service title. 		the_content(); // output the postal service content. 	endwhile;  else :   	echo 'No Page Found'; // output an mistake message if there are no posts.  endif; ?>

Note: Because WordPress has its origins in blogging, a lot of functions apply the 'mail' terminology, even though they can render and output any blazon of content (posts, pages, custom postal service types).

Lastly, nosotros have the footer, all we demand to practice here is close the HTML tags nosotros opened earlier. At that place'due south another action claw, wp_footer(), which is actively used by WordPress and plugins to include scripts in the footer needed to render the page.

<?php wp_footer(); ?> 	</torso> </html>

If you've been following along so far you will have a fully functional WordPress theme that looks like this:

Our theme is non going to win whatever design awards (information technology has no CSS) and information technology'southward missing a lot of features that users consider essential (sidebars, navigation, metadata, thumbnails, pagination, etc.) only it'south a groovy showtime!

Permit'south continue on and see how we can better it.

Step #2: Create functions.php

Functions.php is not strictly a required file, only it provides and then many benefits that 99.99% of themes accept it. In functions.php y'all tin can employ WordPress' built-in theme functionality and also add your ain custom PHP code.

Create a functions.php in your theme folder now as we will exist adding lawmaking to it in the adjacent sections.

Calculation a Navigation Menu

Most, if not all websites utilize a navigation menu, but upwardly to now our theme doesn't support 1. To tell WordPress our theme features a navigation menu, we must annals it in functions.php like this:

register_nav_menus( array(     'menu-ane' => __( 'Primary Carte du jour', 'my-custom-theme' ), );

Note: register_nav_menus() accepts an assortment and so you tin can annals more one menu if needed.

WordPress at present knows about our menu, just we withal demand to output it in our theme. We do that by adding the following code beneath the site description in index.php:

wp_nav_menu( array(     'theme_location' => 'card-1', ) );

At present we have an (unstyled) navigation menu:

Adding a Sidebar

Our theme doesn't take a sidebar (widget area) either, let'due south fix that now.

First, we need to register the sidebar in functions.php:

role my_custom_theme_sidebar() {     register_sidebar( array(         'proper name' => __( 'Primary Sidebar', 'my-custom-theme' ),         'id'   => 'sidebar-ane',     ) ); } add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Now create sidebar.php in your theme binder and add the following code:

<?php if ( is_active_sidebar( 'sidebar-one' ) ) { ?>     <ul form="sidebar">         <?php dynamic_sidebar('sidebar-one' ); ?>     </ul> <?php } ?>

Hither we are using an if statement to check if the sidebar is 'active' earlier we output the code. An agile sidebar is 1 that the user has added at least one widget to.

The final step is to include the sidebar in alphabetize.php, to a higher place wp_footer() add together a get_sidebar() phone call.

Calculation Featured Images

Similar sidebars and navigation menus, we can't merely output featured images in our theme and expect them to piece of work, we must tell WordPress we support that feature first. In functions.php add:

add_theme_support( 'mail-thumbnails' );

Now nosotros can add the_post_thumbnail(); within our loop and the thumbnails will work. The only problem is that they will output at WordPress'southward maximum size of 1920px x 2560px, which is too large for near uses. Luckily WordPress has another helper office: add_image_size();

When a user uploads an paradigm, and if paradigm size is defined, WordPress will generate a version of the uploaded paradigm at that size (while keeping the original). If the user's image is smaller than the dimensions you lot've prepare WordPress will do nada as information technology can't make an image bigger than the original.

To use an optimized feature image rather than the original, place the post-obit code in functions.php:

add_image_size( 'my-custom-prototype-size', 640, 999 );

The first parameter is the handle, the second is the image width and the third is the height. Both pinnacle and width are optional in instance you only want to limit 1 dimension.

In alphabetize.php:

the_post_thumbnail( 'my-custom-image-size' );

Enqueueing Styles and Scripts

Earlier nosotros stated that it's better to enqueue styles and scripts rather than hardcoding them directly into the template files. That'south because enqueuing allows for a lot more flexibility.

When done correctly, enqueuing also tells WordPress which resources are being loaded. When WordPress knows which resources are needed information technology can brand sure the same resource isn't being loaded more than once. This is especially important when y'all have an extremely popular library similar jQuery or FontAwesome that multiple themes and plugins will be utilizing.

Some other benefit of enqueuing is that a resource that is enqueued can be dequeued past a plugin, avoiding the demand to change template files.

Although our theme has a manner.css file it isn't using it however, allow's enqueue that now:

function my_custom_theme_enqueue() {     wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() is a helper function that retrieves the URI of the electric current theme'due south stylesheet. If we were enqueueing whatever other file nosotros would demand to exercise this instead:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Our theme doesn't have any scripts, if it did nosotros would enqueue them like this:

part my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() ); wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' ); } add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

An exception to the higher up is scripts that have been pre-registered by WordPress, in those cases yous just need to supply the first parameter ($handle):

wp_enqueue_script( 'jquery' );

Calculation Fashion With CSS

Our theme has stiff foundations but lacks whatever pattern, adding some basic CSS to fashion.css will make a huge deviation. We've added around ~100 lines of CSS to our sample theme as a demonstration and the result looks like this:

Title Tag

All themes should utilize WordPress's congenital-in functionality to generate the title tag, which is enabled by adding this code to your functions.php file: add_theme_support( 'title-tag' ); That's all there is to it, WordPress will handle the output of the page <championship> and if needed plugins can alter the output using filters. SEO plugins often do this in an effort to further optimize the titles.

Step #3: Add Template Parts

Right now lxxx% of our template code is in index.php.

While this works it will event in a lot of code repetition when we have other template files such as singular.php, search.php, and archive.php. Template Parts brand theme development easier by allowing us to re-use code across templates. As our header and footer will be the same on every page they are a perfect candidate for using template parts. First, create header.php and movement the following code from alphabetize.php:

<!DOCTYPE html> <html <?php language_attributes(); ?>> 	<head> 		<meta charset="<?php bloginfo( 'charset' ); ?>"> 		<meta name="viewport" content="width=device-width, initial-calibration=1"> 		<link rel="profile" href="<https://gmpg.org/xfn/11>"> 		<?php wp_head(); ?> 	</head>   <header class="site-header">     <p course="site-title">       <a href="<?php echo esc_url( home_url( '/' ) ); ?>">         <?php bloginfo( 'name' ); ?>       </a>     </p>     <p class="site-clarification"><?php bloginfo( 'description' ); ?></p> 	<?php 	wp_nav_menu( array(     	'theme_location' => 'menu-1', 	) ); 	?>   </header><! – .site-header – >

In index.php replace the above lawmaking with:

<?php get_template_part( 'header' ); ?>

Note: When getting a template role, you must omit the .php from the template part handle.

Next, create a footer template office past moving this code to footer.php and repeating the in a higher place procedure:

<?php wp_footer(); ?> 	</body> </html>

Lastly, we'll move the 'no-results' lawmaking to a template part besides, as it's likely to be used in multiple templates. Create content-none.php and move this code to the new file.

<article class="no-results">    <header course="entry-header">     <h1 class="page-title"><?php esc_html_e( 'Nothing Establish', 'my-custom-theme' ); ?></h1>   </header><! – .entry-header – >    <div class="entry-content">     <p><?php esc_html_e( 'It looks like aught was found at this location.', 'my-custom-theme' ); ?></p>   </div><! – .entry-content – >  </article><! – .no-results – >

Your index should at present wait similar this:

<?php get_template_part( 'header' ); ?>   <div grade="site-content">     <?php     if ( have_posts() ) :       while ( have_posts() ) :          the_post();         ?>          <article <?php post_class(); ?>>  		  <?php the_post_thumbnail(); ?>            <header class="entry-header">             <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>           </header><! – .entry-header – >            <div form="entry-content">             <?php the_content( esc_html__( 'Go on reading &rarr;', 'my-custom-theme' ) ); ?>           </div><! – .entry-content – >          </commodity><! – #postal service-## – >          <?php         // If comments are open or we have at least one comment, load up the annotate template.         if ( comments_open() || get_comments_number() ) :           comments_template();         endif;       endwhile;      else :       get_template_part( 'content-none' );     endif; 	?> 	</div><! – .site-content – > <?php get_sidebar(); get_template_part( 'footer' );

While the above volition work perfectly, there is a slight improvement nosotros can make. WordPress has helper functions for including the header, footer and sidebar template parts. As it's a all-time practice to employ core functionality where possible nosotros should use those instead.

Replace get_template_part( 'header' ); with get_header(); and get_template_part( 'footer' ); with get_footer();

Step #four: Add singular.php, archive.php, search.php, and 404.php

The groundwork we completed with template parts will pay dividends as we add new template files to our theme. Below we've listed the almost common. To avoid overwhelming you with code examples we've linked to the source code on Github instead.

atypical.php

Posts and Pages, when shown on their own URLs, are considered 'Singular' as most of the time the layout will be the aforementioned for both of these page types. Only in the issue that information technology isn't you can use the more than specific folio.php and single.php (post) instead.

Example Code – singular.php

archive.php

Annal templates usually differ from singular templates in 2 ways: they testify excerpts rather than the full content and feature an archive header explaining the content.

Refer back to the template hierarchy and y'all will encounter that the archive template covers all types of archives (author, category, tag, taxonomy, date) if this doesn't work for your use-case you can however use the more than specific templates:

1. - author.php
  - category.php
  - tag.php
  - taxonomy.php
  - engagement.php

Case Code – archive.php

search.php

WordPress websites tin can exist searched using the ?s= URL parameter, for example, yourwebsite.com?s=exam. The search.php template outputs the results of those searches.

Example Code – search.php

404.php

The else argument nosotros added in index.php catches "page not found" errors, but you may want to decouple that functionality into its own template file to have more control over the output. That's the use-case of the 404.php template file.

Example Code – 404.php

Footstep #5: Ancillary Files

If you are distributing your theme to the public then the following files are imperative. Without these, your theme will get rejected from theme repositories and marketplaces.

screenshot.png

The screenshot is shown in the wp-admin themes list when the user is selecting a new theme. Hither are some best practices you should follow:

1. - Screenshots should exist 1200px x 900px
  - Screenshots should be in .png or .jpg format
  - Screenshots should be an authentic representation of the theme
  - Screenshots should exist optimized (use tinypng.com or similar)

readme.txt

WordPress doesn't utilize any information from readme.txt, it pulls everything it needs from way.css. On the other hand, the WordPress theme directory does pull of import information from the readme file and considers information technology a required file.

Most developers utilize readme.txt as the cardinal location to store all the information well-nigh their theme. A simple readme.txt looks similar this:

=== Theme Proper name === Requires at least: five.0 Tested upwards to: 5.2 Requires PHP: 5.6 License: GPLv2 or later License URI: <https://www.gnu.org/licenses/gpl-ii.0.html>  Brusk description. No more than 150 chars.  == Clarification == Theme desc.  == Changelog ==  = ane.0 = * Added new choice  == Resources == * normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](<https://opensource.org/licenses/MIT>)

1. - Requires at least – This is the minimum version of WordPress that your theme is compatible with.
  - Tested up to – This field denotes the nigh recent version of WordPress your theme has been tested with.
  - Requires PHP – This field denotes the minimum version of PHP your theme volition function on.
  - Description – This description field is not currently displayed anywhere.
  - Changelog – The changelog is not used anywhere, but developers and some users will reference this file to see what changes have been made.
  - Resources – Well-nigh third-party resource require attribution of some sort. The resources department is a widely-accepted place to put those. Even for resources that don't explicitly require attribution, it'south nonetheless a practiced practice to list them hither so users are enlightened of the licenses of resources they are using.

Stride #6: Create Page Templates

Page Templates permit developers to create custom templates that can exist used for private posts and pages. For example, most themes have a two-column (content – sidebar) layout but on some pages, the user might desire to only focus on the content and not prove a sidebar. That's where a page template can assistance.

How are "Page Templates" created?

In our theme folder, create a new folder named 'folio-templates' and inside that folder create a file chosen single-column.php. To speed things up copy all the code from atypical.php to page-templates/unmarried-column.php and remove the call to get_sidebar() as this template won't need that.

Now we need to add a special header that tells WordPress this is a folio template, it looks like this:

/* Template Name: Unmarried Column Template Template Post Type: mail service, folio */

The lawmaking is self-explanatory, nosotros are simply telling WordPress the name of the template and which mail types it tin be used with.

That's all in that location is to it, our new page template is now bachelor in the editor under 'Page Attributes'.

Pace #7: Make Your Theme Uniform with RTL.css

Not all languages read left to correct. Arabic and Hebrew, for example, are read from Right to Left (RTL). There'due south a simple way to brand your theme compatible with RTL languages.

Create a new file in your theme folder called rtl.css, and then copy and paste the following code:

body { 	direction: rtl; 	unicode-bidi: embed; }

If an RTL linguistic communication is the active language on a WordPress website, WordPress knows to load this CSS file automatically.

This is a very basic implementation of RTL functionality to get you started. If y'all are interested in learning more here are 2 fantastic resources:

Right to Left Linguistic communication Support Documentation

Twenty Twenty RTL code

Footstep #viii: Always Follow Best Practices

Best practices accept evolved over time to brand edifice and maintaining WordPress themes easier. Not only will post-obit these principles help you but they volition also make it easier for other developers when they demand to work with your code.

1) Apply Starter Themes

Starter themes provide a solid base for you to build your theme upon. Typically they are lightweight, incorporate little to no styling and no configuration options. Over time you might build your own starter theme which you can base all your projects on, simply for now here are some popular options:

1. - Underscores
  - Scaffold
  - HTML5 Bare

2) Go to Know WordPress Coding Standards

Coding standards are a fashion of formatting your code in a consistent manner across the entire codebase. WordPress has coding standards for HTML, CSS, Javascript, and PHP. While using a coding standard has no consequence on the finish-user experience, it does make your code a lot more readable. Fifty-fifty if you don't apply the WordPress coding standards, we'd always recommend using a standard.

1. - WordPress.org Coding Standards
  - WPCS
  - PHP Coding Standards

3) Use Localization

Thanks to the hard work of volunteers, WordPress is bachelor in hundreds of languages. If your theme is going to be released publicly it needs to be built in a fashion that allows it to be translated too.

Don't worry, information technology'southward super easy to do. All we need to practise is brand certain that all strings are passed through a 'localization function' rather than being output directly.

Instead of this:

<?php echo 'Previous Post'; ?>

Nosotros do this instead:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() is a localization function that accepts a string and a text-domain. The function returns a translation of the string provided, or the original string if a translation isn't available.

4) Avoid Plugin Functionality

When a user changes the theme, only the presentation layer should alter. The content and functionality should stay mostly the same. What this means is that whatever function that affects how WordPress roles should be contained in a plugin, not your theme. Some examples of plugin functionality include:

1. - Custom Mail Types
  - Page Builders
  - Social Media Sharing
  - Search Engine Optimization (SEO)

While it may seem convenient (and perhaps a selling point) to include SEO controls in a theme, it actually hurts the user in the long term. In the time to come, they will need to modify their theme but tin can't because all of their SEO configurations are tightly coupled to the current theme. In contrast, if the configurations were stored in a plugin they could change theme without worrying.

5) Prefixing (Prevent Conflicts)

To prevent conflicts, all functions, classes and global variables created past your theme should be prefixed. This is of import because it'due south impossible to know what other code is running on your user's website. Prefixing prevents proper name clashes and fatal errors.

Your theme's name separated by dashes or underscores will work as a prefix most of the time. If the theme name is very long the initials tin work instead.

Theme Name: Scaffold  course Scaffold_Class {} function scaffold_function() {} global $scaffold_global  Theme Name: My Long Theme Name  class MLTN_Class {} part mltn_function() {} global $mltn_global

6) Utilise Core Functionality

Where information technology exists, you should e'er employ core functionality as opposed to reinventing the wheel. This includes, but is not limited to Sidebars, Navigation Menus, Post Thumbnails, Custom Headers, and Custom Backgrounds. These features take been battled-tested past millions of users and are actively maintained and improved upon.

If you need to change the functionality or output of a core role and then it'south possible using i of the many hooks and filters WordPress offers. For example wp_nav_menu() has a 'walker' parameter and then you can have consummate control of the output.

vii) Escaping and Sanitizing Information

Equally a theme developer, y'all must exist familiar with escaping and sanitizing data to protect your users from potential exploits.

Escaping

Escaping is the procedure of checking data is rubber before it's output and sanitizing is checking information before information technology's saved to the database.

WordPress has helper functions that you can utilise to escape data and then you don't need to build those yourself. esc_html is one example of an escaping part. This is what an unescaped output looks similar:

            echo get_theme_mod( 'error_page_title' );

To escape the output we do this:

            echo esc_html( get_theme_mod( 'error_page_title' ) );

Some other escaping functions you should exist enlightened of are esc_attr(), absint(), esc_url().

It's also possible to interpret and escape a cord using a single part:

            echo esc_html( __( '404 Not Constitute', 'my-custom-theme' ) );

Becomes:

echo esc_html__( '404 Not Found', 'my-custom-theme' ); // or esc_html_e( '404 Not Found', 'my-custom-theme' );

Tip: Anywhere in your theme where you have echo $ yous should bank check if it needs to be escaped, information technology ordinarily does.

Sanitizing

If you add settings to your theme, y'all need to make sure the data that users input to those settings is safety before it enters the database. WordPress has a number of functions to help with sanitizing input.

When adding a setting to your theme using the Customizer API it has a parameter for called 'sanitize_callback' which accepts the name of a sanitization part. Any input the setting takes is checked by the function you provide to 'sanitize_callback' earlier it enters the database.

It highlights the importance of sanitization that if even ane of your settings is missing the sanitize_callback it won't be accepted into the WordPress theme directory.

$wp_customize->add_setting(      'my_custom_theme_setting',      array(         'sanitize_callback' => 'sanitize_text_field' // A core sanitization function.     ) );

An official list of sanitization and escaping functions can be seen here: Data Sanitization/Escaping

Pace #9: Distribute Your WordPress Theme

Themes tin exist distributed via unlike channels depending on the outcome you want to accomplish. If your result is to simply contribute to the open-source community then at that place's no ameliorate way to do that than to upload your theme to the WordPress directory. If instead, you lot are looking to sell your theme and make money directly, there are ways to practise that too.

Here are the leading websites for theme distribution:

one) WordPress.org (All-time place to get downloads and users)

The main do good of hosting your theme on WordPress is that you lot get a visibility boost from your theme beingness seen not simply on the wordpress.org website only likewise in the wp-admin dashboard.

Another benefit of hosting your theme with WordPress is the built-in update arrangement. If y'all update your theme all users will exist notified inside their wp-admin dashboards and given an piece of cake path to update to the latest version.

WordPress.org only accepts free themes, but that doesn't mean you can't make money. A free theme tin be a great channel for promoting your premium theme, plugin or service.

2) WordPress.com

WordPress.com hosts both free and premium themes. However, they haven't been open up to new author submissions for a few years now.

3) ThemeForest

ThemeForest is the leading marketplace for premium themes. The superlative-selling theme (Avada) has sales in backlog of $v,000,000.

More often than not speaking the buyers on Theme Forest await full-featured "multi-purpose" themes. All of the top themes accept folio builder functionality and are supported by teams of developers. Information technology's a very difficult market to break into for new authors.

4) Artistic Market and Mojo Marketplace

Creative Market And Mojo Marketplace are minor players in the premium themes market which is why we grouped them together. They both finer offering the aforementioned service as ThemeForest but on a smaller scale.

5) Github

Github is the easiest way to make your free theme public. There's no review process and no guidelines to follow. All the same, yous won't benefit from the visibility of wordpress.org and will need to build your own update mechanism for users to get the latest versions.

Step #10: Test and Meliorate Code

ane) Testing Your Theme

Theme Unit Exam

The Theme Unit of measurement Test is a standard WordPress content import file that contains a wide range of content types and edge cases. It'south easy to upload to your development environment and volition highlight a lot of scenarios you lot may have overlooked.

WP_DEBUG

Every bit a theme programmer, testing your theme with WP_DEBUG enabled is the bare minimum yous should be doing. Your theme should render no errors or warnings when WP_DEBUG is ready to true.

It's also important to repeat the examination with the different PHP versions your theme supports. With each major PHP release, there are new changes, warnings, and depreciation. It'southward not uncommon for a theme to be fault-free on PHP5.6 but testify errors on PHP7.

To enable WP_DEBUG, add together the following code to wp-config.php:

DEFINE( 'WP_DEBUG', truthful );

Monster Widget

Monster Widget is a helpful plugin that lets you add xiii cadre widgets to your sidebar at once. The core widgets use a multifariousness of HTML elements which makes them perfect for testing your theme.

Theme Sniffer

The Theme Sniffer is a plugin created by the Theme Review Team (TRT). Information technology catches a lot of (but not all) escaping and localization errors. Information technology also checks your theme against the WordPress coding standards.

ii) Submitting Your Theme to WordPress.org

At the beginning of this guide, we said that by the time yous reached the end y'all would have a theme you could submit to wordpress.org. Allow'south look at that process.

Upload Process

The upload procedure is simple. Create or login to your WordPress account and then navigate to this folio – https://wordpress.org/themes/upload/

You could zip your theme and upload it correct now, only here are some things y'all might desire to know kickoff.

Requirements

The Theme Review Team (TRT) has a strict set of requirements. Your theme will not be accepted into the directory until it meets all the requirements.

Review Process

When you upload a theme, there is a two-phase review procedure it must pass before it can be accepted into the directory.

First, an automated check is performed as before long as y'all press Upload. Behind the scenes, the automated checker works in a very similar fashion to the Theme Sniffer plugin. If it finds any errors it volition reject the theme and the upload process ends there.

If your theme passes the automated check and then it joins a queue of themes waiting for a human review. The human review is completed by volunteers from the TRT. The number of themes in the queue far exceeds the number of reviewers, which ways it can often take 2-3 months for your theme to reach the front of the queue.

It's imperative that your theme is error-gratuitous and complies with all the requirements by time it reaches the human being review stage as if it has more than than 3 significant errors it can be rejected. If a theme is rejected at the human review phase it must rejoin the queue at the back, which means waiting 2-iii months once again for another human review.

Useful Resource: The Most Common WordPress Theme Evolution Mistakes (and How to Fix Them)

It's worth noting that the TRT is always looking for new reviewers, volunteering can be a great learning experience and a way to contribute to the open up-source community.

3) Your Theme List

Congratulations, your theme has been canonical! You lot at present have your ain listing that looks similar this.

Hither's an overview of what yous can expect to see on this folio:

1. - Screenshot – The screenshot is the first thing potential users see so get in as highly-seasoned as possible. But retrieve information technology must still be an accurate representation of the theme and non a photoshop render. Take inspiration from the nigh popular themes.
  - Description – The description which is pulled from manner.css is an ideal place to depict your theme and information technology's central features. It also helps to list recommended or required plugins hither. The description doesn't support whatsoever formatting (bold, italic, hyperlinks) or even line breaks.
  - Tags – This is a representation of the tags y'all listed in fashion.css. Only these tags here are accepted.
  - Preview Push – The preview is generated past wordpress.org and as theme developers, we have no control over the output. Unfortunately, equally the previewer uses basic content and no configuration information technology oftentimes results in a less than perfect preview.
  - Theme Homepage Link – The URL for the Preview push is pulled from the 'Theme URI' field in your mode.css. There are strict requirements that this URL must only be used to display a page displaying information about your theme.
  - Active Installations – This is the number of websites actively using the theme. The number is rounded to the nearest 10, hundred or 1000. It's not possible to retrieve an exact number.
  - Downloads Per Solar day – This is how many times your theme has been downloaded. A 'Download' can exist a new download or a theme update.
  - Reviews – For a user to get out a review they must be logged in to a wordpress.org business relationship. Generally speaking, reviews are hard to get unless you explicitly enquire your users to submit them.
  - Support – The congenital-in support platform is great for managing and resolving issues with your theme. The user must exist logged in to create a support thread.
  - Translations – The translation platform is a fantastic resources. If you lot have been following the advice throughout this guide to localizing your theme then your users will exist able to translate it into other languages and expand your potential user base beyond only English speaking users.

4) Updating Your Theme

When yous make changes to your theme in the futurity and need to update the version hosted on WordPress the procedure is simple.

Commencement update the 'Version:' field and changelog in readme.txt. Then null the file and re-upload information technology using the same upload folio equally before.

The system will recognize it as an update and will automatically approve it so that it doesn't crave another man review.

mullinswasmand.blogspot.com

Source: https://websitesetup.org/wordpress-theme-development/