Convert static HTML template into wordpress

 First download file from here for template -> https://github.com/LearnWebCode/university-static

And go to template index.html file and copy header section and paste after body in header.php

And go to index.html and copy footer section and paste in theme footer.php above body.

Now go to template folder and copy src build css and images folder to theme folder.

Now i have new styles in css folder i want load this so update university_files() in functions.php like->

wp_enqueue_style('university_main_styles', get_stylesheet_uri());

to 

  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));

and save and refresh blog.

also remove body css color from style.css

And for load fontawesome copy link from index.html and add update university_files() function like below ->

function university_files() {
   wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

and save it check theme footer.

and same do for google custom fonts like below ->

function university_files() {
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
   wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

and save


Now go to index.html and copy main content between header and footer and copy and paste in index.php by removing while loop and save.

Now display images from index.php file use function like below ->

<div class="page-banner__bg-image"
    style="background-image: url(<?php echo get_theme_file_uri('images/library-hero.jpg')  ?>)"></div>

and save check theme.


Now load scripts before body tag so update university_files() function like below -> 

function university_files() {
  wp_enqueue_script("main-university-js", get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');

and save and check theme.

Comments

Post a Comment

Popular posts from this blog

Basics Of PHP

 Introduction to PHP PHP (Hypertext Preprocessor) is a server-side scripting language designed for web development. PHP code is executed on the server, and the result is sent to the browser as plain HTML. PHP statements end with a semicolon ; . PHP is case-sensitive for variable names but not for keywords. Variables Variables declared with $ symbol -> $name =  "Anil"; Types are determined automatically (loosely typed). Variable names must start with a letter or an underscore _. Data Types String → "Hello, World!" Integer → 25 Float → 10.5 Boolean → true or false Array → ["PHP", "MySQL", "JavaScript"] Object → Instance of a class NULL → Represents a variable with no value Strings Functions strlen($str) → Returns the length of a string. str_replace("find", "replace", $str) → Replaces text within a string. strtolower($str) → Converts to lowercase. strtoupper($str) → Converts to uppercase. substr($str, start,...
Read more

Creating App.js for Node Application

 In this post we will setup app.js file to make app running first write below code below ->  import express from "express" import cors from "cors" import morgan from "morgan" const app = express () app. use ( cors ()) app. use ( express . json ()) app. use ( morgan("dev") ) app. get ( '/' , ( req , res ) => {     res . json ({message: "CMS Backend API Running." }) }) export default app and save  express.json() — JSON body parse karta hai cors() — frontend (Next.js) ko API call karne deta hai morgan("dev") — console me request logs dikhata hai Base route / — test karne ke liye ready hai
Read more

WordPress Full Guide For Developer

WordPress Setup in Localhost The Famous loop in Wordpress for Generating posts Setting global Header and Footer in Wordpress Convert static HTML template into wordpress Interior Page Template Dynamic in Wordpress Display dynamic title in Browser tab for wordpress for every page Make manually menu links for wordpress Add homepage url in Header logo in wordpress Create parent and children page in Wordpress with BreadCrumb
Read more