Site Tutorials

Tutorials »Build a Lifestyle Blog Tutorial

This guide is designed to help you build a lifestyle blog. It will help you to:

  1. Choose a theme.
  2. Add content to your site.
  3. Add some extra features that work best for a lifestyle blog.


These are the instructions that were used to design this live demo site: lifestyleblogdemo.wordpress.com. Here’s what the final site looks like:

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

Choosing a Theme

The first step is to choose a theme for your site. A theme determines the overall design of your site.

Choosing your theme can be a difficult task. However, our Blogging U has come up with three rules to help you choose the best theme for you!

  1. Pick something that works for you. You might admire simplicity and bold typography on others’ sites. Or, you might want something soft and romantic. A theme is a very personal choice.
  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 focuses on your words.
  3. Think about your priorities. Some themes have a distinct look built-in. Others let you add custom touches like headers and backgrounds. Finally, some themes 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 one for you.

Please feel free to take a look at the Themes available for you, and pick what suits you best.

On our lifestyle blog demo, we’ve used the Sela Theme.

To set the theme for your site, head to My Sites. You’ll find the ‘Themes’ option in your sidebar. Clicking this will take you to our theme showcase. To apply any free theme to your site, click the ‘Activate’ button.

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

↑ Table of Contents ↑

Adding Your First Page

Your site is made up of Blog Posts and Pages. Posts are for content that is added often, like journal entries or news articles.

Pages are for content that stays the same, like contact info, or an About page. The example site has a Home page (created automatically), plus About and Contact pages. The other pages, such as Life, Travel, DIY, are created using Categories, which we’ll cover in the Menus section below.

Click on My Site(s) in the top left corner to access your site’s options.  If you ever want to add a new page, click the Add button next to Pages.

pages

For now, click “Pages,” which will bring you to the Page Editor, where you’ll create and edit pages. Your site already has two pages – Home and About.

↑ Table of Contents ↑

Editing the About page

Right now, we’ll edit the About page. On the About page, you can provide a little information about yourself and your work. To edit a page, click on My Site(s), then on the Pages option. This will show you all of the pages on your site. Click on the About page to edit it.

There, you can add the content of your choice: text, title, pictures, etc.

If you need some inspiration, you can have a look at the demo site’s About page.

Screen Shot 2017-05-31 at 10.15.49 AM.png

↑ Table of Contents ↑

Creating a Contact page

Some themes will add a Contact page automatically. If you see a Contact page already, edit that page instead of creating a new one.

The Contact page gives the opportunity to the visitors interested in your work to contact you directly. On the Contact page for your site, we recommend you don’t include your email address. Having your email address publicly visible can attract spammers. Instead, you can use a Contact Form on your site. When visitors fill out the Contact Form, you’ll receive an email with their message, but they won’t see your email address.

You can see how this looks on the demo site’s Contact Page.

If your site doesn’t have a Contact page yet, add one as you did with the first page. Click on My Site(s), then on the Add button next to Pages. Set the title of the page to Contact.

After adding the title, add some text explaining how visitors can contact you, and when they can expect a response. Next, add a Contact Form using the Add Contact Form button.

To add a Contact Form, click the + icon on your editor toolbar, and then click the Add Contact Form button.

You can edit the Contact Form to include other fields as well. In our example site, we have three fields: Name, Email, and Message. You can use the Add New Field button to add a new item to the contact form. When you’re done editing the Contact Form, use the Insert button to add it to your Contact page. If you need more information about the Contact Form, take a look at this support page.

Finally, create your Contact page by publishing it using the Publish button.

↑ Table of Contents ↑

Creating Blog Posts and Categories

Now that we’ve got Pages set up, it’s time to work with some blog posts!

Blog Posts contain most of the content on a blog. They’re written frequently, and can be about anything. Folks blog about their dog, vacations, new recipes, or anything else you can imagine.

To add a new Post, click My Site and then the Add button next to Blog Posts. You’ll find this looks similar to when we edited a Page.

Add a title and some content to your new Post. This can include any text or images you’d like. If you’re not sure what to write about yet, start with some made-up test content.

To help your content stand out, you can add a Featured Image. This will appear on your home page and wherever posts are displayed as a group. To set a Featured Image, you’ll use the Featured Image section on the left side of the editor. Click on the Featured Image section, and you’ll see a button allowing you to upload a Featured Image.

Finally, make sure to add a Category to your new Post. Categories help you organize your posts, so visitors can find what they’d like to read about. In our demo site, we have the Categories “Life,” “Travel,” and “DIY”.

To add a Category, click “Categories and Tags” on the left side of the editor.

Post Editor Sidebar

Then, click “Add new Category”, or choose a Category that already exists.

Once you’ve added your Featured Image and Category, click “Publish” to save your post.

Add a few more posts with different categories, and then we’ll set up the menu.

↑ Table of Contents ↑

Creating a menu for your website

Now that you’ve added the pages for your site and a few categories, 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.

To visit the Menu Editor, click on My Site, then on Customize (next to Themes). Once that page loads, go to the Menus section. The Menu Editor shows all of the available menus, and the area that they’re currently assigned to. A theme may have 1 menu area, or more than one menu area. And you can create as many different menus as you want – but only one menu can be attached to one menu area.

On the demo site, we’ve added 6 items to the menu, one for each page, plus a few links to Categories. The Life, Travel, and DIY links each go to Categories. When a Category is linked to, it shows up as a Category Page. For example, the DIY Category Page, will display all posts in the DIY Category.

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

There is a video and more details on creating and editing menus in our Menu Editing documentation.

↑ Table of Contents ↑

Editing Your Home Page

If you’re struggling with what to write, remember – blogging about your passions is the way to go. It will be more fun for you, and 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. This means that the first thing your visitors will see is fresh new content.

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

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

If you need more information about adding media, you may want to take a look at our support page.

↑ Table of Contents ↑

Freebies!

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

If you’ve got a Word or PDF document, you can upload that directly from a computer, or from a URL.

To add a document, first open any Post or Page in the Editor, by going to My Site > Blog Posts / Pages. Then, go to the + icon on your editor toolbar, and then click the Add Media button. You can select ‘Add New’ to upload a document from your computer, or ‘Add via URL’ to grab one from the web.

You can see an example of a freebie, on the demo site.

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

↑ Table of Contents ↑

Mailing Lists

You’re doing great so far! You’ve created your pages and included some great content in your posts. The next step is to make sure that your visitors can get all your latest updates.

By default, anyone who follows your site will automatically get an email when you create a new post. Here’s some more information about how users can follow your site: en.support.wordpress.com/subscriptions-and-newsletters/

You can also create a mailing list to use with another newsletter/subscription service. MailChimp is a great option for collecting email addresses, organizing them, and designing your own email form.

On the demo site, we a the MailChimp mailing list integrated in two ways:

1) With a popup form that appears after five seconds.

2) With a button in the sidebar, created with Custom CSS.

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

↑ Table of Contents ↑

Sharing via Social Media

Once you’ve created a post, you want it to be seen by lots of people! WordPress.com lets you add social media sharing buttons to the bottom of each post. Visitors can use these buttons to share your great content with their own followers.

To set up social media sharing buttons for your posts, go to My Sites > Configure > Sharing. Then, head to the ‘Sharing Buttons’ tab.

If you’ve got a Pinterest account, you can use the Pinterest sharing button to add a ‘Pin It’ button to your Images. To do this, you will need to use the Official Sharing Buttons. You will find this option under My Site > Setting > Sharing > Sharing Buttons.

↑ 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 Post or Page, or even to a Text Widget in your sidebar or footer. Our introductory guide is a good place to start.

With a WordPress.com Premium or Business plan you can also 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, you can refer to our CSS documentation or head to the dedicated CSS support forum.

↑ Table of Contents ↑

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 use tools like the W3 Schools color picker to find the hex code of the color you want.

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

Now, let’s create a circular image, like the one on the About page of the demo site:

1) 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" />

2) Make sure you 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" />

3) Then, add this 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! Gallery pages come in a range of styles. Choose whichever layout you think suits the feel of your blog most. Have a look through our example gallery layouts.
  • Social Media Widgets: looking to add your social media feeds directly to your blog? That’s something you can do by adding some Widgets to your sidebar or footer. Head to My Sites > Customize > Widgets, choose your service, and link your profiles.

Conclusion

That’s it! You’ve successfully created and setup your blog. Congratulations!

To keep growing your blog and community, we highly recommend Blogging University. This is a great place to learn how to best create and promote your blog: dailypost.wordpress.com/blogging-university/

In the future, if you’d like to add to or grow your site, you can do that with WordPress.com too. Try searching our support site, available at en.support.wordpress.com, for the thing you’d like to do!

Not quite what you're looking for?

Get Help