Responsive theme customization tutorial

First of all I would like to acknowledge that you have downloaded very good theme for your WordPress blog.It is easily customizable theme and offers wide range of functionality.I would discuss common customization tasks.You can follow the tutorial and make the changes in parallel.

Changing Footer Text

It is good to keep the footer text (to acknowledge your thanks to the author and WordPress of course).But sometimes users want to remove it. The reason of removing footer text might be different for different people.

Follow below steps to customize Responsive theme footer text

  • The child theme is created specially to help new users customize Responsive theme.After downloading you can continue with rest of tutorial.You can also read this tutorial on WordPress about child theme creation.
  • Upload this child theme to your web server (just like another theme installation).
  • Copy footer.php file from your Responsive theme to newly uploaded child theme.
  • Follow below step to remove footer text from the theme
  • Log into your WordPress website as Administrator. If you prefer cPanel then log into your hosting account
  • From WordPress dashboard choose Appearance à Editor. If you have chosen cPanel or hosting account path then open directory wp-contents/themes/responsive
  • Open file footer.php in editor.
  • Locate below code in the file. You can find the code towards end of the file.
<div class="grid col-300 fit powered">
            <a href="<?php echo esc_url(__('','responsive')); ?>" title="<?php esc_attr_e('Responsive Theme', 'responsive'); ?>">
                    <?php printf('Responsive Theme'); ?></a>
            <?php esc_attr_e('powered by', 'responsive'); ?> <a href="<?php echo esc_url(__('','responsive')); ?>" title="<?php esc_attr_e('WordPress', 'responsive'); ?>">
                    <?php printf('WordPress'); ?></a>
        </div><!-- end .powered -->
  • Now if you want to remove the text Responsive theme powered by WordPress then delete above piece of code (leaving the div tags) and save the file.So the code becomes
<div class="grid col-300 fit powered"></div>
<!-- end .powered -->
  • If you want to put link to privacy policy or any other affiliate link then copy the code below
<div class="grid col-300 fit powered"><a title="Title you want for the link" href="URL of your privacy policy file or affiliate link">Text you want for the link </a></div>
  • In above code replace the place holder text with your information.
  • Save the file and activate the Child theme as new theme of your website.
READ  Linux certification sample question paper with answer set 5

Note: it is advisable to back up your footer.php file before making any changes so that you can restore it if something went wrong.

Removing Background Image

Responsive WordPress theme comes with default background.Responsive theme default background image fills all the area outside content. Author of theme has chosen good looking background image so for most users it may serve the purpose. But if you want to modify the background and use some image of your own then follow below procedure

  • Log into your WordPress website as Administrator. If you prefer cPanel then log into your hosting account.
  • From WordPress dashboard choose Appearance –> Editor. If you have chosen cPanel or hosting account path then open directory wp-contents/themes/responsive
  • Open file style.css in editor. Locate below line in the file
background:#efefef url(images/bg.png) repeat;
  • The above line sets background of your webpage.The image file bg.png is used to set background of your webpage.You need to replace bg.png with file of yours.The image file bg.png is located in images directory of responsive theme.
  • It is good to upload your background image at images folder of themes responsive. The idea is all files of a theme are under same directory and second the changes are simple so less chances of error.
  • Let assume that your background image is bg_yours.png then upload your file in images directory of responsive theme.You can do so by using upload file option of cPanel file manager.
  • After uploading the file remember name of the file.Lets assume that you have named your image file as bg_yours.png.Replace bg.png in code shown above with your file name.So the final code becomes
background:#efefef url(images/bg_yours.png) repeat;
  • Save the style.css file
  • Browse your website to see your new background image.
READ  MySQL database backup and restore tutorial for beginners

Note: It is good to backup your style.css file before making changes.In case you want to revert back the changes or by mistake deleted some lines then you can safely go back to original file.

I would come up with more customizations in near future on need basis or you can post your queries as well.

12 comments Responsive theme customization tutorial

  1. I got what you intend, thankyou for putting up.Woh I am lucky to find this website through google. Being intelligent is not a felony, but most societies evaluate it as at least a misdemeanor. by Lazarus Long. cegcedcfgbbfgggf

  2. You could be right. But after a couple of times losing a lot of changes by updating a theme now the first thing I do on a new installation is to make a child theme. With the plugin it takes only a couple of minutes – and it’s uch safer if you are making lots of changes to the theme.

    Another simple way to remove the footer is to change the CSS for class “.powered” to “display: none”

  3. yes you are right but for new users this is bit complicated.also there is no big time involved in this change so making child theme just for footer text removal is not justified

  4. The problem with this method is that when the theme is updated your footer.php is overwritten, and your changes are lost.

    It is better to make a child theme of the responsive theme, then copy footer.php into your child theme, and make the edit to that file.


Leave a Reply

Your email address will not be published. Required fields are marked *