Setting up the site

In this tutorial, we will learn how to customize/set up the site manually using WordPress Customizer manually without using starter content from Demo Importer. Sections/Elements we gonna customize are “static” and will remain the exact same across every page.

Your desired website will depend on how creative you are to make it beautiful, and unique to other sites, so be creative.

We will start from scratch on a fresh site so you can fully understand how options work. Here’s a fresh WordPress installation with Newsbeat theme installed and activated.

Let’s get started! 😎

Header

Header of the site is the first thing visitors see when they browse your site so is really important, depending on what content category your website is, choosing the right header design and a well designed logo could make the whole website look different and stand out to other websites even when they’re using the same theme like yours.

Navigate to Customizer via Appearance -> Customize or Theme Setting Menu -> Customize then General Settings -> Header to start customizing site header. You can also quick-access Header (or Footer) options using a circular blue button with pencil icon appearing on the right.

For example, to replicate the similar site header as demo default, we select Secondary color for header style and layout v3 for header layout.

Here are the complete values:

  • Header StyleSecondary color
  • Header Layoutlayout v3
  • Fluid headertrue (checked)
  • Dropdown menu triggerDefault (hover)
  • Nav Height60
  • Sticky Nav Height60
  • Secondary Nav Bartrue
  • Secondary Menutrue
  • Social Media Linkstrue
  • Current Datetrue
  • Login buttontrue
  • Global SearchDefault

and after filling up options with given values, site header will look like this:

Let’s add logos via Customize -> General Settings -> Site Identity and Menus via Customize -> Menus.

In above image, figure 1, we inserted Sample Logo with dimensions 170x60 and its hd version will be 340x120. Logo height should be equal to Nav Height. In figure 2, we created new menu called Main Menu and assigned it to supported location Primary Menu, then add some menu items. For Top Menu, repeat the same steps as in figure 2 and assign it to Secondary Menu.

Here’s the screenshot after inserting Logos and assigning menus.

Note that if you want to use Mega menus, you will have to create ones in Menus via Appearance -> Menus, Customizer Menus doesn’t support creating Mega menus. You will be guided step-by-step in individual tutorial for Creating Mega Menu.

Footer

Access options for Footer via Customize -> General Settings -> Footer. Select layout and style for site footer as you wish.

  • Footer StyleSecondary Color
  • Footer LayoutLayout default
  • Fluid footertrue
  • Footer widget areatrue

Save customizer and go to Appearance -> Widgets to add some widgets to footer widgets. We currently have no content yet so we will add text widget, meta widget and search widget.

Content

This section includes Sidebar & Main Content, we will learn how to config Content layout also changing Content section design.

Default options for Content are located in Customize -> General Settings -> Content, these will apply to Content section globally, only layout can be changed individually on different pages.

Before customizing Content section, let’s add some widgets to Main Sidebar.

You can change Default Content Layout to your prefered layout, in this tutorial, we keep the default Layout (sidebar on the right).

Next, select Content/Sidebar design, you can click on available designs for realtime preview.

Realtime preview is also available for Block/Widget Title Design & Block/Widget Title size, just choose yours.


To config layout for other pages, you can go to Customize -> Template Settings, all supported pages will be list here.

Which page contexts supported by the theme?

  • Blog page
  • Single Posts
  • Archive pages – tags, date, author use layout from Archive layout setting.
  • Categories – Default layout for category pages

For Pages, you can change content/sidebar layout using Template in Page Attributes box when creating/editing page.

If you wish to change layout for specific categories individually, this can be also done in Category edit page. For Woocommerce & bbPress, we have individual setting Sections for these plugins.