Basic things to know when converting HTML page to WordPress Website.

Divide HTML in three parts

hearder.php

Index.php

Footer.php

header.php :- here you have to put whole head content which is necessary for all the pages of your website.(like :- link style-sheet, j query, navigation bar etc)

Index.php :- here you have to put all main content of your home page. and call the header in up and footer in foot     of   the page.

footer.php :- here you have put all content which you want to show all the pages of your website.(like:- links,copy-write etc.)

Attach Main style

After dividing all the part you need to attach a main stylesheet to worpress theme whithous this css you theme will not work. It is not neccesary that it contain you webiste style but it have to content some information(link theme name, author name etc ).(In header.php in head section)

Syntax to attach stylesheet:- wp_enqueue_style( ‘style’, get_stylesheet_uri() );
you have to put stylesheet.css in root directory(name will be style.css its not necessary but i will recommend it )

Multiple stylesheets

If you have Multiple style for you website use the syntax bellow.(In header.php in head section)

wp_enqueue_style( you css name.css get_template_directory_uri() . ‘location of style and your css name.css’,false,’1.1′,’all’);

Attach jquery libarary to you website.(In header.php in head section)

Syntax for attach Jquery libary to your website

wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘Location libarary name’, array ( ‘jquery’ ), 1.1, true);

wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/js/jquery-2.2.4.min.js’, array ( ‘jquery’ ), 1.1, true);(Like this in my case).

Attach multiple jquery to your website.

Syntax for attach multiple Jquery Libarary to you website(In function.php in head section)

wp_enqueue_script( ‘twentyseventeen-bootstrap’, get_theme_file_uri( ‘location/name.js’ ), array( ‘jquery’ ), ‘1.0’, true );

wp_enqueue_script( ‘twentyseventeen-bootstrap’, get_theme_file_uri( ‘/js/bootstrap.min.js’ ), array( ‘jquery’ ), ‘1.0’, true );(In my case)

For Navigation Menu Syntax for creating navigation menu.

<?php wp_nav_menu( array( ‘theme_location’ => ‘top’,( location Where you want navibar) ‘menu_class’     => ‘menuzord-menu’,(this set the class of ul (memuzord-menu)) ‘menu_id’        => ‘top-menu’,(this Set the id of whole navigation bar) ) ); ?>

 Set class name of ul child.

Syntax (in fuction.php)

function new_submenu_class($menu) {  $menu = preg_replace(‘/ class=”sub-menu”/’,’/ class=”dropdown” /’,$menu);            return $menu;       }
add_filter(‘wp_nav_menu’,’new_submenu_class’);

This will set the class name dropdown to your ul child. it is generally used when you want to make some style changes to to you navigation bar

For making Menu links active.

Syntax(In fuction.php)

function special_nav_class ($classes, $item) {    if (in_array(‘current-page-ancestor’, $classes) || in_array(‘current-menu-item’, $classes) ){        $classes[] = ‘active ‘;    }    return $classes;        }

This will set the navigation link to active if clicked. It only work on main menu link not on sub menu

For making menu link active when click on sub menu.

Syntax(In fucntion.php)

function be_menu_item_classes( $classes, $item, $args ) {
if( ‘header’ !== $args->theme_location ) return $classes;
if( ( is_singular( ‘post’ ) || is_category() || is_tag() ) && ‘Blog’ == $item->title ) $classes[] = ‘current-menu-item’; if( ( is_singular( ‘code’ ) || is_tax( ‘code-tag’ ) ) && ‘Code’ == $item->title ) $classes[] = ‘current-menu-item’; if( is_singular( ‘projects’ ) && ‘Case Studies’ == $item->title ) $classes[] = ‘current-menu-item’; return array_unique( $classes ); } add_filter( ‘nav_menu_css_class’, ‘be_menu_item_classes’, 10, 3 );

java Script no conflict.

Some time it happen your jquery may conflict with each other and your website will not work properly. In that case you have to find out which jquery is causing issue by deactivating them and when you will find one just put the code in it’

Syntax :- var $ = jQuery.noConflict();

Put the image Manually in php page.

If you want to put any images on php pages like footer.php, Header.php etc

Syntax <img src=”<?php echo get_bloginfo(‘template_url’) ?>Location/imagename.png”/>

 

Thats all this things which i know which basic but very important to know if converting HTML page to WordPress.
If you want to know any thing more about WordPress or html or any thing about Website design or website development leave a comment below or contact me using contact form

 

Note:- I recommend to use free theme of  WordPress and make changes on it

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.