Custom Mobile Responsive Landing Page Template With Widgets

Oct 7, 2013

—

Brad Dalton

This post includes all the code which creates a landing page template you can use with any StudioPress theme.

The template includes 4 widgets however you don’t need to use all or any of them.

widgets

Here’s what it looks like with some simple text and 2 e-News extended widgets using the new Lifestyle theme.

You can also add content to the beginning of your landing page using the WordPress editor.

So Where Does The Code Go?

The first code block goes in a new file named custom_landing.php which you upload to your child themes root directory.
The 2nd code block goes at the end of your child themes functions.php file
And the 3rd code block is all CSS which goes in your child themes style.css file.

I’ve included CSS for the Genesis e-News Extended widget which you can easily remove if not using the widget.

Note: The CSS code should be pasted before the Media Queries near the end of your child themes style.css file.

I’ve also kept the responsive design CSS to the absolute minimal however you can easily add your own values for padding and margins if needed.

More Ways To Create Landing Pages

How To Create a Custom Landing Page Template For Genesis

Comments

8 responses to “Custom Mobile Responsive Landing Page Template With Widgets”

Karissa

September 4, 2014

Arrg I done all this but the widgets are not showing up.

What is wrong? I’m using the Going Green 2.0 theme.

Log in to Reply
1. Brad Dalton
  
  September 4, 2014
  
  Looks fine to me Karissa.
  
  Try clearing your browser cache.
  
  The code generates exactly what you see in the screen shot on this post.
  
  As i don’t have access to your admin screens and PHP code, its impossible to tell why it may not be working for you but at my end it looks fine.
  
  Log in to Reply
sam

October 22, 2013

Hi Brad, this is a great tutorial. I also followed your one on how to clone a page to make a custom page.

Couple of queries,

1. I am trying to clone the home page of my child theme to use as a custom inner page – did this following your other article – worked like a treat thanks

2. Trying to now clone the home page into a landing page and im hitting a few issues. I understand that they both follow different processes – but is there any reason why this is not feasible? Of course its way easier to clone a home page and get it working….:)

In fact all I really want to do is style my new custom page (cloned from home page) to look like a default genesis landing page. – see default landing page code below. I cant see anything in CSS & cant work out where its styling is coming from

3. Out of interest, does cloning the home page have any negative impact on a site – it all seems to be working okay

Many Thanks

Log in to Reply
1. Brad Dalton
  
  October 22, 2013
  
  Hello Sam
  
  2. It may have something to do with the body class. If you want to keep the same styling as your home page, remove the body class otherwise change it to a unique class and add your new styles.
  
  You will also need to name it home.php.
  
  3. No.
  
  Log in to Reply
Zimbrul

October 10, 2013

I think all Studiopress’ themes should come up with such Landing page rather than the standard simple page with just text.

Log in to Reply
1. Brad Dalton
  
  October 10, 2013
  
  Thought the same thing myself many moons ago and then realized they have Premise so it might not be a good strategy.
  
  Log in to Reply
Jeb

October 10, 2013

Hi Brad, thanks for this.
I followed up accordingly but how do I activate the landing page? Normally I should create new page and then choose from the template “landing page”, right? I can’t find anything over there.
Thanks

Log in to Reply
1. Brad Dalton
  
  October 10, 2013
  
  Hello Jeb
  
  Did you upload the file to your your child themes root directory?
  
  Then you can simply select it under the Page Attributes in the drop down menu.
  
  Log in to Reply