How To Create Custom Homepage On WordPress

November 15, 2018
Tarekul Islam
WordPress

1. Use a Custom Homepage
By default, WordPress shows your latest posts on the homepage of your website. You can change that and use any page as your site’s homepage.
First you need to create a new page in WordPress, and you can name this page home. Next, you will need to create another page and let’s call this page blog as you will use it to display your blog posts.



Now go to Settings » Reading page in your WordPress admin and under ‘Front page displays’ option and switch to ‘A static page’. After that you will be able to select the pages you just created as your home and blog pages.

You can also create a custom homepage template to use for your home page. Simply create a new file on your computer using a plain text editor and add this code at the top of it.

<?php /* Template Name: Custom Homepage */ ?>

Save this file as custom-homepage.php on your desktop.
Next, you need to connect to your website using an FTP client and go to /wp-content/themes/your-current-theme/ folder. Now upload the file you created earlier to your theme folder.
Return back to the WordPress admin area and edit your home page. You will be able to select your custom homepage template under the page attributes metabox.

For more details see our guide on how to create a custom page template in WordPress.

WordPress allows you to create custom layouts for all of your pages. These custom layouts are called templates.

For example, if you have a webdesign blog, you can create a custom template that will put the PHP logo on every page about PHP.

Some themes come with many templates already created, but creating your own is a very simple process.

In this example, we’re going to add a PHP logo to all our PHP pages.

Step 1: Locate your theme’s existing pages

Using a file manager or FTP locate your theme’s directory on the server.
Drill down to the theme folder to see your existing page templates.
Locate page.php.
Open it with a script editor.

Step 2: Insert name code

Paste or type this code right before get_header(); ?>

/* Template Name: My-New-Page-Template */

Replace My-Page-Template with your own template name. You don’t need the dashes you an use spaces. Also, note that in the above example there’s no opening PHP tag because it’s up higher in the file. If your opening PHP tag is on the same line as the get_header(); ?> , then your code needs to go right after the opening tag (with a space between).

This code is what tells WordPress that this is a template file. We’ve used an existing page as a starter so we wouldn’t need to write all the code from scratch. You can do that if you are creating a very custom page. Without this code, WordPress will treat this php file like a default template if it’s in the template’s directory. This will cause you lots of problems. Be sure to have this code at the top of any page template

Step 3: Save your new file

Save the file with a new name and a .php extension. For example – NewPageTemplate.php.
Put the file on the server at /wp-content/themes/yourtheme/NewPageTemplate.php (it’s better not to have spaces in a file name.)

You can name this new file almost anything you want, but there are some names that are reserved by WordPress for special purposes. I’ve included a list of those files in the notes at the end of the tutorial.

Step 5: Add a custom logo

Open the file.
Paste the image code and styling right before the content.
Just add this code to the page.

</div>

Step 6: Apply your template to your pages

Go to Pages > Add new.
Choose My-New-Page-Template from the Page attributes.

Now every page that has this template will have the PHP logo.

Notes: Reserved file names. Do not use these to name your custom page templates

- - - style.css -The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.
    - rtl.css – The rtl stylesheet. This will be included automatically if the website’s text direction is right-to-left. This can be generated using the the RTLer plugin.
    - index.php – The main template. If your Theme provides its own templates, index.php must be present.
    - comments.php – The comments template.
    - front-page.php – The front page template, it is only used if you use a static front page.
    - home.php – The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
    - single.php – The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
    - single-.php – The single post template used when a single post from a custom post type is queried. For example, single-books.php would be used for displaying single posts from the custom post type books. index.php is used if the query template for the custom post type is not present.
    - page.php – The page template. Used when an individual Page is queried.
    - category.php – The category template. Used when a category is queried.
    - tag.php – The tag template. Used when a tag is queried.
    - taxonomy.php – The term template. Used when a term in a custom taxonomy is queried.
    - author.php – The author template. Used when an author is queried.
    - date.php – The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
    - archive.php – The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
    - search.php – The search results template. Used when a search is performed.
    - attachment.php – Attachment template. Used when viewing a single attachment.
    - image.php – Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.
    - 404.php – The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

Share This

Tarekul Islam

Related Posts