How To Create A Custom Page In WordPress For Begginers – Part 1
Here you will see how you can create a simple custom page in wordpress using the best practices. If you want to start learning web development, wordpress is the best option for you because is not hard to understand and also you can do almost everything you want in this CMS. Wordpress has evolved a lot in the last years and I am sure it will be better and better, let's not forget that it started as a blog platform and now you can do all types of websites from simple presentation website to complex ecommerce websites.
Create your first page in wordpress
What you need to complete this tutorial:
- A fresh wordpress instalation does not matter if you have it on a server or on localhost. All that matters is to work.
- We will use Wordpress 5 (the lastest version)
- A text editor to edit theme files (I use Aptana because I edit files directly on the server)
Let's start with the first steps in building our website. First of all we will have to create the header. (as you probably know the header is the top part of the website, where we normally have the logo of the website and the menu).
First of all open up your wordpress instalation and go in the wp-content folder, you should have the following folder structure:
Step 1
Now we will have ti rename the twentynineteen folder, this will be the theme we will use and have to change the name in order to stop the updates of the theme you can change it to any name you want. I will rename it to webpage. After you changed the name go in admin panel (wp-admin) -> Appearance -> Themes and activate the theme where you changed the name.
Step 2
Now we can start write few lines of code and let's start with header, find header.php and open it. We will have to remove few lines of code from here because we build everything from scratch. In order to do that, we will write our own html code. Our header.php file should have the following code in it:
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="container">
<div class="logo">
<a href="<?=home_url();?>">Tutorial</a>
</div>
<div class="main_menu_container">
<?php
$home_menu = wp_nav_menu(array(
'theme_location' => 'menu-1'
));
?>
</div>
</div>
</header>
Wp_nav_menu() function just get the menu created in the admin panel and show it on frontend, we will have to create the menu in next step I will show you how.
Home_url() function return the home url.
Now, we have to in Appearance -> Menus and here create your first menu. Add Menu name and hit Create menu button. From left sidebar you can check any page or post you want to add in the menu and just hit update when you are ready.
If you did all the steps until now, if you refresh the page of your website you should see the logo and menu. Now we have to create some style for our header. To do that find the style.css file and add the following code at the bottom of the file:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
max-width:1230px;
padding:0 15px;
margin:0 auto;
display:block;
}
.container:after{
content:"";
clear:both;
display:block;
}
header{
padding:15px 0;
}
header .submenu-expand,
header .hidden-links{
display:none;
}
header ul{
margin:0;
}
header .logo{
float:left;
width:30%;
padding-right:15px;
}
header .logo a{
font-size:24px;
color:#000;
font-weight:700;
}
header .main_menu_container{
float:left;
width:70%;
padding-left:15px;
text-align:right;
}
header .main_menu_container li{
display:inline-block;
padding:0 15px;
}
header .main_menu_container li:last-child{
padding-right:0;
}
With the above code we add some style to our header. After this step your header should look like this:
Check your website if it doesn't look like this please check again all steps because you surely did something wrong. If it looks like the one from the above image we can go further. Here is where the interesting part start because we will start creating website's homepage, and the first section will be a a full width section with a headline description and background image. In order to that we will need the following:
-
- Slick slider which can be download from here - download the js version
- Advanced Custom Fields - this is a wordpress plugin and it is required. There is a paid version too but for this tutorial you can start with the free version.
Step 3 - Create first section on homepage
Go in the wordpress folder structure and create a new folder in wo-content named: templates. In this create a new file named: homepage.php and add the following lines of code:
<?php /* * Template name: Homepage */ ?>
The above code will create a new template in wordpress called Homepage.
Go in admin -> Pages and create a new page named: Home. From the right menu click on Page Attributes and select Homepage from Template dropdown and publish.
Now we have to create the editable fields for this page in admin from where you will be able to edit the information which will be showed on the homapage, to do that go in admin -> Custom Fields -> Add new. Add a name for the group, I name it Homepage group.
At Location section we will have to select from the first dropdown: Page template and in the second dropdown: our page template we have just created: Homepage. Now all fields we will create here will be assigned to the Homepage template.
First of all we will create the html structure for this section, open up homepage.php file and copy-paste the following code:
<?php
/*
* Template name: Homepage
*/
?>
<?php get_header();?>
<section id="first_section" class="first_section background">
<div class="container">
<h1>Lorem Ipsum is simply dummy text</h1>
<div class="description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</section>
<?php get_footer();?>
This is the html structure which will be used for our section, but now we have to create the admin fields in order to edit all these informations on our website. To do that we will have to create new fields in admin and then get the info from them and show it on frontend.
We will create these fields and will continue with the implementation of the hompage in the next part of this tutorial.