WordPress Theme Development Basics

This is a collection of my own notes and links to other useful resources I’ve come across while learning WordPress Theme Development for clients.

You’ll find it very helpful if you’re getting started in WordPress Theme Development or if you need a “refresher” on some of the basic things you may have forgotten about WordPress Development.

I’ll update and expand on many of these notes as I learn more about WordPress Development.

Please feel free to share these notes with others.

Sources: https://developer.wordpress.org/themes/basics/

WordPress Theme Development Basics Help Resources
WordPress Theme Development Basics Help Resources

Also, read my post about an ultimate list of Freelancing Resources

  • Template Files:
    Templates files 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. A page template can be applied to a single page, a page section, or a class of pages.
    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.
    Template files are PHP files that contain a mixture of HTML, Template Tags, and PHP code.
    When you are building your theme, you will use template files to affect the layout and design of different parts of your website.
    For example, you would use the header.php template to create a header, footer.php template to create a footer, or the comments.php template to include comments. The Template Hierarchy describes which template file WordPress will load based on the type of request and whether the template exists in the theme. The server then parses the PHP in the template and returns HTML to the visitor. The most critical template file is index.php, which is the catch-all template if a more-specific template can not be found in the template hierarchy.
    • Below is a list of some basic theme templates and files:
      • index.php: The main template file. It is required in all themes.
      • style.css: The main stylesheet. It is required in all themes and contains the information header for your theme.
      • rtl.css: The right-to-left stylesheet is included automatically if the website language’s text direction is right-to-left.
      • comments.php: The comments template.
      • front-page.php: The front page template is always used as the site front page if it exists, regardless of what settings on Admin > Settings > Reading.
      • home.php: The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show the latest posts.
      • header.php: The header template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
      • singular.php: The singular template is used for posts when single.php is not found, or for pages when page.php are not found. If singular.php is not found, index.php is used.
      • single.php: The single post template is used when a visitor requests a single post.
      • single-{post-type}.php: The single post template used when a visitor requests a single post from a custom post type. For example, single-book.php would be used for displaying single posts from a custom post type named book. The index.php used if a specific query template for the custom post type is not present.
      • archive-{post-type}.php: The archive post type template is used when visitors request a custom post type archive. For example, archive-books.php would be used for displaying an archive of posts from the custom post type named books. The <
      • archive.php: This template file is used if the archive-{post-type}.php is not present.
      • page.php: The page template is used when visitors request individual pages, which are a built-in template.
      • page-{slug}.php: The page slug template is used when visitors request a specific page, for example one with the “about” slug (page-about.php).
      • category.php: The category template is used when visitors request posts by category.
      • tag.php: The tag template is used when visitors request posts by tag.
      • taxonomy.php: The taxonomy term template is used when a visitor requests a term in a custom taxonomy.
      • author.php: The author page template is used whenever a visitor loads an author page.
      • date.php: The date/time template is used when posts are requested by date or time. For example, the pages generated with these slugs:
        • http://example.com/blog/2014/
        • http://example.com/blog/2014/05/
        • http://example.com/blog/2014/05/26/
      • archive.php: The archive template is used when visitors request posts by category, author, or date. Note: this template will be overridden if more specific templates are present like category.php, author.php, and date.php.
      • search.php: The search results template is used to display a visitor’s search results.
      • attachment.php: The attachment template is used when viewing a single attachment like an image, pdf, or other media file.
      • image.php: The image attachment template is a more specific version of attachment.php and is used when viewing a single image attachment. If not present, WordPress will use attachment.php instead.
      • 404.php: The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.
    • Template Tags:Within WordPress templates, you can use Template Tags to display information dynamically, include other template files, or otherwise customize your site. There’s an entire page on Template Tags that you can dive into to learn all about them.
      • For example, in your index.php you can include other files in your final generated page:
        • To include the header, use get_header()
        • To include the sidebar, use get_sidebar()
        • To include the footer, use get_footer()
        • To include the search form, use get_search_form()
        • To include custom theme files, use get_template_part()
      • Example of WordPress template tags to include specific templates into your page:
        • <?php get_sidebar(); ?>
        • <?php get_template_part( ‘featured-content’ ); ?>
        • <?php get_footer(); ?>
  • Main Stylesheet (style.css)The style.css file needs to be located in the root directory of your theme, not a subdirectory. For more detailed explanation on how to include the style.css file in a theme, see the “Stylesheets” section of Enqueuing Scripts and Styles.
    • Basic Structure of Main Stylesheet:
      • /*Theme Name: Twenty TwentyTheme URI: https://wordpress.org/themes/twentytwenty/Author: the WordPress teamAuthor URI: https://wordpress.org/Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-readyVersion: 1.3Requires at least: 5.0Tested up to: 5.4Requires PHP: 7.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlText Domain: twentytwentyThis theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you’ve learned with others.*/
    • Explanation of Basic Structure:Items indicated with (*) are required for a theme in the WordPress Theme Repository.
      • Theme Name (*): Name of the theme.
      • Theme URI: The URL of a public web page where users can find more information about the theme.
      • Author (*): The name of the individual or organization who developed the theme. Using the Theme Author’s wordpress.org username is recommended.
      • Author URI: The URL of the authoring individual or organization.
      • Description (*): A short description of the theme.
      • Version (*): The version of the theme, written in X.X or X.X.X format.
      • Requires at least (*): The oldest main WordPress version the theme will work with, written in X.X format. Themes are only required to support the three last versions.
      • Tested up to (*): The last main WordPress version the theme has been tested up to, i.e. 5.4. Write only the number, in X.X format.
      • Requires PHP (*): The oldest PHP version supported, in X.X format, only the number
      • License (*): The license of the theme.
      • License URI (*): The URL of the theme license.
      • Text Domain (*): The string used for textdomain for translation.
      • Tags: Words or phrases that allow users to find the theme using the tag filter. A full list of tags is in the Theme Review Handbook.
      • Domain Path: Used so that WordPress knows where to find the translation when the theme is disabled. Defaults to /languages.
    • After the required header section, style.css can contain anything a regular CSS file has.
    • Child theme style.css format:For more information on creating a Child Theme, visit the Child Themes page.
      • /*Theme Name: My Child ThemeTemplate: twentytwenty*/
  • Post Types:Internally, all of the Post Types are stored in the same place — in the yvwp_posts database table — but are differentiated by a database column called post_type.
    • Default Post Types:
      • Post (Post Type: ‘post’): The template files that display the Post post type are: Read more about Post Template Files.
        • * single.php and single-post.php
        • * category.php and all its iterations
        • * tag.php and all its iterations
        • * taxonomy.php and all its iterations
        • * archive.php and all its iterations
        • * author.php and all its iterations
        • * date.php and all its iterations
        • * search.php
        • * home.php
        • * index.php
      • Page (Post Type: ‘page’): The template files that display the Page post type are: Read more about Page Template Files.
        • * page.php and all its iterations
        • * $custom.php and all its iterations
        • * front-page.php
        • * search.php
        • * index.php
      • Attachment (Post Type: ‘attachment’): The template files that display the Attachment post type are: Read more about Attachment Template Files.
        • * MIME_type.php
        • * attachment.php
        • * single-attachment.php
        • * single.php
        • * index.php
      • Custom Post Types: The following templates can display Custom post types:Read more about Custom Post Type Templates.You can learn more about creating custom post types in the WordPress Plugin Developer Handbook.
        • * single-{post-type}.php
        • * archive-{post-type}.php
        • * search.php
        • * index.php
      • Revision (Post Type: ‘revision’)
      • Navigation menu (Post Type: ‘nav_menu_item’)
  • Organizing Theme Files:The default Twenty themes are some of the best examples of good theme development. Default WordPress Themes Files
    • Theme folder and file structureThe main theme template files are in the root directory, while JavaScript, CSS, images are placed in assets directory, template-parts are placed in under respective sub-directory of template-parts and collection of functions related to core functionalities are placed in inc directory.
      • assets (dir)
      • – css (dir)
      • – images (dir)
      • – js (dir)
      • inc (dir)
      • template-parts (dir)
      • – footer (dir)
      • – header (dir)
      • – navigation (dir)
      • – page (dir)
      • – post (dir)
      • 404.php
      • archive.php
      • comments.php
      • footer.php
      • front-page.php
      • functions.php
      • header.php
      • index.php
      • page.php
      • README.txt
      • rtl.css
      • screenshot.png
      • search.php
      • searchform.php
      • sidebar.php
      • single.php
      • style.css
  • WordPress Template Hierarchy:
  • Template Tags:Template tags are used within themes to retrieve content from your database. The content could be anything from a blog title to a complete sidebar. Template tags are the preferred method to pull content into your theme.You can use a template tag to call another theme file or some information from the database. Complete list of Template Tags
    For example
    , the template tag get_header() tells WordPress to get the header.php file and include it in the current theme file.More examples:the_title() – tells WordPress to get the title of the page or post from the database and include it.bloginfo( ‘name’ ) – tells WordPress to get the blog title out of the database and include it in the template file.
    • Using Template Tags Within the Loop
      • The WordPress loop begins with:
        • if ( have_posts() ) :
        • while ( have_posts() ) :
        • the_post();
      • Template tags that work within the loop must be in the middle area, before the ending section of the loop below:
        • endwhile;
        • else :
        • _e( ‘Sorry, no posts matched your criteria.’, ‘devhub’ );
        • endif;
  • The Loop:The Loop is the default mechanism WordPress uses for outputting posts through a theme’s template files. How many posts are retrieved is determined by the number of posts to show per page defined in the Settings>Reading. Within the Loop, WordPress retrieves each post to be displayed on the current page and formats it according to your theme’s instructions.
    The Loop should be placed in index.php, and in any other templates which are used to display post information. Because you do not want to duplicate your header over and over, the loop should always be placed after the call to get_header().
    • You can use the Loop for a number of different things, for example to:
      • * display post titles and excerpts on your blog’s homepage;
      • * display the content and comments on a single post;
      • * display the content on an individual page using template tags; and
      • * display data from Custom Post Types and Custom Fields.
    • You can customize the Loop across your template files to display and manipulate different content.
    • The basic loop:
    • <?php
    • if ( have_posts() ) :
    • while ( have_posts() ) : the_post();
    • // Display post content
    • endwhile;
    • endif;
    • ?>
    • This loop says that when there are posts, loop through and display the posts. Broken down into more detail:
      • The have_posts() function checks whether there are any posts.
      • If there are posts, a while loop continues to execute as long as the condition in the parenthesis is logically true. As long as have_posts() continues to be true, the loop will continue.
    • An extremely simple index.php file would look like:
      • <?php
      • get_header();
      • if ( have_posts() ) :
      • while ( have_posts() ) : the_post();
      • the_content();
      • endwhile;
      • else :
      • _e( ‘Sorry, no posts matched your criteria.’, ‘textdomain’ );
      • endif;
      • get_sidebar();
      • get_footer();
      • ?>
    • What the Loop Can Display
      • The Loop can display a number of different elements for each post. For example, some common template tags used in many themes are:
        • * next_post_link() – a link to the post published chronologically after the current post
        • * previous_post_link() – a link to the post published chronologically before the current post
        • * the_category() – the category or categories associated with the post or page being viewed
        • * the_author() – the author of the post or page
        • * the_content() – the main content for a post or page
        • * the_excerpt() – the first 55 words of a post’s main content followed by an ellipsis (…) or read more link that goes to the full post. You may also use the “Excerpt” field of a post to customize the length of a particular excerpt.
        • * the_ID() – the ID for the post or page
        • * the_meta() – the custom fields associated with the post or page
        • * the_shortlink() – a link to the page or post using the url of the site and the ID of the post or page
        • * the_tags() – the tag or tags associated with the post
        • * the_title() – the title of the post or page
        • * the_time() – the time or date for the post or page. This can be customized using standard PHP date function formatting.
      • You can also use conditional tags, such as:
        • * is_home() – Returns true if the current page is the homepage
        • * is_admin() – Returns true if inside Administration Screen, false otherwise
        • * is_single() – Returns true if the page is currently displaying a single post
        • * is_page() – Returns true if the page is currently displaying a single page
        • * is_page_template() – Can be used to determine if a page is using a specific template, for example: is_page_template(‘about-page.php’)
        • * is_category() – Returns true if page or post has the specified category, for example: is_category(‘news’)
        • * is_tag() – Returns true if a page or post has the specified tag
        • * is_author() – Returns true if inside author’s archive page
        • * is_search() – Returns true if the current page is a search results page
        • * is_404() – Returns true if the current page does not exist
        • * has_excerpt() – Returns true if the post or page has an excerpt
      • Above functions/tags are explained in detail here: https://developer.wordpress.org/reference/functions/
      • Basic Examples:
        • Blog Archive
          • The example below shows a simple loop that checks to see if there are any posts and, if there are, outputs each post’s title, thumbnail, and excerpt. If no posts exists, it displays the message in parentheses.
            • <?php
            • if ( have_posts() ) :
            • while ( have_posts() ) : the_post();
            • the_title( ‘<h2>’, ‘</h2>’ );
            • the_post_thumbnail();
            • the_excerpt();
            • endwhile;
            • else:
            • _e( ‘Sorry, no posts matched your criteria.’, ‘textdomain’ );
            • endif;
            • ?>
        • Individual Post
          • In WordPress, each post has its own page, which displays the relevant information for that post. Template tags allow you to customize which information you want to display.In the example below, the loop outputs the post’s title and content. You could use this example in a post or page template file to display the most basic information about the post. You could also customize this template to add more data to the post, for example the category.
        • <?php
        • if ( have_posts() ) :
        • while ( have_posts() ) : the_post();
        • the_title( ‘<h1>’, ‘</h1>’ );
        • the_content();
        • endwhile;
        • else:
        • _e( ‘Sorry, no pages matched your criteria.’, ‘textdomain’ );
        • endif;
        • ?>
      • Using yvwp_reset_postdata()Use yvwp_reset_postdata() when you are running custom or multiple loops with yvwp_Query. This function restores the global $post variable to the current post in the main query.
        If you’re following best practices, this is the most common function you will use to reset loops.
        To properly use this function, place the following code after any loops with yvwp_Query:
        • <?php yvwp_reset_postdata(); ?>
      • Here is an example of a loop using yvwp_Query that is reset with yvwp_reset_postdata().
      • <?php
      • // Example argument that defines three posts per page.
      • $args = array( ‘posts_per_page’ => 3 );
      • // Variable to call yvwp_Query.
      • $the_query = new yvwp_Query( $args );
      • if ( $the_query->have_posts() ) :
      • // Start the Loop
      • while ( $the_query->have_posts() ) : $the_query->the_post();
      • the_title();
      • the_excerpt();
      • // End the Loop
      • endwhile;
      • else:
      • // If no posts match this query, output this text.
      • _e( ‘Sorry, no posts matched your criteria.’, ‘textdomain’ );
      • endif;
      • yvwp_reset_postdata();
      • ?>
  • Theme Functions:Below are a number of examples that you can use in your functions.php file to support various features. Each of these examples are allowed in your theme if you choose to submit it to the WordPress.org theme directory.
    • Theme SetupA number of theme features should be included within a “setup” function that runs initially when your theme is activated. As shown below, each of these features can be added to your functions.php file to activate recommended WordPress features.Note: It’s important to namespace your functions with your theme name. All examples below use myfirsttheme_ as their namespace, which should be customized based on your theme name.To create this initial function, start a new function entitled myfirsttheme_setup(), like so:
      • if ( ! function_exists( ‘myfirsttheme_setup’ ) ) :
      • /**
      • * Sets up theme defaults and registers support for various WordPress features
      • *
      • * It is important to set up these functions before the init hook so that none of these
      • * features are lost.
      • *
      • * @since MyFirstTheme 1.0
      • */
      • function myfirsttheme_setup() {
      • Note: In the above example, the function myfirsttheme_setup is started but not closed out. Be sure to close out your functions.
    • Automatic Feed LinksAutomatic feed links enables post and comment RSS feeds by default. These feeds will be displayed in <head> automatically. They can be called using add_theme_support().
      • add_theme_support( ‘automatic-feed-links’ );
    • Navigation MenusYou can set up multiple menus in functions.php. They can be added using register_nav_menus() and inserted into a theme using yvwp_nav_menu(), as discussed later in this handbook. If your theme will allow more than one menu, you should use an array. While some themes will not have custom navigation menus, it is recommended that you allow this feature for easy customization.
      • register_nav_menus( array(
      • ‘primary’ => __( ‘Primary Menu’, ‘myfirsttheme’ ),
      • ‘secondary’ => __( ‘Secondary Menu’, ‘myfirsttheme’ )
      • ) );
      • Each of the menus you define can be called later using yvwp_nav_menu() and using the name assigned (i.e. primary) as the theme_location parameter.
    • Post ThumbnailsPost thumbnails and featured images allow your users to choose an image to represent their post. Your theme can decide how to display them, depending on its design.For example, you may choose to display a post thumbnail with each post in an archive view. Or, you may want to use a large featured image on your homepage. While not every theme needs featured images, it’s recommended that you support post thumbnails and featured images.
      • add_theme_support( ‘post-thumbnails’ );
    • Initial Setup ExampleIncluding all of the above features will give you a functions.php file like the one below. Code comments have been added for future clarity.As shown at the bottom of this example, you must add the required add_action() statement to ensure the myfirsttheme_setup function is loaded.
      • if ( ! function_exists( ‘myfirsttheme_setup’ ) ) :
      • /**
      • * Sets up theme defaults and registers support for various WordPress features.
      • *
      • * Note that this function is hooked into the after_setup_theme hook, which runs
      • * before the init hook. The init hook is too late for some features, such as indicating
      • * support post thumbnails.
      • */
      • function myfirsttheme_setup() {
      • /**
      • * Make theme available for translation.
      • * Translations can be placed in the /languages/ directory.
      • */
      • load_theme_textdomain( ‘myfirsttheme’, get_template_directory() . ‘/languages’ );
      • /**
      • * Add default posts and comments RSS feed links to <head>.
      • */
      • add_theme_support( ‘automatic-feed-links’ );
      • /**
      • * Enable support for post thumbnails and featured images.
      • */
      • add_theme_support( ‘post-thumbnails’ );
      • /**
      • * Add support for two custom navigation menus.
      • */
      • register_nav_menus( array(
      • ‘primary’ => __( ‘Primary Menu’, ‘myfirsttheme’ ),
      • ‘secondary’ => __(‘Secondary Menu’, ‘myfirsttheme’ )
      • ) );
      • /**
      • * Enable support for the following post formats:
      • * aside, gallery, quote, image, and video
      • */
      • add_theme_support( ‘post-formats’, array ( ‘aside’, ‘gallery’, ‘quote’, ‘image’, ‘video’ ) );
      • }
      • endif; // myfirsttheme_setup
      • add_action( ‘after_setup_theme’, ‘myfirsttheme_setup’ );
    • Content WidthA content width is added to your functions.php file to ensure that no content or assets break the container of the site. The content width sets the maximum allowed width for any content added to your site, including uploaded images. In the example below, the content area has a maximum width of 800 pixels. No content will be larger than that.
      • if ( ! isset ( $content_width) )
      • $content_width = 800;
    • Other FeaturesThere are other common features you can include in functions.php. Listed below are some of the most common features. Click through and learn more about each of these features.
  • Linking Theme Files & Directories
    • Linking to Core Theme FilesWordPress themes are built from a number of different template files. At the very least this will usually include a sidebar.phpheader.php and footer.php. These are called using Template Tags.
      • For example:
        • * get_header();
        • * get_footer();
        • * get_sidebar();
      • You can create custom versions of these files can be called as well by naming the file:
        • sidebar-{your_custom_template}.php
        • header-{your_custom_template}.php
        • footer-{your_custom_template}.php.
      • You can then use Template Tags with the custom template name as the only parameter, like this:
        • get_header( ‘your_custom_template’ );
        • get_footer( ‘your_custom_template’ );
        • get_sidebar( ‘your_custom_template’ );
      • Get Template PartYou can create custom template files and call them at any location in the page using get_template_part(). To create a custom template file in your theme give the file an appropriate name and use the same custom template system as with the header, sidebar and footer files:
        • slug-template.php
        • For example, if you would like to create a custom template to handle your post content you could create a template file called content.php and then add a specific content layout for product content by extending the file name to content-product.php. You would then load this template file in your theme like this:
          • get_template_part( ‘content’, ‘product’ );
      • Linking to Theme DirectoriesTo link to the theme’s directory, you can use the following function:
        • get_theme_file_uri();
        • If you are not using a child theme, this function will return the full URI to your theme’s main folder. You can use this to reference sub-folders and files in your theme like this:
          • echo get_theme_file_uri( ‘images/logo.png’ );
        • If you are using a child theme then this function will return the URI of the file in your child theme if it exists. If the file cannot be found in your child theme, the function will return the URI of the file in the parent theme.
        • To access the path to a file in your theme’s directories, you can use the following function:
          • get_theme_file_path();
        • As with get_theme_file_uri(), you can reference sub-folders and files like this:
          • echo get_parent_theme_file_uri( ‘images/logo.png’ );
          • //or
          • echo get_parent_theme_file_path( ‘images/logo.png’ );
        • Be careful when referencing files that may not be present, as these functions will return the URI or file path whether the file exists or not. If the file is missing, these functions will return a broken link.
        • Note: The functions get_theme_file_uri(), get_theme_file_path(), get_parent_theme_file_uri(), get_parent_theme_file_path() were introduced in WordPress 4.7.
      • Dynamic Linking in TemplatesRegardless of your permalink settings, you can link to a page or post dynamically by referring to its unique numerical ID (seen in several pages in the admin interface) with
      • <a href=”<?php echo get_permalink($ID); ?>”>This is a link</a>
      • This is a convenient way to create page menus as you can later change page slugs without breaking links, as IDs will stay the same. However, this might increase database queries.
  • CSS & JavaScriptAdding scripts and styles to WordPress is a fairly simple process. Essentially, you will create a function that will enqueue all of your scripts and styles. When enqueuing a script or stylesheet, WordPress creates a handle and path to find your file and any dependencies it may have (like jQuery) and then you will use a hook that will insert your scripts and stylesheets.
    • Enqueuing Scripts and StylesThe proper way to add scripts and styles to your theme is to enqueue them in the functions.php files.
    • Tip: WordPress includes a number of JavaScript files as part of the software package, including commonly used libraries such as jQuery. Before adding your own JavaScript, Click here to see Default Scripts Included and Registered by WordPress.
    • The basics method to enqueue the script or style is by using
      • yvwp_enqueue_script()
      • yvwp_enqueue_style()
    • StylesheetsRather then loading the stylesheet in your header.php file, you should load it in using yvwp_enqueue_style. In order to load your main stylesheet, you can enqueue it in functions.php
      • To enqueue style.css
        • yvwp_enqueue_style( ‘style’, get_stylesheet_uri() );
        • This will look for a stylesheet named “style” and load it.
      • The basic function for enqueuing a style is:
        • yvwp_enqueue_style( $handle$src$deps$ver$media );
        • You can include these parameters:
          • $handle is simply the name of the stylesheet.
          • $src is where it is located. The rest of the parameters are optional.
          • $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
          • $ver sets the version number.
          • $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’
        • Example: If you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use:
          • yvwp_enqueue_style( ‘slider’, get_template_directory_uri() . ‘/css/slider.css’,false,’1.1′,’all’);
    • ScriptsYou can add JavaScript (JS) or any other script using this function:
      • yvwp_enqueue_script( $handle$src$deps$ver$in_footer);
        • $handle is the name for the script.
        • $src defines where the script is located.
        • $deps is an array that can handle any script that your new script depends on, such as jQuery.
        • $ver lets you list a version number.
        • $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.
      • Your enqueue function may look like this:
        • yvwp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/js/script.js’, array ( ‘jquery’ ), 1.1, true);
      • The Comment Reply ScriptThe proper way to include comment reply is to use conditional tags to check if certain conditions exist, so that the script isn’t being loaded unnecessarily. For instance, you can only load scripts on single post pages using is_singular tag, and check to make sure that “Enable threaded comments” is selected by the user. So you can set up a function like:
        • if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
        • yvwp_enqueue_script( ‘comment-reply’ );
        • }
        • If comments are enabled by the user, and we are on a post page, then the comment reply script will be loaded. Otherwise, it will not.
    • Combining Enqueue Functions (CSS and JS)It is best to combine all enqueued scripts and styles into a single function, and then call them using the yvwp_enqueue_scripts action. This function and action should be located somewhere below the initial setup (performed above).
      • function add_theme_scripts() {
      • yvwp_enqueue_style( ‘style’, get_stylesheet_uri() );
      • yvwp_enqueue_style( ‘slider’, get_template_directory_uri() . ‘/css/slider.css’, array(), ‘1.1’, ‘all’);
      • yvwp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/js/script.js’, array ( ‘jquery’ ), 1.1, true);
      • if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
      • yvwp_enqueue_script( ‘comment-reply’ );
      • }
      • }
      • add_action( ‘yvwp_enqueue_scripts’, ‘add_theme_scripts’ );
  • Conditional TagsConditional Tags can be used in your Template Files to alter the display of content depending on the conditions that the current page matches. They tell WordPress what code to display under specific conditions. Conditional Tags usually work with PHP if /else Conditional Statements.
    • For example, you could ask if a user is logged in, and then provide a different greeting depending on the result.
      • if ( is_user_logged_in() ):
      • echo ‘Welcome, registered user!’;
      • else:
      • echo ‘Welcome, visitor!’;
      • endif;
    • Two ways to implement Conditional Tags:
      • * place it in a Template File
      • * create a function out of it in functions.php that hooks into an action/filter that triggers at a later point
    • Click here to see all the listed conditions under which each of the following conditional statements proves to be true. Tags which can accept parameters are noted.
    • Conditional Tags Index
    • Function Reference
  • Categories, Tags, & Custom TaxonomiesCategories, tags, and taxonomies are all related and can be easily confused.We’ll use the example of building a theme for a recipe website to help break down categories, tags, and taxonomies.
    • In our recipe website, the categories would be:
      • Breakfast
      • Lunch
      • Dinner
      • Appetizers
      • Soups
      • Salads
      • Sides
      • Desserts
    • All recipes will fit within the above categories, but users might want to search for something specific like chocolate desserts or ginger chicken dinners.
    • Chocolate, ginger, and chicken are all examples of tags. They are another level of specificity that provides meaning to the user.
    • Lastly, there are taxonomies.In reality, categories and tags are examples of default taxonomies which simply are a way to organize content.Taxonomies are the method of classifying content and data in WordPress.When you use a taxonomy you’re grouping similar things together.The taxonomy refers to the sum of those groups.As with Post Types, there are a number of default taxonomies, and you can also create your own.
    • Recipes are normally organized by category and tag, but there are some other helpful ways to break the recipes down to be more user friendly.
    • For example:
      • The recipe website might want an easy way to display recipes by cook time.
        • custom taxonomy of cook time with
          • 0-30 min
          • 30-min to an hour
          • 1 to 2 hours
          • 2+ hours would be a great breakdown.
        • Additionally, custom taxonomy of cook method such as
          • grill
          • oven
          • stove
          • refrigerator
          • etc would be another great example that would be relevant for the site.
        • There could also be a custom taxonomy for how spicy the recipe is and then a rating from 1-5 on spiciness.
    • Default TaxonomiesThe default taxonomies in WordPress are:
      • Categories: a hierarchical taxonomy that organizes content in the post Post Type
      • Tags: a non-hierarchical taxonomy that organizes content in the post Post Type
      • Post formats: a method for creating formats for your posts. You can learn more about these on the Post Formats page.
    • TermsTerms are items within your taxonomy.
      • For example
        • If you have the Animal taxonomy you would have the terms
          • Dogs
          • Cats
          • Sheep.
        • Terms can be created via the WordPress admin, or you can use the yvwp_insert_term() function.
    • Taxonomy Database SchemaTaxonomies and terms are stored in the following database tables:
      • yvwp_terms – stores all of the terms
      • yvwp_term_taxonomy – places the term in a taxonomy
      • yvwp_term_relationships – relates the taxonomy to an object (for example, category to post)
    • Taxonomy TemplatesWordPress offers several different hierarchies of templates for categories, tags, or custom taxonomies. More details on their structure and usage may be found on the Taxonomy Templates page.
    • Custom TaxonomiesIt is possible to create new taxonomies in WordPress.
      • For example
        • You want to create an author taxonomy on a book review website, or an actor taxonomy on a film site.
        • With custom post type it is recommended that you put this functionality in a plugin. This ensures that when the user changes their website’s design, their content is preserved in the plugin.
      • You can read more about creating custom taxonomies in the Plugin Developer Handbook.
Share This Page:

Leave a Comment

Your email address will not be published.