FP – Front Page Sidebars

The front page sidebars section of the customizer will help you configure the available sidebar positions in the front page template. Unfortunately WordPress does not have the capability to create sub-panels to help separate additional sections, so I had to squeeze everything into this one section (tab). I decided to group together similar settings, but to give you an example of a sidebar section, here is a screenshot from the live demo:

fp sidebar demo

Sidebar Section Settings

I’ve included a screenshot using the Top Sidebar section for each…

  • Show Widget Sidebars – Enable or disable sidebar sections
    fp sidebar show
  • Make the sidebar sections fluid – If you want full width instead of boxed layout
    fp sidebar fluid
  • Sidebar content alignment – If you want your widget content to be centered
    fp sidebar center
  • Sidebar section ID’s – If you plan to use one-page scrolling
    fp sidebar id
  • Sidebar section padding – top and bottom spacing
    fp sidebar padding
  • Sidebar section background colour – Adding background colour – However, for content styling, you will need to use custom CSS for this because it greatly depends on what kind of widget content you plan to show. Content can include links, borders, media, text content, and much more.
    fp sidebar bg

You do not need to use all the sidebar sections, but here is the list of sidebars you can utilize.

Sidebar Sections

  • Header Image – technically not a banner but can be used
  • Banner
  • Top 1, 2, 3, and 4
  • Content Top 1, 2, 3, and 4
  • Content Bottom 1, 2, 3, and 4
  • Bottom 1, 2, 3, and 4
  • Footer

When using sidebar groups, such as the Top 1, 2, 3, and 4 positions, you do not need to use all 4. For example, the live demo site is using the “Top 1” position for the Intro text at the top of the page (just below the header image).

Sidebar Section Layout

Here is a screenshot of the sidebar layout in relation to other sections within the front page template that you can use for a reference…the light grey areas are the sidebars:

fp sidebar layout