The Homepage

Home » Docs » The Homepage

Setting up the widgetized homepage

The homepage is completely widgetized. This has tremendous advantages because you can choose what scetions/widgets will be shown, and also you can re-arrange them according to your needs. Creating a homepage similar to the demo is not difficult at all. But it requires some steps. Let’s get started, it will take you only a couple of minutes.

First thing to do is to create a static page. Go to Pages > Add new and create a New page. Give it a suitable name like “home” and select Widgetized under templates, from the Page Attributes panel on the right. Hit Save.
Now we have to go the the “Reading settings” and define this page as the homepage.Go to Settings > Reading and from the first set of radio buttons, check the “A Static page” and from the front page dropdown select the page you have created (in our example “home”). Click Save and you are good to go.
So far we have defined that the homepage of our site will be a widgetized page named “Home”. Now the next step is to create a widget area, and decide which widgets we will use. Let’s go to Appearance>Widgets and create a Custom widget area through the panel below. Let’s give it a name like “Homepage”. Hit the “Add Widget Area button” and a new widget panel will appear. Note that this new widget panel has a shortcode under the title.

Great, now we just need to define which of the custom widgets (sections) we need at the homepage. For the demo, we have used a widget selection as shown below.

Last step is to go back to the static page we created as homepage a while ago. The only thing you have to do now is to paste the shortcode of the widget panel you just created, to the editor. This will output the widgets to the homepage. Hit Update and enjoy your newly created homepage.

Adding an intro section at the homepage

If you look at the OM demo, you will see an intro section at the top of the homepage. This is easy to accomplish, if you have a widgetized page as your homepage, as described above. Follow these steps:

  • Create a new static page
  • Add the content (intro message)
  • Go to customizer, and under “Static Front Page” check the “Include an Intro section at the frontpage” checkbox and select the page you just created from the dropdown.

That’s it, you should be good to go!

Configuring the Homepage widgets

For the demo, we use just 2 widgets that make the structure of the homepage. Let’s see both of them:

Section: Recent Posts (Grid)

This widget outputs a number of posts at the homepage. You can optionally select a category from where the posts will be pulled from, or just leave “Post Category” to “All” to show posts from all the categories. You can also define the Post grid layout and choose between 3 available layouts. Last but not least, you can include a button that will take the user to the category that has been selected, or to the default blog page.

Section: Static Content

This widget is extremely handy and very easy to use. What it does is to output the contents of a static page. So, just create a static page, add your content, and select the page from the drop down. The contents will appear at the homepage. You can use as many instances of the “Section: Static Content” widget as you wish.

Last updated on November 8, 2023

Search docs

In this category