Here I am going to show you how to manually build a static homepage with the X WordPress Theme using the powerful shortcodes that come with the theme and without having to use the page builder.
The X WordPress Theme has overtaken the WordPress theme market by storm in recent months. I have now been using the X Theme for about six months. It wasn’t easy for me to jump right in, being a Genesis framework user for some time now. There is a learning curve for everything, but once you get past that I think you will find it easy to use and powerful.
According to ThemeForest, where it is sold, the “X WordPress Theme breaks the weekly top seller record on ThemeForest” (Envato, April 9, 2015). Not a small feat since ThemeForest probably markets a few thousand themes, templates and other WordPress products.
Install the WordPress X theme
The first thing to do after installing the X Theme is click on “X Addons” and then “Extensions,” and install all the extensions you want or need. You need to validate the purchase of X to install some of them, but the basic extensions do not require validation. I recommend you immediately install “Cornerstone,” the page builder which now comes with version 4.0 of X, however, you will not be using the page builder in this exercise. If you have an earlier version, then “Shortcodes” and “Visual Composer” are very much part of the theme. You can also install the sliders “Revolution” or “Soliloquy” if you need a slider.
Set up a child theme for the X theme
Before I did anything else, I set up a child theme for the X Theme. This is very simple and I do this with any theme just in case I decide to make any significant changes to the theme later. This way, when the next update to the theme comes along it will be updated without writing over any of the changes I introduced, which will reside in the child theme rather than in the parent theme files.
After installation of my demonstration website, which I named X WordPress Theme Demo, it looked like this:
This is the standard “blog look” of any freshly installed WordPress theme.
Create the X Theme static homepage
The first thing I did was to create a static homepage to replace the standard blog look page. The way you do this is to create a simple page and then assign it as a static homepage. So let me go through the step-by-step instructions:
Click on “Pages” and then on “Add New” to create a new page. Choose any title you want – it doesn’t matter what it is because the page title will not show when you use it as homepage. I named the page “X Theme Demo Homepage.” In the Template attribute, choose “Blank – No Container | Header, No Footer.” Click on Publish.
Assign your newly created page as your X theme static homepage
Go to “Settings” and then to “Reading.” At the top, where it says “Front page displays,” change the radio button to a static page. In the pull-down menu, select the page you just created in the previous step. It will appear by page title. Remember to save the changes. If you now refresh the homepage of your site, you will see that it has changed to a blank page with only the header. If you had chosen “Blank – No Container | No Header, No Footer” in the first step, the homepage would be obviously completely blank. This is your new static homepage.
Modify the header
This step is obviously optional. I wanted to add a new logo picture which I made. How to make a logo picture is beyond the scope of this tutorial, but I made a jpeg image 420 x 60 pixels. Make yours whatever size fits your needs, keeping it small. Once you have your image, go to the customizer (“Appearance” then “Customize”), then to “Header”, and upload your logo image. You can also play with the “Logo Width” to make it look bigger or smaller. A big logo image will also be mobile responsive and shrink as the screen shrinks. Of course, if you don’t want to use a logo picture, then go to “Typography” and in the “Logo” section modify the parameters to make the logo text look and feel the way you want.
The image I made has a light green hexadecimal color code #006500. I wanted the rest of the header to match this color so that the image would blend in. To do that, also in the customizer go to “Typography” and in the Navbar section change the Navbar Links and the Navbar Links Hover to the color you want. Also change the Navbar Font Size (in pixels), the Navbar Font Weight and whether you want all upper case or not, until you get the results you want. I used a font size of 18px, bold weight and uppercase off.
Introduction to shortcodes
As the word implies, shortcodes are small pieces of code that lets you do complicated things with very little effort. WordPress has supported shortcodes since version 2.5. The X theme has an extensive list of shortcodes which you will be using and that let you do all kind of things. The nice thing about the X theme shortcodes is that each of them has a large array of options that let you modify the shortcodes in countless ways to suit your needs.
Create Content Bands
A Content Band is a rectangular section of the page which usually has its own color, titles, fonts and pictures. It may have just about any design element in it. If you take a look at the GoDaddy homepage you will see that their new design is comprised of several “content bands” which, just like the homepage we are building, occupy the whole width of the page (no margins) regardless of the screen resolution your monitor or screen is using.
The first Content Band
Go to “Pages” and open the homepage you created. I will just enter the shortcodes directly which for me ended up being a lot faster once I got used to them. Make sure the page editor is in “Text” mode rather than “Visual” mode (upper right hand corner of the editor).
The first content band has a parallax background picture using a photograph of piles of books. Use whatever background you want. The code I used was:
[content_band parallax="true" bg_image="http://olneyoaks.com/xtheme/files/2015/05/Piles-of-Books.jpg" border="all" style="margin-bottom: 0px;"]Temporarily give the Content Band a height of 400px or so with the style option; otherwise you won’t be able to see it. You will not see the parallax effect at this point because the page is not big enough to scroll down.
Next I added a Container to this Content Band with a central column, with headlines, text and an email signup form. Now the whole content band looked like this:
[content_band parallax="true" bg_image="http://olneyoaks.com/xtheme/files/2015/05/Piles-of-Books.jpg" border="all" style="margin-bottom: 0px;"]
[container style="max-width: 680px; background-color:white; padding: 0px 25px 25px 25px; border-radius: 7px; border: 1px solid #272727;"]
[custom_headline type="center" level="h4" looks_like="h3"]GET A GREAT GADGET FOR $10 OR LESS![/custom_headline]
<p style="color: #424242; font-size: 170%; line-height: 140%; margin: 20px 0px 0px 0px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="color: #424242; font-size: 170%; line-height: 140%; margin: 20px 0px 0px 0px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
[custom_headline style="" type="center" level="h4" looks_like="h3" accent="true" style="margin: 20px 0px 20px 0px;"]SUBSCRIBE TODAY AND START RECEIVING OUR DAILY OFFERS[/custom_headline]
<form action="http://olneyoaks.com/xtheme/form-action-page" method="post">
<div id="signup">
<div id="signupbox1"><input id="inputbox1" name="email" type="text" placeholder="Enter Email" /></div>
<div id="signupbox2"><input id="inputbox2" name="submit" type="submit" value="Subscribe!" /></div>
<div style="clear: both;"></div>
</div>
</form>
[/container]
[/content_band]This is just an example. Obviously, you can use any signup form you want. I use the AWeber service and I build my own forms, such as this one. If you are interested in the CSS I used to make it look like that, go to the page and look at the source. It’s there.
The second Content Band
This Content Band is just a narrow text banner, so I used the Custom Headline shortcode. I also used the Responsive Text shortcode, otherwise the text will be too large when viewed in small screens. The code I used was:
[content_band bg_color="#006500" style="margin: 0px; padding: 10px;"]
[custom_headline class="responsive-heading" type="center" level="h2" style="color: white; margin: 0px; padding: 0px;"]TODAY'S SUPER DUPER GADGET DAILY DEALS![/custom_headline] [responsive_text selector=".responsive-heading" compression="1.5" min_size="26px" max_size="60px"]
[/content_band]Obviously, you can play around with all these parameters to make the banner look any way you want.
The third Content Band
The third Content Band uses Columns, Custom Headlines, Icons, and Buttons. The code I used was:
[content_band style="font-size:150%; border-bottom: 1px solid #000; margin:0px;" bg_color="#252526" inner_container="true"]
[column type="one-half" style="color: #fff;"]
[custom_headline type="left" style="margin-top: 0;color: #fff;" level="h2" looks_like="h3"]Super Duper Gadgets[/custom_headline] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[clear style="margin-bottom: 15px;"][button class="my-btn1" style="border-color: white;" type="transparent" shape="square" size="x-large" href="http://olneyoaks.com/xtheme/sample-page/ " title="See Super Duper Gadgets"]See Super Duper Gadgets[/button][/column]
[column type="one-half" last="true"] [custom_headline type="left" style="margin-top: 0;color: #fff;" level="h4" looks_like="h3"] [/custom_headline] [icon_list style="font-size:24px;color: #fff;margin-left:80px;"] [icon_list_item type="arrows-h"]Lorem ipsum dolor sit amet[/icon_list_item] [icon_list_item type="search-plus"]Consectetur adipisicing elit[/icon_list_item] [icon_list_item type="home"]Sed do eiusmod tempor[/icon_list_item] [icon_list_item type="asterisk"]Incididunt ut labore et dolore[/icon_list_item] [icon_list_item type="check-square-o"]Ut enim ad minim veniam[/icon_list_item] [icon_list_item type="circle-o"]Quis nostrud exercitation ullamco [/icon_list_item] [/icon_list] [/column]
[/content_band]The CSS class for the button was:
.x-btn.my-btn1 {
color: #ffffff;
border-color: #ffffff;
font-weight: bold;
}
.x-btn.my-btn1:hover {
color: #000000;
border-color: #ffffff;
background-color: #ffffff;
}The fourth Content Band
The fourth Content Band is very similar to the third one, except that the columns are reversed and I used different colors. The code I used was:
[content_band style="font-size:150%; border-bottom: 1px solid #000; margin:0px;" bg_color="white" inner_container="true"]
[column type="one-half"] [custom_headline type="left" style="margin-top: 0;color: #000;" level="h4" looks_like="h3"] [/custom_headline] [icon_list style="font-size:24px;color: #000;margin-left:80px;"] [icon_list_item type="arrows-h"]Lorem ipsum dolor sit amet[/icon_list_item] [icon_list_item type="search-plus"]Consectetur adipisicing elit[/icon_list_item] [icon_list_item type="home"]Sed do eiusmod tempor[/icon_list_item] [icon_list_item type="asterisk"]Incididunt ut labore et dolore[/icon_list_item] [icon_list_item type="check-square-o"]Ut enim ad minim veniam[/icon_list_item] [icon_list_item type="circle-o"]Quis nostrud exercitation ullamco [/icon_list_item] [/icon_list] [/column]
[column type="one-half" last="true" style="color: #000;"]
[custom_headline type="left" style="margin-top: 0;color: #000;" level="h2" looks_like="h3"]Super Duper Services[/custom_headline] Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.[clear style="margin-bottom: 15px;"][button class="my-btn2" style="border-color: white;" type="transparent" shape="square" size="x-large" href="http://olneyoaks.com/xtheme/sample-page/" title="See Super Duper Services"]SEE SUPER DUPER SERVICES[/button][/column]
[/content_band]The CSS class for the button was:
.x-btn.my-btn2 {
color: #000;
border-color: black !important;
border-width: 3px;
background-color: transparent;
font-weight: bold;
}
.x-btn.my-btn2:hover {
color: #fff;
border-color: black;
background-color: black;
}The fifth Content Band
The fifth Content Band is the front of the blog. It uses the Recent Posts shortcode to feature the four most recent posts with their featured image. The code I used was:
[content_band style="font-size:150%;border-bottom: 1px solid #000;margin:0px;" bg_color="#03b09a" border="all" inner_container="true"] [container]
[custom_headline type="left" style="margin: 0px 0px 30px 0px;color: #151515;" level="h3" looks_like="h4"]Our Blog, news and other stories[/custom_headline]
[recent_posts count="4"]
[clear style="margin-bottom: 15px;"]<a class="mybutton2" title="See More" href="http://olneyoaks.com/xtheme/blog/">SEE MORE</a>
[/container] [/content_band]The sixth and last Content Band
The last Content Band is actually a custom footer. Here I used Columns, Custom Headlines and Icons. The signup form in the right column is an image placeholder. Use any signup form you want. The code I used was:
[content_band bg_color="#252526" border="all" inner_container="true"] [container]
[column type="one-fourth" style="color: #fff; font-size:18px;"]
[custom_headline type="left" style="margin: 10px 0px 15px 0px;color: #fff;font-family:verdana;" level="h5" looks_like="h5"]X Theme Demo[/custom_headline]
<hr style="display: block; border-style: inset; border-width: 1px; margin: 0.5em auto 0.5em auto;" />
[icon type="twitter-square" style="font-size:45px;"] [icon type="facebook-square" style="font-size:45px;"] [icon type="google-plus-square" style="font-size:45px;margin-bottom: 15px;"] [icon type="linkedin-square" style="font-size:45px;"][clear]Need info? Email or call us now. North America:[clear]1-240-555-1212
[/column]
[column type="one-fourth" style="color: #fff; font-size:18px;"]
[custom_headline type="left" style="margin: 10px 0px 15px 0px;color: #fff;font-family:verdana;" level="h5" looks_like="h5"]Company[/custom_headline]
<hr style="display: block; border-style: inset; border-width: 1px; margin: 0.5em auto 0.5em auto;" />
About us[clear]Contact[clear]Blog[clear]Corporate
[/column]
[column type="one-fourth" style="color: #fff; font-size:18px;"]
[custom_headline type="left" style="margin:10px 0px 15px 0px;color:#fff;font-family:verdana;" level="h5" looks_like="h5"]Support[/custom_headline]
<hr style="display: block; border-style: inset; border-width: 1px; margin: 0.5em auto 0.5em auto;" />
Product Support[clear]Help Forum[clear]Knowledge Base[clear]
[/column]
[column type="one-fourth" last="true" style="color: #fff; font-size:18px;"]
[custom_headline type="left" style="margin:10px 0px 15px 0px;color: #fff;font-family:verdana;" level="h5" looks_like="h5"]Get Updates[/custom_headline]
<hr style="display: block; border-style: inset; border-width: 1px; margin: 0.5em auto 0.5em auto;" />
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://olneyoaks.com/xtheme/files/2015/07/SignupForm.jpg" alt="" />
[/column]
[/container] [/content_band]Conclusion
So there you have it. You can build a whole static homepage with the X WordPress Theme just by using the shortcodes. After you familiarize yourself with shortcodes and learn a few of them, I think you will find this is a powerful way of building a homepage or any other page for that matter.
Leave a Reply