Create a homepage in wordpress

New Page

How to Create a Custom Home Page in WordPress

Last Updated On August 26, 2021 By Editorial Team | Reader Disclosure Disclosure : Our content is endorsed by the reader. This means that if you click on some of our links, we may earn a commission. See how WPBeginner is funded, why it’s important, and how you can support us.

Comparer 149 Fee Tweet Fee Facebook Messenger WhatsApp Email

A menu, users ask us if it is possible to create a custom home page in WordPress.

By default, WordPress displays your blog posts on the home page. However, as a business website, you may want to create a more attractive home page that helps users find what they need and increases your sales conversion.

In this article, all you need to do is create a custom homepage in WordPress easily. The most rare varios methods, y can choose and that the result is easier.

Create a custom homepage in WordPress Create a custom homepage in WordPress

What is a homepage?

A homepage is a predetermined introductory page or the main page of a website. Is the page that aparece cuando alguien ingresa el nom de dominio de su sitio web en la barra de direcciones de su navegador.

Sample Home Page Sample Home Page

The main purpose of the home page is to introduce users to your website or business. Ideally, you should provide users with essential information about your business, so they can continue to explore other pages on your site.

By default, WordPress displays your recent blog posts on the home page. This is not good as it only shows some of your current items.

If you run a business website, the default home page doesn’t tell users about your business, products, or services. Nor does it provide users with a way to contact you.

The good news is that WordPress comes with a built-in function to create a custom homepage.

Selecting a custom page for using the home page in WordPress

WordPress le permite usar fácilmente cualquier página de su sitio web como su página de inicio. Simplemente puede ir a Páginas » Agregar nueva página dentro del área de administración de WordPress para crear una nueva página.

Démosle a esta página el título ‘Inicio’ y publíquela. Utilizará esta página como su página de inicio personalizada.

No se preocupe por el diseño o el diseño en este momento. Le mostraremos cómo diseñar su página de inicio más adelante en este artículo.

Now, if you want to run a blog on your site, then you need to create a separate blog page to display your posts.

Once again, go to Pages » Add New page and create a page titled ‘Blog’. Go ahead and publish the blank page.

After creating the pages, you need to visit Settings » Reading page in your WordPress admin. From here select ‘A static page’ option under ‘Your homepage displays’ section.

Select home and blog pages Select home and blog pages

Next, you need to select the homepage and the blog pages you created earlier.

Don’t forget to click on the ‘Save changes’ button to store your settings.

Now that you have set up a page to be used as your custom homepage, let’s start designing the custom home page for your WordPress site.

Method 1. Create a Custom Homepage in WordPress using Gutenberg

WordPress introduced a new block-based editor called Gutenberg in December 2018. This new editor allows users to not just write content but create beautiful layouts as well.

It uses blocks for each content element which enables you to organize content blocks to create a page structure that you like.

WordPress includes blocks that can be used for design purposes like cover images, columns, tables, text and media, galleries, and more.

Editing Your Custom Home Page Layout Using Gutenberg Changing Your Custom Home Page Layout Using Gutenberg

Each block comes with its own settings, which allows you to customize its appearance to meet your design requirements.

You can extend available blocks with Gutenberg block plugins to add more blocks to your arsenal. These plugins allow you to use advanced elements like testimonials, sliders, services, and other common design features.

Using advanced block library plugins to do homepage layout Using advanced block library plugins to create homepage layout

You can also use Gutenberg ready WordPress themes which give you more flexibility to work with blocks.

We recommend using Astra, it comes with Gutenberg website templates that you can install using their Astra Starter Sites plugin.

Once you import a template, you can edit it using the default WordPress editor and create a highly professional looking homepage for your website.

Method 2. Create a Custom Homepage in WordPress using Page Builders

This method is very easy and does not require any coding or design skills. For this method, you will be using a WordPress page builder plugin.

A page builder plugin allows you to easily create custom page layouts using a simple drag and drop interface.

We recommend using SeedProd because it is the most beginner-friendly page builder plugin on the market. It comes with a lot of templates and offers multiple customization options.

For this tutorial, we will be using the SeedProd Pro version and show you it wide range of premium templates and customization options. There is also a free version available but it has limited selection of templates and features.

First, you’ll have to install and activate SeedProd Pro on your website. You can follow our step by step guide on how to install a WordPress plugin.

Once the plugin is active, you’ll be taken to the SeedProd page in the WordPress admin panel, where you’ll need to enter the license key. You can find the key in your SeedProd account area.

Enter your license key Enter your license key

After entering the key, go ahead and click the ‘Verify Key’ button.

Next, you can navigate to SeedProd » Pages to create a homepage. Simply click on the ‘Add New Landing Page’ button to start.

Creating a new landing page in SeedProd Creating a new landing page in SeedProd

On the next screen, you can choose from a template for your homepage. SeedProd offers many professionally designed templates that you can customize according to your business needs.

To select a template, simply hover over the template and click the orange tick button.

Choose a homepage template Choose a homepage template

A popup window will now appear where you’ll need to enter a name for your landing page template and edit its URL. Once that’s done, go ahead and click the ‘Save and Start Editing the Page’ button.

Enter a name for your homepage Enter a name for your homepage

Next, you’ll be taken to the SeedProd drag and drop page builder, where you can customize your homepage the way you want.

The plugin offers different blocks which can be added to the existing template. For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as countdown, contact form, and more.

Add blocks using the drag and drop builder Add blocks using the drag and drop builder

Besides that, you can also click on existing blocks in the template and edit them. You can change their color, font, text, alignment, size, and more.

Edit blocks on the template Edit blocks on the template

Once you’re done customizing your homepage, don’t forget to click the ‘Save’ button to store your changes.

After that, you can head over to the ‘Connect’ tab and integrate different email marketing services. SeedProd supports popular platforms like Drip, Constant Contact, AWeber, and more.

Connect email marketing services Connect email marketing services

Next, you can go to the ‘Page Settings’ tab to publish your custom homepage. Simply click on the Page Status toggle to change it from Draft to Publish.

Publish your homepage Publish your homepage

There are more options under the Page Settings tab. For instance, you can change the SEO settings, edit the page title, add scripts, and connect a custom domain.

After changing the page settings, go ahead and close the landing page builder.

Next, you’ll need to navigate to Settings » Reading and tell WordPress to use the newly created landing page as your site’s homepage.

Under the ‘Your homepage settings’ section, go ahead and select the ‘A static page’ option. Then choose your custom homepage from the dropdown menu for ‘Homepage’.

Choose static page settings and select your custom homepage Choose static page settings and select your custom homepage

Once that’s done, save your changes and visit your website to see the new custom homepage in action.

Custom homepage example Custom homepage example

Method 3. Manually Create a Custom Homepage in WordPress (Coding Required)

This method is not recommended for beginners as it requires coding. You need to be familiar with the WordPress coding practices, PHP, HTML, and CSS to use this method.

Let’s see how this works.

Your WordPress theme is made up of different files. Some of these files are called templates and control the display of certain areas of your website. See our WordPress template hierarchy cheat sheet for more details.

One of these templates is called front-page.php. If your theme has this template, then WordPress will automatically use it to display your custom homepage.

front-page.php template front-page.php template

However, if your theme does not have it, then you can create one for yourself/

Simply create a blank file and save it as front-page.php. After that you need to upload it to your current theme’s folder on your WordPress hosting account using FTP.

As soon as you upload this file, WordPress will start using it to display your homepage. However, since this file is completely empty, you will see a blank white page.

To fix this, you can start adding your HTML code to display contents of your custom homepage. An easier approach is to use the existing code and templates in your WordPress theme.

For example, you can use the same header and footer. WordPress makes it super easy to include those templates.

Here is a sample code where we removed the content and sidebars while preserving the header and navigation templates from the theme.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<?php /*

This page is used to display the static frontpage.

*/

 

// Fetch theme header template

get_header(); ?>

     <div id= “primary” <?php astra_primary_class(); ?>>

 

     <div class = “custom-homepage-container” >

 

     You custom homepage code goes here

 

     </div>

 

     </div><!– #primary –>

//Fetch the theme footer template

<?php get_footer(); ?>

Tips on Making an Effective Custom Homepage in WordPress

Your website’s homepage is the most important page on your website. Users look at it to learn more about your business, products, and services.

We recommend keeping your homepage design as simple as possible. On our own websites, we have learned that our users find simpler layouts more helpful.

Try to avoid clutter, but don’t hide important information that your users would want to see on the homepage. You also need to prioritize which content appears first in your layout.

Write down the goals you want to achieve before making a custom homepage for your website. This exercise will help you come up with a clear design goal.

For most businesses and blogs, the number one goal is to convert website visitors into customers. To achieve this, you’ll need OptinMonster.

It is the best WordPress popup plugin and lead generation software. It helps you convert website visitors into subscribers and paying customers.

Next, you would want to track how your custom homepage is performing. For this, you need to install Google Analytics on your website. It helps you see where your users are coming from and what they do on your website.

You would also want to make it easier for your users to contact you. For this, you will need the WPForms plugin which is the best WordPress form plugin on the market.

You can also add a click to call button your website, so people can easily call your business phone.

Lastly, we recommend you to look around at your competitors and other popular sites in your industry/niche. We are not asking you to copy their design, but to learn from their best practices and then apply it on your own homepage layout.

We hope this article helped you easily create a custom homepage in WordPress. You may also want to see our proven tips to increase your blog traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Shares 149 Share Tweet Share Facebook Messenger WhatsApp Email

Pages » Set the Homepage (Front Page)

A homepage is the front door to your site. Using the steps in this guide, you can change your homepage to any page you’ve created.

Table of Contents

  1. Step 1: Publish the Homepage
  2. Step 2: Set the Homepage
    1. Set the Homepage from Settings
    2. Set the Homepage from the Pages Screen
    3. Set the Homepage from the Customizer
  3. My Homepage Disappeared!

Step 1: Publish the Homepage

If you already have a new page created that you wish to use as your homepage, skip this section and move to Step 2.

  1. Go to Pages screen in your WordPress.com dashboard.
  2. Click on Add New Page.
  3. Give the page a title like ‘Home’, or whatever you would like to call it.
  4. Add all the content (like text and images) you want on your page.
  5. Publish the new page.

The page sidebar menu in the page editor with an arrow pointing to the Publish button. Publishing a page in the editor.

💡

If you’ve chosen a theme because you liked how the home page is already laid out in the demo, you can choose the Replace my homepage content with the theme’s homepage option while activating the theme.

↑ Table of Contents ↑

Step 2: Set the Homepage

You can set the new page you created in step 1 as your site’s homepage using one of the methods described below.

📌

To set the static homepage, your site must have at least one published page. Go back to Step 1 if you don’t see it.

Set the Homepage from Settings
  1. Go to Settings → Reading in the left sidebar of your site dashboard.
  2. Next to the label Your homepage displays, select the radio button A static page.
  3. From the drop-down menu next to Homepage, choose your new page as the front page for your site.
  4. Click Save Changes at the bottom of the page.

Screenshot of home page display settings in Settings → Reading. Setting the Homepage from Settings → Reading.

Set the Homepage from the Pages Screen

If your theme has already been set to use a static page as the home page, you can open your list of pages and click on the three dots next to a page, then select Set as Homepage.

Screenshot of the ellipsis menu on the Pages screen, with Set as Home Page highlighted. Setting the Homepage from Pages.

Set the Homepage from the Customizer

To set your home page from the Customizer:

  1. Go to Appearance → Customize.
  2. Sélectionnez Paramètres de la page d’accueil .
  3. Sélectionnez Une page statique .
  4. Dans le menu déroulant sous Page d’ accueil , choisissez votre nouvelle page comme première page de votre site.
  5. Cliquez sur Enregistrer les modifications .

Screenshot of the home page settings in the Customizer.Réglage de la page d’accueil à partir du Customizer.

↑ Table des matières ↑

Ma page d’accueil a disparu !

If your homepage is gone, chances are you just changed themes and added the new theme’s demo content to your site. Do not worry! Your old homepage will still be available in Pages → Drafts. You can republish the page and then restore it to your homepage, following the instructions above.

Versatile plans and pricing

  • Libre

    plan-free-circle

    Ideal for students

  • Personnel

    plan-personal-circle

    Ideal for hobbyists

  • Prime

    plan-premium-circle

    Ideal for freelancers

  • Company

    plan-business-circle

    Ideal for small businesses

Choose a package

Still confused?

Contact support.

Help us improve:

We are always looking to improve our documentation. If this page didn’t answer your question or made you want to know more, let us know! We love to hear your comments. For help, please use the forums or contact the support form. Thanks!

Nom

E-mail

Site Internet

D

WordPress tutorials for beginners

Menu

Create your new blog or website for free Let’s Go!

Skip to content

Look for

  • Get the most out of WordPress.com
  • Go Fast: A Checklist
  • Launch your site: the movie
  • Get startedSave and configure basic settings
  • Get ComfyLearn to navigate WordPress.com
  • Get personalityChoose a theme
  • Get configuredPersonalize your site
  • Get publishedCreate posts, pages, and menus
  • Get FlashyAméliorez votre site avec des widgets
  • Connectez-vousExplorez la communauté et faites-vous remarquer
  • Obtenez MobileBlog en déplacement
  • Obtenez le jargon
  • Obtenir une page d’accueil

Vous voulez intensifier votre jeu de blog ?  

The Intro to Blogging Course from WordPress.com was built to help you learn about blogging while working through lessons focused on creating great content.  

wpcourses-logo

Sign Up Now

Get a Homepage

You can easily turn your blog into a website, with a static homepage that people will land on every time they arrive. Combine a homepage with other static pages and some custom menus to help visitors navigate, and before you can say “Told you so!” you’ve got a website.

Create your homepage

Start off by creating the page you’d like to use as your homepage. Go to My Sites → Pages → Add. Call it “Home.” Don’t worry about writing it yet — we’re just getting your website set up here. Stick in a bit of placeholder text if you’d like.

Now, create a second, blank page by going once again to My Sites → Pages → Add and call it something like “News,” or “Blog,” or “Posts” — a name that will help you remember that this is the page on which your posts will appear.

To designate your static homepage, go to My Sites → Appearance → Customize → Homepage Settings:

homepage settings

Luego, en Pantallas de la página principal , elija Una página estática . A continuación, haga clic en la lista desplegable Página de inicio  y seleccione la página “Inicio” que creó como su página de inicio estática:

homepage-settings-homepage

A continuation, en el menú desplegable de la página Publicaciones , seleccione la página “Publicaciones” que creó. (Aquí es donde aparecerán sus nuevas publicaciones de blog, en caso de que elija escribir publicaciones para su sitio).

homepage-settings-messages-page

Par último, haga clic en Publicar  para que estos cambios surtan efecto.

Now when you go to your web address, you’ll see your new home page instead of blog posts. Of course, you’re seeing a blank page or placeholder text, but still! You once created a website. Prestige.

Make your home page beautiful

Now that you’ve laid the technical groundwork for a static home page, it’s really just a matter of deciding how to present it in an attractive way. Idées d’some of foin Here :

  • Create a gallery, a single full-width image, or a slideshow to showcase some of your best work. We cover this on Get Flashy.
  • Create a welcome message and a linked list of your favorite posts.
  • Go wild with images, text, galleries, and media that set the tone for your site.

Make your home page work for you

If you want your home page to really serve your interests, be sure to consider including:

  • A clear and personalized menu that points to your best blog content, pages and categories. You’ll learn all about that at Get Published.
  • A stunning visual appearance, from the header to custom colors and fonts. You’ll learn how to put them into action in Get Configured .
  • Some useful widgets in your blog sidebar, to help people get their bearings or get an at-a-glance picture of what your site or blog is all about. You can get information on how to set up and get the most out of widgets at Get Flashy.

That’s it: a start page is now available to transform the site from a simple blog into a hermoso website.

Share this:

  • Click to email a link to a friend (opens in a new window)
  • Click to share on Facebook (opens in a new window)
  • Click to share on Twitter (opens in a new window)
  • Click to share on LinkedIn (opens in a new window)
  • Click to print (opens in a new window)
  • Suite
  • Click to share on Reddit (opens in a new window)

Like that:

I like loading…

Want to step up your blogging game?  

WordPress.com’s Intro to Blogging course was created to help learn about blogging, but deals with lessons focused on creating excellent content.  

wpcourses-logo

Register now

  • Questions? Get answers from support
  • Print this guide
  • Glossary
  • Blog at WordPress.com.
  • WordPress.com Support
  • WordPress.tv

Automatique creation

Google Google translator

Google Google Translate


Video Create a homepage in wordpress

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…