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 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 Style –
- Header Layout –
- Fluid header –
- Dropdown menu trigger –
- Nav Height –
- Sticky Nav Height –
- Secondary Nav Bar –
- Secondary Menu –
- Social Media Links –
- Current Date –
- Login button –
- Global Search –
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.
Access options for Footer via
Customize -> General Settings -> Footer. Select layout and style for site footer as you wish.
- Footer Style –
- Footer Layout –
- Fluid footer –
- Footer widget area –
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.
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.