Article 9.2: Guide to customize your main theme using Customize function

In Article 9.1, you've got that how to add new, install themes, manage installed themes in your Wordpress website. You've chosen a relevant theme that corresponds with your website content. Now, we're going to view details about the Customize function.

You choose Appearance > Customize. With the Worpress support themes, the customize method may be very different with themes that you download from other website.

I'll get an example of customizing Twenty Thirteen theme (Wordpress support theme) and an example of customizing one of best free Wordpress themes Metro Blog - SM

1. Twenty Thirteen theme - Wordpress support theme

You choose Twenty Thirteen to the main theme for your website. Click Customize button to start customizing Twenty Thirteen theme.

Best free wordpress themes – Twenty thirteen theme

Site Title & Tagline:

- Enter your site title and tagline, mark Display Header Text checkbox to display site title and tagline in the text type. If you don't mark, the header doesn't display site title, tagline.


- Change color of Site title, Tagline

How to use wordpress - Change color of Site title, Tagline

Header Image: 

- Choose the background of the header

Choose the background of the header


- Choose menus that will be used for the theme. In the picture below, you know the theme supports 1 menu and you can choose a menu in the Navigation Menu list below. I'll say about how to create menus in the next posts.

choose a menu in the Navigation Menu list

Static Front Page: 

- Your latest posts: homepage displays latest posts

Your latest posts

-A static page:

A static page

The homepage will display the latest posts from the newest posts to older posts in default.. However, if you choose A static page item, you will choose a page to your homepage (In picture above, the front page is About us and About us page will be your homepage, the posts list on the homepage will be changed to Posts page (Tourism page).

 2.  You download one of best free Wordpress themes Metro Blog from or another website that support free and premium themes

  • In Article 9.1, you've knownArticle 9.1. I'll say it again once more.
  • You go to the website: to download Metro Blog package theme (after downloaded, you've got file in your computer)

Metro Blog is one of best free wordpress themes

  • Login the Wordpress administrator page, choose  Appearance > Themes > Add New 

Upload Metro Blog package

  • Change with Upload tab> click Choose File button > Show path of file > Enter Install Now to start installing Metro Blog package theme

Start installing Metro Blog theme

  • After you have successfully installed Metro Blog theme, click Activate to use Metro Blog theme for your website.

View theme library

  • In the picture below, it has Metro Blog item that has not in the picture above. You click Metro Blog item to configure Metro Blog theme.

 General setting Metro Blog theme

Metro Blog configuration includes:

1. General:

- General option

  • Logo Source:

- Logo Image: choose an image to the logo

- Logo Text: choose a text to logos

  • Front Page Title: enter the title bar content of the homepage

Ex. Your type of a Front Page Title item with content is " - Wordpress Tutorial". When you view homepage, you'll see the content in the title bar:

Display Front Page title

  • Site Title: enter the title bar content of page

Default in Site Title is "%s", it means you choose a page title to your title bar content on the browser.

  • Favicon: choose Upload > choose another logo to replace Change Slider  icon on the title bar

You save all changes by click  Change Slider  in the right window.

2. Slider

  • You have some featured contents. The slider will help you give the featured content to the visitors very quickly:

  • However, as you see, SMThemes created content of the slides. You need to change image, change content to correspond to your website.


  • In the picture above, in the Slide Source item, you choose :

  • Custom slides - use images below to the slider.


  • Click images below to edit images and contents of the slider (example: you clicked image #2 to edit slide #2)
  • Image URL: URL of image
  • Link URL: when viewers click an image or introtext in the slide #2, they'll go to link URL to view detail information of the slide #2.
  • Title: title of the slide.
  • Content: display an introtext of posts on the slide #2.

Category: add categories to the slider.

  • Number of slides: show quantity of slides that displayed in the slider.
  • Category: choose categories that displayed in the slider. All categories are chosen by default.
  • Order by: display by order, Created is chosen by default, it means you order slides by created date.

Posts: choose posts to the slider

Pages: choose pages to the slide

  • And some options in the slider as: Show slide thumbnail, Show text, Show links, .... 

3. Layout

  • Configure the regional arrangements on your site. 

  • In the picture above, you choose 1 - only display website content on your website, 2- the left main area display content of the website và the sidebar is right, 3- there are a left sidebar and the main area display content of the website, 4- content of the website displays at between, there are a left sidebar and  a right sidebar.
  • Load post dynamically
  • Show related posts? ON - display related posts.
  • Related posts count: count quantity of posts
  • ...

4. Social Button


  • On the left website, you see social network icons as: Facebook like, Twitter tweet and Google +1 to share your website with everybody by their social accounts.
  • To add new, edit social share buttons, you click Social Button in the left menu, turn Show social box ON.


  • In this picture, you're choosing Facebook like, Twitter, Google+. You can add new or remove social network icons by mark/ unmark checkboxes, choose Add Button.

 5. SEO

  • Site description: enters descriptions of your site
  • Site keywords: enter keywords of your site
  • Site Author Meta: information about you
  •  ...

6. Menu

  • Configure way that displays menus

7. Translation

  • Language that used in Metro Blog Theme is English in default. If your language is not English, you need to translate it to your language in Translations item.

8. Contact Form

  • Create contact sample
  • How to use the contact form?

- First, you need to create a new page (choose Pages > Add New) with page title is Contact Us.

- Choose Contact Form in Template list > Enter Publish to create "Contact Us" page.

- Add the "Contact Us" page to Menus on your website (I'll say about how to create a menu in next post).

- When you click "Contact Us" item on your site, you'll see your contact information:

This contact form contains 3 parts:

  •  Part 1: display your position on Google Maps.
  •  Part 2: display your information: Address, phone, email, Skype account.
  •  Part 3: visitors send you a message at this part. Informations is marked (*), it means the visitors must fill full required information, then click Send to send you a message.
  • You can edit "Contact Us" information that correspond with you by:

In Metro Blog, choose Contact Form:

Text: enter title of contact.

Map Address: enter your address. Google Maps use this address to display your position on the map.

Contact Details: 

- Click  icon to edit each row of correspond information

- Click  icons to delete rows of correspond information

- Upload: replace default icons  by image that you will upload

- Preset: Choose one of these icons   for that information.

- Add detail: add new row in the contact information

- Save detail: if you edit the information, you click Save to save changes. If you add new detail, you click Save to save the new detail.

Contact form: use the contact form to send a message to you from vỉewers.


  • Text field: enter a text field
  • Text area: enter a text paragraph
  • Required: choose required full information before they can send to you by a mark Required checkbox that correspond that information.
  • Add input: add new required information that you need the visitors fill full
  • Email for messages: is the email address that receives messages from the visitors.

9. Contacts

- Detail information about SMThemes - Metro Blog Author

10. Fresh themes

- Introduce other themes in SMThemes's library. You can download and install it to your website.

11. Theme Activation

- You're using Metro Blog free version. You need to pay to SMTheme to use more functions and you will be supported from them.


Choose a language

You are here


Subscribe YouTube


Hải sản Vân Đồn

Chào mừng bạn đến với chuyên mục giới thiệu và cung cấp các mặt hàng hải sản của Vân Đồn. Hải sản Vân Đồn - Quảng Ninh | Tươi ngon, bổ dưỡng và đảm bảo với giá cả phải chăng. Xem trang....