Skip to content

Latest commit

 

History

History
132 lines (116 loc) · 3.76 KB

wordpress-essential-codes.md

File metadata and controls

132 lines (116 loc) · 3.76 KB
Raw

Welcome 📘

You must have a basic knowlwdge of wordpress installation configure and how it works.

add custome theme in the wordpress cms

  1. Copy your custom theme folder and place into wp_content/themes .
  2. Make style.css file in the theme root directory and place following code 
        /*
    Theme Name: Theme Name
    Theme URI: 
    Author: Your name
    Email: [email protected]
    Author URI: 
    */
  3. And go to admin panel and activate the theme.

Make basic files in the your theme root directory

  1. index.php (main template file)
  2. header.php - Put the header part of the index.php. Also put the wp_head() with php tag.
  3. footer.php - Put the footer part of the index.php. Also put the wp_footer() with php tag.
  4. functions.php - You need to make and register, initilize the stylesheet and scripts, etc or make widgets.

Linking the stylesheets with functions.php

  1. If you have a cdn links place theme as usual.
  2. Make function (load_stylesheet()) and load stylesheet. 
    function load_stylesheet(){

    wp_register_style("styleone",get_template_directory_uri()."/assets/style-one.css",array(),"1","all");
wp_enqueue_style("styleone");
    

    }
add_action("wp_enqueue_scripts","load_stylesheet");
// it helps load your style and script assets according to wordpress asset management.

Linking the scripts with functions.php

  1. If you have a cdn links place theme as usual.
  2. Make function (load_scripts()) and load scripts. 
    function load_scripts(){
  wp_register_script("jquery",get_template_directory_uri()."/assets/js/jquery-3.2.1.min.js",array(),"1","all");
  wp_enqueue_script("jquery");
}

Linking assets in the file like images , favicon, background image etc

  1. Link your asset to show image of the theme , use 
    bloginfo("template_directory")/assets/images/banner1.jpg

Example:

 <img src=" bloginfo("template_directory") /assets/images/banner1.jpg" alt=""/>

Including header and footer .php in to the template page like index.php

  1. use get_header() and get_footer() in the template top and bottom.

Registering the nav/menu in the function.php

  1. Use following code to register menu. 
    add_theme_support( 'menus' );
register_nav_menus(
    array(
        'top_menu' => 'Header menu',
        'footer_menu' => 'Footer menu',
    ) 
);
    Your register menu shows in to wp-admin > theme > menu area.

Showing the register menu in theme

  1. Place the following code in the menu section of your theme, may be header.php 
    wp_nav_menu(
    array(
        'theme_location'=>"top_menu", // must be same in function.php register_nav_menus
        'menu'=>"menu-desktop-menu", // id of the element
        'container'=>'ul', // menu ul 
        "menu_class"=>"menu" // menu ul class
    )
);

Register and making the weigets function.php

  1. Use following code to register widgets. 
    function sociallinks_widgets_init() {
 register_sidebar(
  array(
   'name'          => __( 'Social Links', 'theme_name' ),
   'id'            => 'sidebar-1',
   'description'   => __( 'Add widgets here to appear in your footer.', 'theme_name' ),
   // you may find more options 
  )
 );
}
    Your register widgets shows in to wp-admin > theme > widgets area.

Happy Coding 😄