Announcement

Collapse
No announcement yet.

How to create a custom theme, the right way!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create a custom theme, the right way!

    So what if you want to change the RSP default theme? You go into the theme folder and change the HTML or CSS to how you want. But the next time RSP updates the theme you lose your all your changes This is the wrong way to do it. So how do i do it the right way? Here's how, you need to make a child theme by following the instructions below.

    1) Decide on your new theme name, better to keep it lowercase and all one word. For this example I am going to use amazinghost
    2) Create a new folder in wp-content/themes and call it 'amazinghost'
    3) Create a new file in the folder called 'style.css' containing the following text
    Code:
    /*
    Theme Name:     Amazing Host Theme
    Theme URI:      http://www.amazinghost.com
    Description:    Theme for Amazing Host
    Author:         Amazing Host CEO
    Author URI:     http: //www.amazinghost.com
    Template:       business-satellite
    Version:        0.1.0
    */
     
    @import url("../business-satellite/style.css");
    ** This code allows you to build/extent the business satellite theme, if you are using another theme such as Next Level just replace the theme you are extending

    Now for example you want to change the logo or replace the telephone number with your own custom number, you need to edit the header.php file. So you copy the header.php file into your new child theme ie wp-content/themes/amazinghost/header.php

    Next you edit the header file within your theme to contain the changed HTML which you want to display. So where it says
    Code:
    <div id="header_phone">
                <span class="rpwp_arial">+</span><?php if (function_exists('rp_support_phone')) echo substr(rp_support_phone(), 1); ?> <span class="small">(ID:<?php echo $GLOBALS['rp_info']['store_id'];?>)</span>
            </div>
    We change it to

    Code:
    <div id="header_phone">
                0800 123 4567 <span class="small">(ID:<?php echo $GLOBALS['rp_info']['store_id'];?>)</span>
            </div>
    This will now display the telephone number as 0800 123 4567 (ID:your store id)

    You can also use this to change the logo. Take off the live chat support (maybe you have your own solution) and make changes to the theme which will not be overwritten if the main theme changes!


  • #2
    Thanks for the info clivejo - couple of questions please.

    1/ The themes also have a colour css file in the themes directory. Eg style.blue.css How does this affect the child theme? Does it also have to be copied over to the child theme?

    2/ Like many I suspect, I have made many changes to my theme style.css - how do you now 'easily' back track over the many changes to add to the child theme style.css - so they won't be written over by a theme update?

    3/ Presumably, all changes to the header.php and pages etc - need to have copies saved so they do not get over written with theme updates? [That is in case the 'do not change' this page feature does not work]

    Thanks again.

    Comment


    • clivejo
      clivejo commented
      Editing a comment
      1) You leave the main theme intact and override the CSS in the child theme. Never make the changes in the main theme as any updates and your changes will be overwritten. Make changes to your style.css file in your child theme by overriding the CSS you want changed.

      2) That the difficult part. You need to identify the changes you have made and 'move' them into the child theme. Any changes to the main theme will be overwritten and you will have to make your custom changes again. This is why I posted how to create a child theme!

      3) The changed files must be kept in the child theme folder. What WP does is it overrides the code. For example if header.php exists in the child theme folder use it instead of the file located in the main theme. Same with CSS, it will override the main theme with any CSS you have in the style.css file under your child theme.

  • #3
    I know this is an old thread, but I don't see a reason to start a new one...

    Creating child themes to protect your site from theme updates doesn't always work. I use the Child Theme Configurator plugin and have used it since the start of my site. I have made few changes to my RSP WP site files (header and footer). The BULK of my changes are CSS mods, which I did in my Child theme.

    So I just now updated my WP theme (phphosting) and some CSS changes I made were lost. I did not thoroughly check the site for any other problems. I just reverted back to the older theme version for now.

    Comment


    • #4
      Thanks for the valuable information.

      Comment


      • #5
        This is the gold content I've all wanted for a long time. Thank you for this outline.

        Comment

        Working...
        X