First steps with the Customizr WordPress theme

Congratulations! Your search for that perfect theme for your site ends here. Welcome in the Customizr theme's world !

Now that you have chosen the theme, what next? Here we are, to help you customize the theme and build your site to universal appeal.

Designed with visitor engagement in mind, the Customizr theme allows anyone to create a beautiful, fast and mobile friendly WordPress website compatible with all browsers and devices. With a set of live preview options, Customizr does not require advanced technical skills to design and add content to your website.

All options are set in the  WordPress live customizer where you can preview your changes live before publishing. No more blind changes and complicated options panel : create an awesome design, and once you’re happy with it, just save and publish.

The Customizr theme is very versatile and you can easily create any type of website: business sites, blogs, portfolios, landing pages, forums, shops, etc. This theme is responsive: it adapts nicely on any type of device (desktop, tablets, smartphones) and is compatible with all modern browsers.

Having quickly reviewed the features, let us get into the designing.

I assume that you have  installed the theme and you are raring to go.

Here's a quick overview of this doc content:

• Customizr vs. customizer
• Personalizing colors and font
• Uploading a Header Logo and a Site Icon
• Setting up your header menus
• Setting your social profiles
• Choosing your layouts
• Setting up your Front Page
• Setting up your Blog Home
• Designing your footer and sidebar widgets
• Speed up the page load time of your Customizr website
• Recommended plugins

Customizr vs. customizer

If you are new to the theme, this has already confused you (or) it is going to confuse you soon. So, let us get this straight. Often, there will be references to the Customizr and the customizer. What is the difference?

• Customizr (without the 'e' between the 'z' and the 'r') refers to the Customizr WordPress theme offered by Press Customizr.
• On the other hand, WordPress customizer (notice the 'e') refers to the interface through which you can customize your theme's settings. This feature introduced in WordPress 3.4 allows you to preview live all your design customizations in a Theme Previewer frame without changing the front-end design. This can be accessed in two ways.

1. Login into WordPress as admin. From the dashboard, click on Appearance > Customize

2. Login into WordPress as admin. Visit you site. From the Admin Bar on top, click on Customize

Personalizing colors and font

Selecting the theme's primary color

One of the first things that your site requires to create an identity of its own is a colour and colour scheme.

1. Access this feature from the customizer, by clicking on Global Settings :

2. Then on Primary color of the theme :

3. Clicking on Select Color opens up a color picker for you to choose from

4. Click on Save and Publish.

N.B. For classical style users: There are 17 pre-defined skins to choose from. Y. This choice reflects in small and big ways in all elements of your site - the header, the borders, the link colors, the widgets and so on. You may also choose to have random skins

Choosing a font

“The world is full of beautiful fonts—choosing the right one for your next project can be a daunting task.”

Customizr offers you a wide range of fonts and font combinations. 

1. Access this feature from the customizer, by clicking on Global Settings
2. Then on Google Fonts :

3. Select a font combination and font size for your site.
4. Click on Save and Publish.

Uploading an header logo and a favicon

A site's identity is not complete without a logo and a  favicon. So, design them or get them designed. 

Add a Logo to the Header

1. from the customizer, click on  Header > Site Identity : Logo, Title, Tagline and Site Icon.
2. Find the LOGO section and under the option Logo Upload, click on the Select Image button.

3. Select the logo image from your media library or upload a new one.
4. Crop the image to suit your needs in the Image Cropper that appears.
5. You can see the logo image replacing the site title immediately on the preview.
6. Click on Save and Publish.

Add a Site Icon

1. from the customizer, click on  Header > Site Identity : Logo, Title, Tagline and Site Icon.
2. Under the option Site Icon, click on the Select Image button.

3. Select the site icon image from your media library or upload a new one.
4. Crop the image to suit your needs in the Image Cropper that appears.
5. Click on Save and Publish.

Setting up your header menus

Would you go on a hike without a compass or a map? A menu fills in the same role for a website. Ease your user's navigation through your site with a menu in the header.

• Keep it simple.
• Have the least complex structure.
• Be consistent in navigation patterns. For instance, let the user find his way back to where he started from, if he wants to.
• Let the menu items be simple words than long phrases.
• A standard pattern is to start your menu with "Home","About", then fill with other items specific to your site and lastly end with a "Contact" item. Would this suit you?

Follow  the instructions here to set up the header menus.

Note: The header of a webpage typically includes the company or organization's logo, as well as the main navigation bar. This section, which resides at the top of each webpage, is often part of a template and therefore is the same across all pages within a website or section of a website.[source: https://techterms.com/definition/header]

Setting your social profiles

How about displaying your social networks on your site? It is indeed important to provide links to your presence on various social networks.

1. From the customizer, click on Global Settings -> Social Links :

2. Click on the Add New button, and choose the social icon from the dropdown box:

3. Click on the Add It button. 
4. Then scroll down to reach the social link you just create and enter the full url of your profile under Social link. Type the Title you want to be displayed on mouse hover over the icon. Choose the Icon color. Finally, check against Link target so that the link is opened in another tab.

You can delete a profile by clicking on the trash icon. You can edit/modify by clicking on the pencil icon.

5. Click on Add New to add more profiles
6. Chose where you want to display the social links:

6. Click on Save and Publish
7. Your social icons will appear on your site, e.g. in the footer, like this:

Choosing your layouts

1. From the WordPress customizer, click on Main Content:

2. Then click on Pages & Posts Layout:

Note : You can define your page and post layout at two levels : in the main options screen (the live customizer) and for each single post or page as described here.

The Customizr theme offers a few different options in terms of the overall layout. You can go for a full-width layout, single sidebar layout with the sidebar either on the left or the right and the 2 sidebar layout. Which one should you choose?

If you are building a landing page, go for a full-width layout. Whoever has heard of a sidebar in a landing page?

For Portfolios and business sites too, a full-width layout is ideal.

For blogs, single 1 or 2 sidebar layout can be chosen based on the number of items you want to fill the sidebars with. Ideally, if you have some call-to-action widgets used for conversion, to be placed in your sidebar, put it in a left sidebar. Ever heard of the  F-Pattern and its importance to a blog? As the human eye scans a screen in an F-shaped pattern, place your important messages in this pattern.

If it is a forum or a shop, you may need a 2 sidebar layout.

Front page

Almost always, a good front page design can capture a casual visitor and engage him/her through a few more pages of your site. 

Customizr allows you to highlight certain pages of your site on the front page using various features like the slider and the home featured pages.

Follow this tutorial to create a slider with your images or this one to create a slider with your blog posts. Why not use them to create an appealing and attractive front page?

Blog home

Okay, the posts that you are most proud of have been well displayed. How about the other ones? How are you going to present them to your readers? 

Your posts can be listed in various layouts. Check this tutorial on how to list your posts on your home page.

You may also use the Grid Customizer to list your posts in a grid format. How efficient is that?

Footer and sidebar widgets

The Customizer WordPress theme, offers up to five widget areas:

• 3 for the website Footer

• 1 for the Left Sidebar
• 1 for the Right Sidebar

Choose the widgets that you want on the sidebars and on the footer. Does your site have lot of content? In this case, a search widget will be useful. You can also display a tag cloud if you have content on a variety of topics.

Is it a blog? Then recent posts and recent comments can show your latest thoughts.

Keep these widgets minimal and useful. Lesser the clutter in these areas, the more there is focus on the important ones.

To setup the widgets, from the customizer go to Widgets, then expand the widget area you wish to fill with your widgets:

N.B. Be aware that in the customizer the available widget areas depend on the particular page you're previewing. Here's an example of the Widget panel showing only the Footer Widget areas, as the previewed page had no sidebars (full-width layout), note the highlighted message in the screenshot below: 

Performance

You can improve the performance of your site by

• Assessing its current performance
• Knowing the performance blockers
• Finding solutions for these, if any

A performance improvement that you can straightaway bring to your site is to load images only as the user scrolls down the page. Why load an image that a reader is not yet ready to see?  From the customizer, go to  Advanced Options -> Website Performances, check against Load images on scroll:

As simple as that!

The  Customizr WordPress theme offers some other options to improve your website performances, discover more in the Website Perfomances section.

Recommended plugins :

All the functionality that you need for your site may not be available in the core. You will need to install a few plugins depending on your site's needs. Here are some plugins that we recommend for use on your site.

Akismet

Every WordPress installation comes with two plugins pre-installed. One of them is Akismet, and we recommend it first and foremost as a must-have WordPress plugin. Even though Akismet comes pre-installed, it is not activated by default.

Akismet is a comment spam filtering service. Akismet catches blog comment and pingback spam using algorithms that learn from their mistakes and from the actions taken by participating websites. Comment moderation is a time consuming task, and Akismet can save you hours. Akismet will catch spam comments before it lands in your moderation queue as pending. This allows you to focus your energy on moderating comments by real users.

So, if you have enabled comments on your site, it might be worthwhile to activate Akismet.

Contact form : Formidable Forms

Usually a website needs a contact form for readers to communicate with the site owner. One of our favorites is  Formidable Forms.

Formidable Forms is a free, simple and flexible contact form plugin. It can handle multiple contact forms as well and supports AJAX submitting, CAPTCHA, Akismet spam filtering and file uploading.

Search Engine Optimization : WordPress SEO by Yoast

WordPress SEO by Yoast is the most complete SEO solution for your WordPress blog. With tons of features and options this plugin is indispensable. It is feature-rich and will definitely contribute in optimizing your site for getting indexed by the search engines.

Site Performances : W3 Total Cache/ WP Super Cache

Search engines consider site speed to be an important factor search rankings. This is why it is important to improve site load speed to an optimal level. Caching your website will help you improve site speed as well as balancing huge spikes in traffic.

W3 Total Cache is the fastest and most complete WordPress performance optimization plugin. Trusted by many popular sites, W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

An alternative and equally popular plugin among our users is the WP Super Cache. Use one or the other and improve your site speed.

Newsletter subscription : MailChimp for WordPress

MailChimp is used by more than 7 million people to design, send, and track email marketing campaigns. Manage your subscribers, newsletters and campaigns with MailChimp.

Website statistics : Google analytics for WordPress

Google analytics by Yoast makes it easy and convenient to track your site using the latest Google Analytics tracking code and allows you to view key Google Analytics reports in your WordPress install.

In addition to a set of general Google Analytics reports, in-depth Page reports and in-depth Post reports allow further segmentation of your analytics data, providing performance details for each post or page from your website.

E-commerce : Woocommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. It integrates seamlessly with WordPress. WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Picture Galleries : NextGEN Gallery

At over 10 million downloads NextGEN Gallery is by far the most popular gallery plugin for WordPress. It comes in both free and premium versions with tons of features. Use this for your photo gallery.

Image tool : Regenerate Thumbnails

By default when you upload an image to WordPress, it creates different sizes and saves them in the uploads folder. Many WordPress themes define new image sizes, but the problem is that these new image sizes are only applied on the images you upload after activating the theme. To solve this problem you need to generate new sizes for all previously uploaded images using Regenerate Thumbnails.

Forum : bbpress

Several plugins provide the forums feature for WordPress. But the special one is bbpress which is a light-weight stand-alone alternative for other forum plugins.

Going further

With that, I hope you have your site set up and functional. There are many many more things that you can do to tweak your site's appearance and functionality. But, if you already like what you have, you can also leave it as you have configured it now with the steps outlined above. After all, beauty lies in the beholder's eyes.

If you want to get daring and try further things, check out our other tutorials. Enjoy your journey of setting up your site!

• Setting up Google Analytics with the Customizr theme
• Recommended plugins for the Customizr WordPress theme
• Creating a contact page with the Customizr theme the Formidable Forms plugin
• Creating a bbPress forum with the Customizr WordPress theme
• Setting up WordPress SEO with the Customizr theme
• Setting up a WooCommerce shop with the Customizr theme
• Speed up the Customizr WordPress theme : how to setup W3 Total Cache Plugin ?