Wordpress Theme development basic


let me say this , it not something expert , it just normal style how to create a template with wordpress code and what important is wordpress php code to use in your template of course.take a look at wordpress life cycle for detail.

we create php file we need for our theme and for basic i need 5 files * header.php , index.php , footer.php , functions.php , js/theme-customizer.js and style.css * then we code like sample below : 

index.php

<?php get_header();?>

   <div id="content" class="site-content">
     <p>this is content on your site</p>
     <a>this is link</a>
   </div>

<?php get_footer();?>

functions.php

<?php

function tctheme_cusotmizer_live_preview(){
   wp_enqueue_script(
     'tctheme-theme-customizer',
     get_template_directory_uri().'/js/theme-customizer.js',
     array('jquery','customize-preview'),
     '1.0.0',
     true // this mean import wordpress javascript pact to your theme
   );
}

add_action('customize_preview_init','tctheme_customizer_live_preview');

function tctheme_register_theme_customizer( $wp_customizer ){
   
   $wp_customizer->add_section(
       'tctheme_display_options',
       array(
         'title' => 'Display Options',
         'priority' => 200
       )
   );

   $wp_customizer->add_section(
       'tctheme_link_color',
       array(
         'default' => 'black',
         'transport' => 'postMessage'
       )
   );

   $wp_customizer->add_control(
       'tctheme_link_color',
       array(
         'section' => 'tctheme_display_options',
         'label' => 'Link Color',
         'type' => 'text'
       )
   );
   
}

add_action('customize_register','tctheme_register_theme_customizer');

js/theme-customizer.js

// if this not work for you , please use $(document).ready(); instead
(function($){
   $(function(){
       wp.customize('tctheme_link_color',function(value){
          value.bind(function(to){
              $('a').css('color',to);
          });
       });
   });
}(jQuery));

header.php

as you can see, we respond function to view with get_theme_mod

<!DOCTYPE html>
<head>
<style type="text/css">
  a{
      color: <?php echo get_theme_mod('tctheme_link_color');?>
  }
</style>
</head>

style.css : add anything you like , it's just for style of course

/*
Theme Name: Theme sample
Theme URI: localhost/yourfile
Author : khcodeAdmin
Author URI: khcode.net
Description: A normal sample theme
Version: 0.0.1
License: GNU General Public lincense v3 or later
License URI: http://www.gnu.org/license/gpl-3.0.html
*/

ok test out ...

Share this Post:

Related Posts:

www.000webhost.com