Call Us: (647) 825-4122

How to Create a Custom Landing Page on WordPress Without Using any Plugin

How to create a landing page on wordpressA landing page is the heart and soul of any lead generation operation. Any savvy business professional who is getting some traffic on his website will definitely be thinking about the possible actions he can act upon to convert those visitors into potential clients. These days many businesses spend a big amount out of their budget to drive massive traffic to their website, they spend their money on PPC (Pay Per Click) Ads, Email Marketing campaign & Social Media. Which is really good, but does these efforts really worth doing if you are not getting potential customers? So what is the best sure shot way to get those visitors fall into your clients list? A Landing page? Yes that all what you need.

Your landing page must have an appealing persona to grab your visitor’s attention. It must be well designed, ease to understand & visually attractive. Not only the design, the layout and structure should be clear and easy to understand. When you are building a landing page for a custom designed website you will be more comfortable and flexible but when it comes to a WordPress template people prefer doing it the plug-in way just because WordPress themes comes with their own page template styles. So we are now going to explain you how to create a Custom WordPress landing page without using any Plugin with your WordPress theme’s default page layout style.

So first of all login to your website dashboard using your admin username & password. Follow the steps below to get started!

STEP 1:

The first step you need to follow is creating a page, click “Pages” from the menu on the left side on your dashboard and this will show up your pages list. On top of that you will find “Add New” button. Click “Add New” and you will be redirect to the page editor for creating a page.
Create a landing page on WordPress

STEP 2:

Now inside the title bar enter the title of the Landing page that you want, also you can change the permalink of the page from here to a search engine friendly URL, which is really very important.
Create a Landing page on wordpress

STEP 3:

Now the very next step is to publish your page, to make it available on your website. So for doing this from the right side of the text editor click “Publish”.
Create a Landing page on wordpress

STEP 4:

So your page is ready. Now this page comes with many elements that most of the WordPress theme has with its page layout. To know it better, just have a look at the below screen capture.
Create a Landing page on wordpress

STEP 5:

Look at the below screen capture, the elements highlighted in circles are not required on a landing page (like Breadcrumbs, Title and sometimes you also don’t need footer & navigation menu). You need to get rid of these elements.
Create a Landing page on wordpress

STEP 6:

Now before starting up the CSS work we will need to find out the “page ID” of this Landing page. If your permalink structure follow the default wordpress page ID structure than you can easily find it inside you page URL; Something like this http://yourdomain.com/?p=123), so for this page your page ID is 123. That’s Easy, right?
But what if you are using a custom structure or the post name structure (Like http://yourdomain.com/my-landing-page)? In this case a trick will help you out.
Go back to your page editor and below the Title field you will find a “Get Shortlink” button, click on that button and it will give you a short link for the same page, something like this http://yourdomain.com/?p=123, so 123 is your page ID.

Create a Landing page on wordpress

STEP 6:

Now after finding the page ID you need to get into the coding stuff. You need to find out the CSS class and ID for each of those elements that you want to remove. If you understand your template coding, its good you can check those elements from your template file. But if you think you need a easy way to get your stuff ready then go for your browser tool “Inspect Element”. Most of the web browsers like Mozilla Firefox and Google Chrome offer this tool. You can easily find out the front end HTML and CSS codes of any webpage.

Create a Landing page on wordpress

For an example, now you need to remove the breadcrumb of the page. Just right click on the page breadcrumb and click “Inspect Element”, this will open up the HTML and CSS coding and the class or ID of the element will get highlighted in dashed lines. See the screen capture below.

Create a Landing page on wordpress

Step 8:

Now you know the class or ID of the page element you want to remove. Use the below mentioned code to remove the element. Just replace the page ID and the DIV ID or Class of your element.

body.page-id-123 #breadcrumbs { display: none; }

Step 9:

You page will look like this:
Create a Landing page on wordpress

Similarly you can remove other elements from the page, and once you are done you will have a basic page layout like any other custom page. Now you can adjust things like banner, quote form, headings, images etc. and design your landing page the way you want. It will not look like you are using your WordPress page.

1 Comment
  1. Thanks for the share

Leave a Reply

Why Choose Us

  • We Listen!
  • Fast turnarounds!
  • Full Service Management!
  • Realistic prices that you can afford!
  • No on-going costs or hidden charges

Latest Posts

Connect with us

4936 Yonge Street,
Suite 130
Toronto, ON M2N 6S3, Canada
* By Appointment Only
Phone: (647) 825-4122
Email: info@creationaura.com