Website Development Prices

Thursday, February 20, 2020

How to code Wordpress theme from zero - Part 1

You will need XAMPP and Wordpres. How to install wordpress using XAMPP.

1. Find XAMPP. Open Windows Explorer, on the left side click on Local C disk, in the up right corner type "xampp" and press Enter. You are looking for xampp icon with text xampp-control. When you see it press red X in up right corner. Then double click on it. XAMPP window will open.





2) Start Apache and MySql. Click start button in line with Apache and click start button in line of MySql. They should be both in green. Close the window by pressing X.







3) Login to your wordpress website. 
4) In Dashboard, on left side, click Posts and delete all posts, if any.





5) Then go to Pages -> All Pages and delete all pages, if any.





6) Go to Settings ->Permalinks and click on Post Name option. Your post will have name or title of that post in address bar which is more SEO friendly.



7) Open code editor. I'm using Sublime Text 3.
8) Go to themex folder. Path is C:\xampp\htdocs\police-dept-1\wp-content\themes. Open windows explorer, on the left side click local C disk, then click on xampp folder, then htdocs, then your database name, in mu example is police-dept-1, then click on wp-content folder and on themes folder.



9) Create new folder, name it, to store our theme files. I'll name mine zero-theme.



10) Open new file in Sublime text, press CTRL + S to save it. Name it style.css. Then create another new file, press CTRL + S and name it index.php. These are two basic files to activate our theme. Also, you will need screenshot is name of image, save as .png, size is 1200x900px. Mine is less.


11) On Dashboard go to Appereance -> Themes. Your theme will appear with your screenshot.



12) Activate your theme. Open new tab and open you theme. Path is http://localhost/police-dept-1/, localhost and name of your database. The page is empty.

13) Type or copy and paste next lines. /* everything here is comment */

/*
Theme Name: zero-theme
Author: Marija Rikic
URL: https://www.marijarikic.com
Version: 1.0
Tags: simple theme, wordpress theme, 2 columns
Description: simple wordpress theme

*/



14) Go to Themes again and refresh it or press F5 and click on Theme Details. 



15) Open new file, press CTRL + S to save it as functions.php. Keeps all functionality within a theme. Open new file, press CTRL + S to save it as page.php. Wordpress will use page.php  whenever the page is visited. You can assign specific templates to a specific page. Open new file, press CTRL + S to save it as single.php. This is single blog post. Open new file, press CTRL + S to save it as archive.php. All post withina blog . Open new file, press CTRL + S to save it as front-page.php. It is home page. Open new file, press CTRL + S to save it as search.php. This page will display all search results. Open new file, press CTRL + S to save it as 404.php. This is error page. Page that does not exist.



16) Go to front-page.php. Type This is front page. Go to your theme refresh it or press F5.



17)  Open new file, press CTRL + S to save it as header.php. We will put navigation menu here.  Open new file, press CTRL + S to save it as footer.php.

18) Go to front-page.php. We will include header and footer. 

<?php get_header();?>

<div class="container">

<h1><?php the_title();?></h1>

</div>

<?php get_footer();?>

Go to header.php file and type This is header. Then go to footer.php and type This is footer. Save all three files. Refresh your home page.

19) Go to header.php and type or copy and paste this code.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......

20) Go to footer.php and copey and paste this code

</body>

</html>

21) Go to header.php and add this code

<?php wp_head();?>

under title tags.

Go to footer.php and add

<?php wp_footer();?>

before closing body tag.

Refresh theme page. Wordpress admin bar is shown.




No comments:

Post a Comment

Note: Only a member of this blog may post a comment.