Site Tutorials

Tutorials »Build a Lifestyle Blog Tutorial

This guide is designed to help you build a lifestyle blog. We’ll start by choosing a theme, help you add your content to your website, and adding some features that work best for this type of blog.

You can see the live demo site that was built using these instructions here. Each step will include links to the example site, too.

capture-decran-2016-11-18-a-09-39-01

Choosing a Theme

When you’re starting out with your lifestyle blog, a great first place to begin is with your theme. Next to your content, the theme you choose helps to distinguish your site and make it memorable.

Choosing your theme can be a daunting task. Fortunately, the folks over at Blogging U have come up with three fool proof rules to help you choose the best theme!

  1. Pick something that speaks to you. You might admire simplicity and bold typography on others’ sites, but if you’re personally drawn to something soft and romantic, head in that direction.
  2. Consider your content. If you know you’ll be posting lots of images, pick a theme meant to show off photos. If you love poetry, choose a streamlined theme that makes your words the star. (Not sure what you want to publish? Welcome to the 99%. Try everything!)
  3. Think about your priorities. Some themes have a very distinctive look out-of-the-box. Others let you add custom touches like headers and backgrounds, while some have a variety of layout options. Take a look at a theme’s features and customization options, and check out the theme’s demo, to find the best fit.

Pick a theme that suits your main interests and reflects what you’re good at – on our lifestyle blog demo, we’ve used Sela. To set the theme for your site, head to My Sites. You’ll find the ‘Themes’ option in your sidebar, and after clicking you’ll be taken to our gallery. To apply any free theme to your site, click the ‘Activate’ button.

(Note: some of our themes are Premium – that means they come with a one-off fee. These will have a ‘Purchase’ button instead.)

↑ Table of Contents ↑

Adding Your First Page

Each separate page on your site will be a separate page on WordPress.com. The example site has the homepage (created automatically), plus About and Contact pages. The other pages, such as Life, Travel, DIY, are created using Category Pages, which we’ll cover in the Menus section below.

If you click on My Site in the top left corner, you’ll see a menu full of options appear. These are the options you’ll use to build your site. To add a new page, you’ll use the Add button next to the Pages option.

This will bring you to the Page Editor, where you’ll create and edit pages. Your site already has two pages – Home and About, so you’ll want to create a new page that’s not one of those two, and not the Contact page either – we’ll create that later. In the example site, the Travel page would be a good place to start.

In the editor, we set the title to Travel, then added our content to the Editor below. Go ahead and add your title and content for a page on your site now. When you’re done, click the Publish button to add that page to your site.

↑ Table of Contents ↑

Editing the About page

Next, we’ll edit the About page. To edit a page, click on Pages in your menu. You’ll see a list of your published pages appear – go ahead and click on ‘About’. This will take you to your page editor.

To see an example of this step on the demo site, click here.

businesswebsitedemo-4

↑ Table of Contents ↑

Creating a Contact page

On the Contact page for your site, you will not want to include your email address – that will get used by spammers. Instead, you can use a Contact Form on your site. When visitors visit your site and fill out the Contact Form, you’ll receive an email with their message, but they’ll never see your email address.

To see an example of this step on the demo site, click here.

To make a new Contact page, we’ll add a new page the same was as we did for your first page – click on My Site, then on the Add button next to Pages. The title of the page is Contact.

In the editor for the page, add some text explaining how they could contact you other than the Contact Form. Next, add a Contact Form using the Add Contact Form button.

You can edit the Contact Form to include any fields you’d like. In our example site, we have three fields: Name, Email, and Message.

For more details on configuring the Contact Form see here: https://en.support.wordpress.com/contact-form/

add-contact-form2

↑ Table of Contents ↑

Creating your other pages

If you have other pages that you’d like to add, you can do so by following the same method as explained above. You can find further support documentation here, also.

↑ Table of Contents ↑

Creating a menu for your website

Now that you’ve added all of the pages for your site, it’s time to add them to the menu, so that they appear as links on your site. To do that, we’ll use the Menu Editor.

On the demo site, we’ve added 5 items to the menu, one for each page, plus a few links to category pages. The Life, Travel, and DIY links each go to a Category Page, which means instead of linking to a manually created page, we’ve linked to the Category itself. By linking to the category, this allows any post you add the category to to show up on the page. For example, the DIY Category Page, will display all posts in the DIY Category.

For more details on Category Pages see here: https://en.support.wordpress.com/category-pages/

There is a video and more details on creating and editing menus here: https://en.support.wordpress.com/menus/

↑ Table of Contents ↑

Editing Your Home Page

Make your blog the star – if you’re struggling with what to write, remember – blogging about your passions and what you enjoy will not only be more enjoyable to read, but it’s more likely to attract visitors with the same interests.

When you create a site with WordPress.com, your blog page is set as the front (Home) page by default. Keep it that way! Whenever you create a new post via My Sites > Blog Posts and publish, it’ll appear there automatically. Ensuring that the first thing your visitors will see is fresh new content.

To see an example of this step on the demo site, click here.

↑ Table of Contents ↑

Adding Images

Images bring your site to life. When you’re adding blog posts, it’s worth considering adding at least one image to your text – the higher quality the better.

These can either be pictures you’ve taken using your own phone or camera, or stock images that are free for use in the public domain. Here are some great sources:

To add images to your posts, open up your post editor and click ‘Add Media’ option in your toolbar. From there, you’ll be able to upload images from your computer (usually in .jpg format), directly into your post.

↑ Table of Contents ↑

Freebies!

Everyone loves free content. Printables can be used for recipes, ebooks, DIY tips, or other information that your users might like to take away from their screens.

If you’ve got a document that you’d like to upload to your site, you can do that from a URL, or directly from your computer.

Head to My Sites > Blog Posts/Pages > Add. Click on Add Media in the toolbar above, and choose ‘Add New’ to upload a document or PDF from your computer, or ‘Add via URL’. That’ll add the document to your post or page.

To see an example of a freebie on the demo site, click here.

For more on uploading documents see here: https://en.support.wordpress.com/uploading-documents/

↑ Table of Contents ↑

Mailing Lists

You’ve created your pages and included some great content in your posts. The next step is to make sure that your visitors never miss a beat.

Mailing list subscriptions can be handled in a couple of ways. MailChimp is a great option for collecting email addresses, organizing them, and designing your own email form.

On the demo site, we have the MailChimp mailing list integrated two ways: with a popup form that appears after five seconds, and with a button in the sidebar created with CSS.

For more information on how MailChimp and adding the popup see here: https://en.support.wordpress.com/mailchimp/

Details on adding a button with CSS are in the HTML/CSS Customization section below.

↑ Table of Contents ↑

Sharing via Social Media

Once you’ve created a post, you’ll want to make sure as many people as possible are able to see it. WordPress.com lets you add social media sharing buttons to the bottom of each post you make to your site once it’s published – visitors can use these to share your great content with their own followers, broadcasting your posts even further.

To set up social media sharing buttons for your posts, go to My Sites > Configure > Sharing. Head to the ‘Sharing Buttons’ tab, and select all of your relevant services.

If you’ve got a Pinterest account, you can use the Pinterest sharing button to add a ‘Pin It’ button whenever a visitor hovers over an image. Be sure to use the ‘Official’ button mode to get this working!

Learn more about our sharing buttons here: https://en.support.wordpress.com/sharing/

↑ Table of Contents ↑

HTML/CSS customization

A basic understanding of HTML and CSS can help you get the most out of your site.

You can add HTML to a Text widget or via the HTML editor of your post/page. Our introductory guide goes into more details here.

With a WordPress.com Premium or Business plan you can add custom CSS to your site.

You can find some specific examples of HTML and CSS used on the demo site below. For further help, we provide guidance in this documentation and also on our dedicated CSS support forum.

Category Buttons

We’ve used HTML and custom CSS to make the links to category pages in the right sidebar pop.

screen-shot-2016-11-15-at-17-01-19

To replicate, first add a Text widget and use the following as a template for your HTML:

<a href="https://example.com/category”>




<div class="cat">
Name of Category
</div>




</a>

Replace “https://example.com/category” with the URL to your category page.

Next, navigate to the CSS panel of the WordPress.com Customizer and add the following snippet to style the links:

CSS:

.widget_text .cat {
display: block;
text-align: center;
padding: 20px;
background-color: #74CCD1;
color: #FFF;
font-size: 2em;
font-weight: bold;
}
.widget_text .cat:hover {
background-color: #74CCD1;
color: black;
}

The background-color of the buttons is set to #74CCD1, which is the hex code for the turquoise that you can see throughout the site. You can replace that code with any hex code of your choice. Try a few Google searches to get a list of hex codes and their corresponding colors.

Mailing List Button

screen-shot-2016-11-15-at-17-12-47

The steps to add a mailing list button are similar to the steps for adding category buttons.

To start, you will need to get the URL to your mailing list’s signup form. If you’re using MailChimp then these steps will guide you through that process.

Next, add the following HTML to a Text widget:


<a class="mailchimp-button" href="http://mailinglisturl.com" target="_blank">Subscribe!</a>

Replace “http://mailinglisturl.com&#8221; in the above HTML with the URL to your signup form.

Finally, custom CSS can be used to style the button. The following CSS was used to style the “Subscribe” button that you see in the sidebar of the demo site:

.mailchimp-button {
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
font-family: arial;
color: #fff;
font-size: 22px;
text-decoration: none;
background: #74CCD1;
padding: 10px;
width: 95%;
}

.mailchimp-button:hover {
background: #fff;
color: #74CCD1;
text-decoration: none;
}

Circular Images

screen-shot-2016-11-15-at-17-02-24

To create circular images, like the one on the About page on the demo: First add an image to your post or page and then switch to the HTML editor. The HTML for your image will look similar to the following:

<img class="alignleft wp-image-302 size-thumbnail" src="https://lifestyleblogdemo.files.wordpress.com/2016/11/lifestylebio.jpg?w=150" alt="lifestylebio" width="150" height="150" />

Next, add “circle” to the list of class names in the HTML:

<img class="circle alignleft wp-image-302 size-thumbnail" src="https://lifestyleblogdemo.files.wordpress.com/2016/11/lifestylebio.jpg?w=150" alt="lifestylebio" width="150" height="150" />

We’re then going to use custom CSS to create a circle:

.circle {
border-radius: 50%;
}

↑ Table of Contents ↑

Extras

  • WordAds: Looking to monetize your blog? We offer WordAds, a dedicated advertising program for WordPress.com users. There’s more in the FAQ
  • Affiliate Links: While external advertising isn’t permitted, you’re more than welcome to add affiliate links for books or music you love, and more. Here are our monetization guidelines.
  • Gallery Pages and Layouts: Sometimes, you just want your images to tell the story – and that’s no problem! Gallery pages come in a range of styles. Choose whichever layout you think suits the feel of your blog most – there are some great examples of our gallery layouts here.
  • Social Media Widgets: Looking to add your social media account feeds directly to your blog? That’s something you can do with specific widgets added to your sidebar or footer. Head to My Sites > Customize > Widgets, choose your service, and link your profiles.

 

Not quite what you're looking for?

Get Help