Monday, 1 January 2018

Steps to create wordpress theme.

Below are the steps to create new theme.
Step1. Create a folder in wp-content/themes/ and name the folder.

Step2. Take a screenshot of the html and put it in the theme folder and name is screenshot.png

Step3. Create a style.css file and put the below code.
/*
Theme Name: Your theme Name
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Description of theme.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen
*/

Step4. Create functions.php , header.php and footer.php file.
In the header file write this code.
      <?php wp_head(); ?>
And in footer file write this code above </body> tag.
    <?php wp_footer(); ?>

Step5. Include custom css and js files in theme
function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
   wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
   wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

}
//add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
For theme setup.

if ( ! function_exists( 'mytheme_setup' ) ) :
function mytheme_setup() {
register_nav_menus( array(
        'primary'   => __( 'Primary Menu', 'mytheme' ),
        'secondary' => __('Secondary Menu', 'mytheme' )
    ) );


add_theme_support( 'post-thumbnails' );

}
endif;
add_action( 'after_setup_theme', 'mytheme_setup' );
*******************************************************
Adding a custom logo.

function themename_custom_logo_setup() {
    $defaults = array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => array( 'site-title', 'site-description' ),
    );
    add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );
*******************************************************


function themename_custom_header_setup() {

    $args = array(
        'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
        'default-text-color' => '000',
        'width'              => 1000,
        'height'             => 250,
        'flex-width'         => true,
        'flex-height'        => true,
    )
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );
*******************************************************
  
Step.7 Whenever you create any page include get_header();  and get_footer();

 Creating custom page template.
<?php /* Template Name: CustomPageT1 */ ?>

Use below url for more information:
https://developer.wordpress.org/themes/functionality/








No comments:

Post a Comment