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 !

User of the Customizr Pro theme ? 
Jump to this page : Getting started with the Customizr Pro WordPress theme.

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 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.

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

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

1. Selecting the colour skin

One of the first things that your site requires to create an identity of its own is a colour and colour scheme. This can be changed by changing the skin (colour). Access this feature from the customizer, by clicking on Global Settings > Skin. There are 17 pre-defined skins to choose from. You may also choose to have random skins. This choice reflects in small and big ways in all elements of your site - the header, the borders, the link colours, the widgets and so on.

2. Uploading a logo and a favicon

A site's identity is not complete without a logo and a favicon. So, design a logo or get one designed. From the customizer, go to Global Settings > Logo & Favicon, upload the logo and favicon (or Site Icon).

3. 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. From the customizer, access them through Global Settings > Fonts, select a font combination and font size for your site.

Now you are done with the very basic design of your site. Let us move on to adding some content in the header.

4. Setting your social networks

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

From the customizer click on Global Settings > Social links, set up your RSS feed link, email address, facebook url, twitter handle and several other social network links. Fill in these details, save and publish. Watch your site's header fill with the social network icons.

5. Setting a header menu

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 a header menu.

6. 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?

7. 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?

8. Global layout settings

From the WordPress customizer, you can access the layout options by clicking on Content >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 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.

9. Footer and sidebar widgets

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.

10. Performance

You can improve the performance of your site by

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

One minor 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!

11. 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!