Customizr WordPress Theme - Customizing

I have a review about this great theme already. In this post, I will introduce to you how to customize it, the free version, to make it even more cool.

Read more: Customizr WordPress Theme - Intermediate User

Thanks a lot to Nikeo, theme Author. Seem like he want to promote the Pro version so you have to deal with problems alone. But I'm here to help you:

1. Change Customizr footer credit

Nikeo use some hooks to kept his the footer credit. It's a good way and good sample for theme developer to learning.

If you want to change the credit, I suppose you should by a pro version to gain full control and support his great works for community. If you still want to try? OK

I use FileZilla to connect to WordPress server. Browse to /public_html/wp-content/themes/customizr/inc/parts, you will see a file named class-footer-footer_main.php

Open it and you will found somethings like

     function tc_colophon_center_block() {
      echo apply_filters(
       'tc_credits_display',
       sprintf('<div class="%1$s">%2$s</div>',
        apply_filters( 'tc_colophon_center_block_class', 'span6 credits' ),
        sprintf( '<p>%1$s %2$s %3$s</p>',
          apply_filters( 'tc_copyright_link', sprintf( '· <span class="tc-copyright-text">© %1$s</span> <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a>', esc_attr( date( 'Y' ) ), esc_url( home_url() ), esc_attr( get_bloginfo() ) ) ),
                            apply_filters( 'tc_credit_link', sprintf( '· <span class="tc-credits-text">Designed by</span> %1$s', '<a href="'.TC_WEBSITE.'">Press Customizr</a>' ) ),
                            apply_filters( 'tc_wp_powered', sprintf( '· <span class="tc-wp-powered-text">%1$s</span> <a class="icon-wordpress" target="_blank" href="https://wordpress.org" title="%2$s"></a> ·',
                              __('Powered by', 'customizr'),
                              __('Powered by Wordpress', 'customizr')

That's it. Change it the way you like.

Note: this change will lost each time you upgrade a new version, so you must put it to the child theme.

2. Config Customizr Child Theme

Just like every newbie, I scare alot with the term child theme. Don't know what to do, how to deal and experience with some White Screen of Death made me worn out.

Just do it.

Child theme always has 2 files, function.php and style.css - The minimal of those file are:

Function.php

<?php
/**
* This is where you can copy and paste your functions !
*/

Sylte.Css

/*
 Theme Name:     Customizr Child Theme
 Theme URI:      http://kho.review
 Description:    Customizr Child Theme
 Author:         v0danh
 Author URI:     http://phim.rocks
 Template:       customizr
 Version:        1.0.0
*/
 
@import url("../customizr/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

The red words must exactly in your case. Upload child-theme folder to folder where customizr placed.

I use a pic to help me figure out which one was customizr and which was customizr child theme in the Apperance/Themes section

After upload the folder (with FileZilla), login WordPress, navigate to Apperance/Themes and chose the child theme.

That's all.

3. Add Google Analytics to Customizr theme

<?php
add_action('wp_head','my_analytics', 20);
 
function my_analytics() {
 ?>
 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-76717507-1', 'auto');
  ga('send', 'pageview');

</script> 
 <?php
}

The red code is Google Analytics code. The blue code is php code you need add to function.php to kept Analytics run properly.

4. Use WP PageNavi plugin with Customizr theme

Install plugin first. After config setting, add those code below to the function.php

add_action('wp_head', 'my_post_nav');
function my_post_nav(){
    if ( !function_exists('wp_pagenavi') )
        return;
    remove_action( '__after_loop' , array( TC_post_navigation::$instance , 'tc_post_nav' ), 20 );
    add_action( '__after_loop', 'wp_pagenavi', 20 );
}

5. Add Facebook like button on Header

1. Goto this place: https://developers.facebook.com/docs/plugins/like-button/
2. Set the Facebook like button parameters, the click Get Code

Note: if you don't have any App, you will need to create one, at this step

3. Locate yours two important strings: App ID and Fan Page URL

4. Finally, add this code (including your App ID and Fan Page URL) to function.php of child_themes

//adds the script in the head of your theme - FACEBOOK LIKE
add_action ('wp_head' , 'add_fb_button_script');
function add_fb_button_script() {
 ?>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1068802023183296";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  </script>
 <?php
}
//adds the FACEBOOK LIKE button on the right to the social icons in header
add_filter ('tc_social_in_header' , 'add_fb_button', 10, 2);
function add_fb_button($html, $resp) {
 $class =  ('resp' == $resp) ? '':'span5' 
 ?>
 <div class="social-block <?php echo $class ?>">
  
  <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
         <?php echo tc__f( '__get_socials' ) ?>
        <?php endif; ?>

      <div class="fb-like" data-href="https://facebook.com/phim.rocks" data-width="50" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false" data-share="true"></div>
     </div><!--.social-block-->
 <?php
}

...like this...

OK, refresh your WordPress page and see the result.