Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

How To Create a Website On Your Own – WordPress Part 1

How To Create a Website On Your Own – WordPress Part 1

In this tutorial I will show you step by step how to create a website on your own with CSS, HTML, jQuery and PHP. There is no need to know any of this, because you will understand when you will start to write your first lines of code. For this tutorial we will use Wordpress, so if you don't have a domain and host you can install xamp or other php development enviroment, in this tutorial we won't cover this part, so you should install latest version of Wordpress on your localhost. 

How To Create a Website On Your Own - Step 1

First step is to create our custom templates for the website, to do that, create a new folder: templates in the root folder of your theme. Let's assume you use Twenty Nineteen theme, just create a new folder named templates in this theme. Then, in templates folder we will create home.php. Open up the file and add this to the top of the file:

<?php
/*
* Template name: Home
*
*/
?>
<?php get_header();?>

<?php get_footer();?>

This will create a new template in wordpress which will be used to create our homepage template. Now go in wordpress admin -> Pages -> Create a new page: Home. In the right side of the screen find: Page Attributes -> Templates and select Home. By selecting Home as template, wordpress will know to read our home.php file everytime when somebody visits our homepage.

Now let's create our first slider in homepage. To do that we go back to home.php file we have just created few minutes ago and add the following HTML code:

<section id="homepage_slider" class="homepage_slider">
  <div class="item background" style="background-image: url();"></div>	
  <div class="item background" style="background-image: url();"></div>	
  <div class="item background" style="background-image: url();"></div>	
</section>

First we need to create the HTML structure and then create the admin fields in order to be customizable from Wordpress admin panel. In order to make this slider working we will need to add some jQuery to it. 

 

 

 

Leave a Reply

avatar
  Subscribe  
Notify of