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 consistent theme that corresponds with the content on your site. Now, we're going to view details about the Customize function.

You select Appearance > Customize. With the default WordPress themes, the customize method may be very different with themes that you download from other websites.

I'll get an example of customizing Twenty Thirteen theme, on of the default WordPress themes and an example of customizing one of best free Wordpress themes Metro Blog - SM

1. Twenty Thirteen Theme - Default WordPress Theme

You set Twenty Thirteen to the primary 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 show 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


- Select menus to use for the theme. In the picture below, you know the theme supports one 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 home page will show the most recent posts from the newest posts to older posts by default. However, if you choose A static page item, you will choose a page to your homepage (In the picture above, the front page is About us, and the page About us will be your homepage, the posts list on the home page 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.
  • You go to the website: to download Metro Blog package theme (after downloaded, you've got file on your computer)

Metro Blog is one of best free wordpress themes

  • Log in 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: set an image as your logo

- Logo Text: set a text as your logo

  • 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 the home page, 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: select Upload »choose another logo to replace Change Slider  icon on the title bar

You save all changes by clicking  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 picture #2 to edit slide #2)
  • Image URL: URL of image
  • Link URL: when viewers click an image or intro text in the slide #2, they'll go to link URL to view detail information of the slide #2.
  • Title: the title of the slide.
  • Content: display an intro text of posts on the slide #2.

Category: add categories to the slider.

  • Some slides: show the 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, etc. 

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 site và the sidebar is right
  • 3 - there are a left sidebar and the main area display content of the website
  • 4 - content of the site shows at between, there are a left sidebar and  a right sidebar
  • Load post dynamically
  • Show related posts? ON - show 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 site 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 select/deselect 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 by 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 build a menu in next post).

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

This contact form contains three 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. Information is marked (*), it means the visitors must fill full required information, then click Send to send you a message.
  • You can edit Contact Us that corresponds with you:

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 the icons  to delete rows of the 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 corresponds that information.
  • Add input: add new necessary 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 by them.



You are here

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

Choose a language