Easy Steps for Coding a Custom WordPress Landing Page

January 28. 2021

It doesn’t take much experience with web design to learn that creating a good landing page is not easy. You need to have a clear idea of what your landing page is supposed to be about. And you need to understand your visitors and guide their attention towards conversion. Luckily, if you are familiar with the basics of web coding, you will have the necessary freedom to optimize your page as you see fit. With that in mind, let’s see what coding a custom WordPress landing page is all about.

The importance of a landing page

Before we go over specific steps of coding, let’s first elaborate on why having a good landing page is important. There is hardly an online guide to website building that won’t mention the vital importance of having a decent landing page. Whether your website is about selling a product, offering a service, or gathering data, you need to have a good landing page.

Unfortunately, creating a good landing page is not easy. You need to have a clear idea of what your landing is supposed to be like. And you need to understand your audience in order to guide them towards conversions. A poorly optimized landing page can considerably lower your performance, and potentially ruin your otherwise stellar online presence. Remember, the landing page is usually the last step before your visitor converts into a customer. So, do your best to make it as good as possible. Luckily, if you know the basics of web programming, you can easily code a custom landing page. This gives you a considerable amount of freedom, which is usually necessary for a truly functional page. So, with that in mind, let’s go step by step into the necessary code for creating a WP landing page.

Coding a custom WordPress landing page

While the steps we will outline are fairly simple, you should always consider consulting a professional web designer. Certain websites can be quite complicated with numerous plugins running in the background. And some of those plugins can potentially cause or experience issues if you are not sure what you are doing. While you can disable plugins without access to the admin area, you really ought to avoid putting yourself in too much trouble. If you experience any difficulty down the line, contact a professional web designer to help you out.

Create a child theme

While you can, theoretically, create a brand new parent theme, you should go with a child theme. They are much better suited for customization, which gives you more freedom to create unique landing pages. Since we’ve covered how to create a child theme, we won’t go over it again here. The only thing we will mention is that you need to have both the style.css and functions.php files in your child theme directory in order to proceed.

Build a Style.css file

In the style.css file you simply need to add the following code:

/*

Theme Name:  Landing Page Theme

Description:  Child theme with custom landing page

Author:       Default Writer

Author URI:   https://www.wpfullcare.com

*/

Build a Functions.php file

In the functions.php file, you need to add the following code. Doing so will allow you to register your child style sheet file.

<?php

// Parent Theme Styles //

// https://codex.wordpress.org/Child_Themes //

function theme_enqueue_styles() {

$parent_style = ‘parent-style’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );

wp_enqueue_style( ‘child-style’,

get_stylesheet_directory_uri() . ‘/style.css’,

array( $parent_style )

);

}

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

Install and activate your child theme

With this done, you can proceed to install and activate your child theme. When it comes to WordPress themes in general, you want to test them locally on a different WP website. As we mentioned, accidents do happen. And you really ought to avoid disabling your website. Once you set up a local WordPress site, proceed to upload your theme. Once you activate it make sure that your child theme is working and that you can add styles. Go to the style.css file and alter some parts of the code in order to see if it is working.

Build a custom page

If everything is in order, you can proceed to create a custom page in your child theme. To do you need to create a new file in your child’s theme. Once you do so, save it as page-landing.php. In that file you need to add the following code:

<?php

/**

Template Name: Landing Page

**/

?>

Now, head to the template dropdown and choose your landing page from the menu. You will need to pick a featured image to use as your background (pick something large and simple for now, as you can experiment later). Then add your copy and publish the added page. Trying to review your page now will only bring you to a black screen. This is because you still haven’t added the following markup to the page-landing.php.

<div id=”landing-page” class=”hfeed site”>

<div class=”site-branding”>

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></p>

</div><!– .site-branding –>

Once you add it and preview your page you should see your site title along with a white background and a large background image.

Display content

To display the rest of the content on your landing page you need to add the following markup to the page-landing.php. You need to do so just below the <!– .site-branding –> line in order for it to function properly.

<div class=”sidebar sidebar-bribe”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class=”landing-title”><?php the_title(”); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php endwhile; ?>

<?php endif; ?> <!–  mdl-cell-8 //#primary  –>

</div>

Coding a custom WordPress landing page is almost done. All you have to do is to set up the style for it. The simplest way to do this is to only the style.css file and the necessary code to it. As there are literally limitless options to how your page can look, we won’t give you a strict example to follow. Instead, we will recommend that you find a style that you like and copy it. That way you will figure out how different aspects of its function.