Search code examples
phpwordpresswordpress-themingcustom-wordpress-pages

Can we make changes to WordPress theme code to create custom individual pages?


I am using the wordpress theme: Corporate Blue as a standard template. Now keeping the header and the footer php files same, I am trying to create other custom pages(including the home-page), and I am getting confused as to how to combine different files like index.php, header.php, footer.php, page.php, single.php. Also do I have to create any additional php files in my source folder to for any extra pages?

So far I have just changed the look and feel of the website by making changes in the style.css, I also made a custom-homepage.php in which I included the header and footer using and , also I am running everything on a localhost as of now.


Solution

  • If you want to customize templates with existing theme, that supports remote updates, the best practice is to start with creating a child theme, that would take existing theme ( in this case - Corporate Blue ) as parent theme.

    This way, you avoid possible overwrites during theme updates, and also allows you to override template files that exist in parent theme, by placing templates files of same name in child theme directory.

    There are few steps to achieve this:

    1. Create child theme
    2. Clone/Override or create page template files in child theme
    3. Clone/Override or create template files in child theme for post types single views, post type archives, taxonomy, front page, etc.

    1. Child Theme

    To create child theme, you need to create at least style.css within child theme directory. In your case, it would look something like this:

    /*
     Theme Name:   Corporate Blue Child
     Theme URI:    http://themeurl.com/your-theme-slug/
     Description:  Corporate Blue Child Theme
     Author:       Your Name
     Author URI:   http://example.com
     Template:     corporate-blue
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Tags:         tags, that, describe, your, theme
     Text Domain:  corporate-blue-child
    */
    

    This would tell WordPress that this theme depends on Corporate Blue theme, and to look up for template files in parent theme, if template files of same name don't exist in child theme.

    However, this wouldn't include parent theme styles. To include parent theme's css, assuming that main stylesheet file is style.css, create a functions.php file ( which WordPress loads automatically ), and place this code:

    The key part here is get_template_directory_uri(), that tells WordPress to basic directory to look up for file is parent theme directory. And this function looks up for Template tag in style.css of child theme.

    For more details see: https://developer.wordpress.org/themes/advanced-topics/child-themes/

    Keep in mind that child theme should be activated, not parent theme.

    2. Custom page template files in child theme

    After that you need to figure out what you need of custom pages. Easiest way to create custom page template is to clone page.php or index.php, and rename it. In the top of the cloned file, place php comment with Template Name:

    <?php /* Template Name: Example Template */ ?>
    

    That would allow WordPress to list all page templates for global use when adding/editing page. It would show them in drop down, usually on right sidebar when adding/editing page.

    There are also page templates for specific pages. If you know page ID or page slug, you can add either one as suffix to template name:

    page-{slug}.php
    page-{ID}.php 
    

    This way, WordPress would recognize and load such template for specific page.

    See more about custom page templates: https://developer.wordpress.org/themes/template-files-section/page-template-files/

    3. Template files in child theme

    Templates for post types, archives, category pages, front page, blog archive page, etc.

    You need to learn more about template hierarchy:
    https://developer.wordpress.org/themes/basics/template-hierarchy/