Landing pages are a great way to promote a particular product or service. In this tutorial I am going to show you how to easily and quickly, set up an attractive landing page.
Create the page template
The first thing you will need to do is to create a custom page template. Create a file within the root of your child theme and call it landing-template.php. Add the following code.
| <?php | |
| /** | |
| * Template Name: Landing page template | |
| * Description: Use this page template to create a landing page. | |
| */ | |
| // Add custom body class to the head | |
| add_filter( ‘body_class’, ‘sk_add_body_class’ ); | |
| function sk_add_body_class( $classes ) { | |
| $classes[] = ‘sk-sales’; | |
| return $classes; | |
| } | |
| //* Remove header, navigation, breadcrumbs, footer widgets, footer | |
| add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ ); | |
| remove_action( ‘genesis_header’, ‘genesis_do_header’ ); | |
| remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ ); | |
| remove_action( ‘genesis_before’, ‘genesis_do_subnav’ ); | |
| remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ ); | |
| remove_action( ‘genesis_after’, ‘genesis_footer_widget_areas’ ); | |
| remove_action( ‘genesis_after’, ‘genesis_footer_markup_open’, 11 ); | |
| remove_action( ‘genesis_after’, ‘genesis_do_footer’, 12 ); | |
| remove_action( ‘genesis_after’, ‘genesis_footer_markup_close’, 13 ); | |
| remove_action( ‘genesis_footer’, ‘genesis_footer_markup_open’, 5 ); | |
| remove_action( ‘genesis_footer’, ‘genesis_do_footer’ ); | |
| remove_action( ‘genesis_footer’, ‘genesis_footer_markup_close’, 15 ); | |
| remove_action( ‘genesis_entry_header’, ‘genesis_entry_header_markup_close’, 15 ); | |
| remove_action( ‘genesis_entry_header’, ‘genesis_do_post_title’ ); | |
| remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 ); | |
| //* Add custom header | |
| add_action( ‘genesis_header’, ‘do_header’ ); | |
| function do_header() { | |
| do_action( ‘genesis_post_title’ ); | |
| } | |
| add_action( ‘wp_enqueue_scripts’, ‘my_styles_method’ ); | |
| function my_styles_method(){ | |
| $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); | |
| $custom_css = <<<CSS | |
| body{ | |
| background-image: url(‘$url’); | |
| background-size: cover; | |
| } | |
| CSS; | |
| wp_enqueue_style( | |
| ‘custom-style’, | |
| get_template_directory_uri() . ‘/css/custom_script.css’ | |
| ); | |
| wp_add_inline_style( ‘custom-style’, $custom_css ); | |
| } | |
| genesis(); |
Add some style
Add the following to your style.css file.
| /*———————————————————————————–* | |
| /* Landing page template | |
| /*———————————————————————————–*/ | |
| .page-template-landing-template-php .site-header, .page-template-landing-template-php{ | |
| background-color: transparent; | |
| } | |
| .page-template-landing-template-php .site-inner{ | |
| padding-top: 0px; | |
| } | |
| .page-template-landing-template-php .site-header{ | |
| min-height: 0px; | |
| } | |
| .page-template-landing-template-php .site-header .wrap{ | |
| background-color: #fff; | |
| margin-top: 40px; | |
| text-align: center; | |
| } | |
| .page-template-landing-template-php article{ | |
| padding-top: 0px; | |
| } | |
| .page-template-landing-template-php a{ | |
| display: block; | |
| padding: 20px; | |
| width: 100%; | |
| color: #fff; | |
| background-color: #aaa; | |
| border: 2px solid #aaa; | |
| font-weight: bold; | |
| } | |
| .page-template-landing-template-php a:hover{ | |
| color: #aaa; | |
| background-color: #fff; | |
| } | |
| .page-template-landing-template-php .post-edit-link{ | |
| display: initial; | |
| color: initial; | |
| padding: initial; | |
| background-color: initial; | |
| border: initial; | |
| font-weight: initial; | |
| } | |
| @media only screen and (max-width: 801px){ | |
| body{ | |
| background-size: initial !important; | |
| } | |
| .page-template-landing-template-php .site-header{ | |
| max-width: 90%; | |
| text-align: center; | |
| margin: 0px auto; | |
| } | |
| .page-template-landing-template-php article{ | |
| padding: 20px; | |
| } | |
| } |
Create the landing page
Create a new WordPress page by going to Pages > Add New. Under the Page Attributes section, change the template to the Landing page template. Now add the content of the landing page to the text editor as normal.
To give your landing page a background image, simply add a featured image. When you have saved your page, if you go to preview it you will notice the entire web page has now taken on a different, landing page format. You can now use this page to promote your products or services via social media, email campaigns and various other marketing techniques.
Wrap up
Landing pages are proven to increase sales and if you are using Genesis, as you can see it is really easy to set up an attractive landing page. The content that goes into your landing page is also important. It is important to focus your landing page towards your specific target audience. Yoast has written a great article on how to optimise your landing pages and I highly recommend you check it out. I hope you find this tutorial useful. If you would like to get notified of free content, ranging from Genesis tutorial to general WordPress tips and tricks then please feel free to sign up below.
I would like to thank Sridhar Katakam as a couple of his blog posts helped me to create this tutorial.
Leave a Reply