Step by Step Guide: How to Make a Website With the Twenty Seventeen Theme

If you clicked on this article, I’m assuming you’re probably either using WordPress already, or you’ve heard about some of the amazing things it can do and now you’re thinking about using it to build your website or blog. Aside from being an extremely scalable and user-friendly CMS, one of the best things about WordPress is that it can be downloaded and installed free of charge. A self-hosted wordpress.org platform is an open-source software that has a comprehensive database of free themes, plugins, and other functionalities which will help you build a website completely for free, and with total ease. If you wish to make a business-oriented website, there are plenty of free WordPress themes for business that are more than capable for the task. One of the free themes I’ll talk about today is a Twenty Seventeen theme.

Almost every year since 2010, the WordPress developer team has been creating a theme that they name after the year in which it was made. Twenty Seventeen is one such theme that is built with the main purpose to serve business sites, though it can work with pretty much any type of website out there. It comes with the header video and various captivating featured images, plus it contains numerous front-page sections, as well as a logo, navigation, social menus, widgets, and so on. All these features give you plenty of room to customize and personalize a website in any way you want.

Without further ado, here’s a comprehensive guide I’ve prepared for you that will help you make a website with the Twenty Seventeen theme. Also, don’t forget to check out the new Twenty Twenty Two theme as it comes packed with amazing useful features.

In this guide we will cover the following topics:

1. The Theme Preparation Process
2. Adding the Content
3. Widget Areas
4. Creating a Menu
5. Additional CSS

The Theme Preparation Process

Before you start building your website, there are some initial steps you need to take first. Here’s what you should do for a good head-start.

Installing and Activating the Twenty Seventeen Theme

Your first logical step is to find and activate your theme first. You can do this by accessing Appearance > Themes in your WordPress dashboard.

You will probably find a few themes already listed here, but in case you don’t have the one that you need, you can easily find it by clicking on Add New.

Once you find the Twenty Seventeen theme, you should simply install it by clicking the Install button.

Then, you should activate it by selecting the Activate button like I did in the picture below. And voilà! Your site is now using a Twenty Seventeen theme.

After installing and activating the theme, you should take a look at your list of Pages and Posts . By default, some pages come together with the theme itself. There are also a few widgets listed in the widget areas, as well as some items in the menu. All of these can be changed and adjusted according to your needs, i.e. you can edit or delete any one of them.

Here’s what your site will look like after the installation:

Once you visit your homepage, you’ll see that there’s no specific content yet, but rather just a few default pages. Here you will also see some of the theme’s main features, the position of its elements, as well as the page structure itself, including the colors and fonts that have been used. You can modify and adjust all these things to fit your preferences.

Removing the Toolbar

The first thing that bothers me when I take a closer look at the upper part of the page is the toolbar which shows up after I launch the site live. It still may be useful to some, but I prefer to have it removed.

What’s actually offered here are the shortcuts which lead to certain areas that I found were easier to reach via the WordPress admin dashboard. Personally, I never had the need to create a new page or post from here. During my website building, I always find it most convenient to have two tabs open – one for the admin, the other for the live site. That’s why I ended up removing the toolbar this time around as well.

To remove it, I went to Users > All Users and found my own username. There’s only one user profile present on the list since I launched the website myself and thus only have myself as a user.

Then, I will select the Edit option which will lead me to a screen with multiple options. The option ”Show toolbar when viewing site” which makes the toolbar appear is checked by default, so I will uncheck this option, and click on Update Profile at the bottom of the page.

Later on, I can add new users to the site if I need them. WordPress user roles may vary, which is very good because every role has different authorizations within the site.

For example, if I at one point decide to have an author who will write articles for me, I will assign them the Author role which will permit them to write their own articles without interfering with other parts of admin.

The Permalink Structure

A link to a specific page isn’t only the path that allows you to reach the page in question – it also represents a very important part of your website’s SEO. This is in part because well-defined links help the search engines figure out what a specific page consists of. Nowadays, with plenty of competition lurking all over the web, everyone should pay attention to this if they wish to stand out. That’s why I recommend that you determine the permalink structure from the very beginning.

WordPress offers you multiple possibilities, and all the options are located in the Settings > Permalinks section:

I personally always make sure to select the Post name permalink type. This permalink is being created according to the title of the page, which I find to be a great option. In cases when this doesn’t suit me, I can always change the slug on the page itself.

Of course, it all depends on your own needs, so that’s how you’ll set up this option as well.

Date and Time Format

Since this is a very useful blog setting, I also recommend that you set this up in the very beginning. The format that you set will be displayed as your blog date.

Check out what it looks like before I set it up according to my preferences:

This date represents the date when the article was published. The Twenty Seventeen theme has this set under the month/date/year format by default, while some other theme may have a different format, or won’t have the date at all.

In addition, you can also find the date appearing in the post’s comments. During the theme activation, aside from the pages and posts that came together with the theme, there’s also one default comment on each post. Every theme should contain these options during the installation because they serve as an example of what different parts of the page (and its features) will look like when the site goes live.

If the default format doesn’t work for you and you wish to change it, you can do so in the Settings > General:

It’s up to you to choose the format that you like the most.

One other thing you should set here is your Timezone. What should you do if there’s a default timezone set up that is different from yours? This particular thing happened to me. For example, I would schedule my article to get published in two days’ time at 3 PM. But the day (and the time) would come and go, and my article would not be published yet. Only after a certain time did I realize that I haven’t set up my timezone and that the clock says it’s still 1 PM when it should be 3 PM. For this reason, you should always remember to set up your timezone.

Site Identity

Site identity is a combination of a few different things – your site logo, site title, title tag, and favicon. All of them are important because they represent your brand. If you have yet to get your name out there, you must consider carefully what will you do about the design of all these elements. If you’re not particularly into designing these yourself, you can simply browse through some of the websites with free and premium icons and create something which you will be recognizable by instead of paying someone to do it for you.

Below you can see the location of the Site Identity settings:

Here’s where you can add all these different elements:

I won’t spend too much time explaining how to upload the picture for the logo because once you start doing it, it’s pretty self-explanatory. I’d just like to add that you can upload the pictures from the Media Library (in the beginning, here you will mostly find the pictures that came together with the theme) and Upload Files, which allows you to upload pictures from your computer (the option that will be more useful to you in the beginning, since that’s when you’ll have only a few images in the Media Library itself to choose from). You also get a crop option, but I suggest that you avoid using it during the uploading of your pictures if the ones you plan to use already have good dimensions. If not, you can quickly edit images in WordPress later.

I entered the random plain logo as well as the Site Icon (Site Icons or favicons are the small icons you can usually see in browser tabs, bookmark bars, and WordPress mobile apps). I won’t particularly focus on the design since my main goal is to demonstrate how you can change these elements.

Don’t forget to save all changes when you’re done:

The Publish button is used both for saving and applying all changes on your site momentarily. In case that this button is not presented to you by default, you can find the additional options by clicking on the cogwheel. This also applies to everything that needs to be set in Appearance > Customize, as well as all the pages and posts. Every change you make can either be published, saved as a draft, or scheduled for posting.

Here are all the examples of the elements I’ve changed.

Site Icon (favicon):

The logo, title, and title tag:

The Theme Colors

The Twenty Seventeen theme offers the possibility of setting up some (of the) basic colors. To do it, go to Appearance > Customize > Colors.

The Dark and Light Color Scheme stand for the basic skin tone of the site.

Here’s the Light skin tone that is characterized by a white background with black letters:

The Dark skin tone features a black background and white letters:

The Custom option gives you the ability to change the colors of active links and hovers, while the Header Text Color changes the color of the site title and tagline letters.

The theme with the light skin tone is the default one.

Deleting the Menu

Another thing I want to do from the very start is delete the menu. If there’s a menu that came together with the theme, I don’t want it to interfere with anything, but would rather like to add some of my own items during the building of the menu. I only plan to leave the Homepage for this occasion because that is the first thing I plan to build, and I will also edit the existing page.

To delete the menu, you should head to Appearance > Menus.

Two menus come with the Twenty Seventeen theme – the Social Links Menu and the Top Menu. But, the one that I want to remove items from is the Top Menu. Therefore, I will select this particular menu and delete all its items except for Home. Don’t forget to click on Remove and then Save Menu when doing this yourself.

Adding the Content

Changing the Header Image

It is safe to say that the Twenty Seventeen theme is recognizable by its header image. The image shows up on the Homepage almost across the entire screen.

You can even see the snippet of the same image at the top of all other pages.

Naturally, this is the area where you will want to put your own picture. Like I mentioned in the very beginning of this article, this theme gives you the ability to insert the header image, header video, or both.

When uploading the picture that will be your header image, you must pay attention to the image size. If you upload the image with dimensions that are too small, the quality will be bad, and you definitely don’t want that to happen. On the other hand, if you upload an image that is too large and too heavy in size (MB), it can put too much strain on your page, which will cause it to load slowly. That’s why it’s important to find the middle ground and even change the image size in Photoshop in order for it to be perfect. The recommended header image size is 2000x1200px.

To upload the header image, go to Appearance > Customize.

Find the Header Media screen:

You can add the desired image by clicking on the button framed in the picture.

My recommendation is that you avoid using images that only contain one particular object or the ones that only look complete when every element of the picture is seen in the frame. Instead, make sure that you use an image that has more similar, almost evenly distributed elements, or rather, one that would make sense and still look “whole” even when cropped. This is necessary because you will only have one part of the image appearing on your other pages, so you want it to appear as one logical unity, and not just a random cut-out piece that has no meaning.

Here’s my example:

In this way, both my header image on the homepage and the random page look decent. However, I should also make sure that my title and title tag don’t blend too much into the background, which is something I will fix later.

Instead of the image, you can also put up a video, or simply upload it on YouTube and then insert a link to your page.

Homepage

A homepage is the first thing that users see when they directly click on the URL. It’s the page that has the purpose of providing some basic info about you to the users. It should also have a nice-looking design that will be able to attract enough attention so that the users stay on your site. Additionally, a homepage should also have clear navigation that leads to other parts of the site in order to provide better accessibility to the users. In case you have a blog theme, your homepage will probably contain a brief preview of some of your articles so that people can click on them and read right away.

Either way, your homepage shouldn’t be too cluttered or too lengthy, but just on the right side of concise and informative, which is something we tried to do with our homepage here at WPklik.

Once you go to Pages > All Pages, you will easily be able to tell which page is set to be the homepage – the name “Front Page” will be right next to it.

This default homepage that comes together with the theme installation is really interesting. At first glance, it consists of a line of text and a parallax image that appear a few more times on the page. But in fact, the image and the line of text make one unity.

I’ll take this one “unity” as an example. What does it represent, exactly?

Namely, it represents a separate page that is independent of the homepage. As seen in the picture above, this page is titled Blog, while the text on the right is the page’s content. The image above is a featured image uploaded on the page itself. If you go to Pages > All Pages and find the page with the name Blog, you’ll see that I’m telling the truth.

So, there are multiple such entities on a homepage that individually function as one specific page. All these pages have been “called” in order to appear on the homepage. It’s very important to remember that the homepage pulls all the content from these individual pages. That’s why in case you want your homepage to have this concept, I recommend that you create specific pages that will appear on your home and will have only that role on your site.

The number of sections on the homepage represents the number of pages you will need. Just one quick note – the first line of text that can be seen underneath the header image is the text of the homepage itself. After that, you should start counting sections.

My homepage example has 4 sections:

• Home
• About
• My Blog
• Contact

For the Home section, I added the content directly to the homepage, while for the other sections I created individual pages which I will call later.

Now, I am heading to Pages > All Pages. I will check out what I currently have there.

Here I can see which pages are made with the intention to be called to the homepage. I will edit About and Contact pages in order to add my own info and pictures, and I will create a Blog page separately. Later, I am going to explain why I’m ignoring the already-existing Blog page.

Like I said, I will edit some pages and create some new ones. I am going to make new pages by going to Pages > Add New. As for editing, I will find the page I wish to change in Pages > All Pages and then I’ll click on Edit.

When you start editing the page such as this one, or when you begin creating a new page, you must take a good look at its contents, particularly those you wish to change.

The editor which is active during the installation of both WordPress core and its theme is the Gutenberg editor. Gutenberg uses blocks to create content, which allows the user to add any type of content inside these blocks. There are many different types of blocks, and each one has its own role (there are text blocks, image blocks, gallery blocks, and so on).

If you want to switch to the classic editor, you can install and activate a plugin that will allow you to do this – a Classic Editor plugin. However, I recommend that you to keep using Gutenberg instead.

The first couple of blocks on your About page are Title and Classic block, which you can see in these two frames on the picture below.

The title block is a required section on this page, and it’s always located at the very beginning of the editori (it’s always the first item you can find in the editor). It serves the purpose of entering a page title which is then pulled to your homepage. In case you’re writing a blog post, this is where you will enter the name of your article.

The second field is the Classic block, and you can change its content by clicking on it. Also, you can add any other type of content in this field. But once again, you should remember that whatever you insert on this page (or any other page specifically made for home) will also appear on your homepagei.

What I also need is a featured image that will show up underneath the text of the homepage.

Adding this image is pretty simple. As shown in the picture above, there’s a Featured Image section on the right side of the editor, right underneath the Permalink section. You can insert your image by clicking here.

On the picture above, you can also see the place where you can enter the URL slug. Every page has the option to change the slug. In case you want your page slug to be different from the one in the general settings, you can change it here, on the page itself.

Remember to always click on Publish when creating a new page or editing the existing one.

After I’m done with creating all the pages I need, I will go set up the pages that I want to be displayed on my homepage by accessing Appearance > Customize > Theme Options.

There are two types of settings here. The first one is the Page Layout, and the second one is the Front Page Section Content.

Page Layout gives you the ability to choose how your content will be arranged on all the pages – not just your homepage. There’s a possibility of having your content split into two columns – one column for the title, the other for the content. Another possibility is to have only one column with your title displayed at the top and all your content underneath.

The Front Page Section Content consists of 4 different parts. In each one of these sections, you can insert one page which will show up on your homepage. Essentially, you are “calling” all these pages to appear on the homepage.

As I already mentioned, my homepage will consist of About, Contact, and My Blog. Even though the Twenty Seventeen theme allows the insertion of one other page (4 in total), I chose to have three, and am leaving the last section empty (you can exclude it by choosing – Select – in the Front Page Section 4 Content). For example, if you wish to display only two pages, then you will leave the last two sections empty.

If you choose “Select” for all 4 fields, this means that all the other pages won’t be pulled to your homepage, and your homepage will consist only of the content which shows up above all these sections (the content inserted directly into the homepage).

This is what my page looks like after all these settings:

My recommendation is to modify the Home page that came together with installing the theme like I did. If you opt for deleting and creating a new one instead, you must adjust it for it to appear on your homepage.

You can do this by going to Appearance > Customize > Homepage Settings.

Creating New Pages

A site can have an unlimited number of pages. How many you will have depends entirely on your specific needs.

The same building principle is used for all pages except for the homepage.

You can start building your page by going to Pages > Add New. Every page has a unique title that will be displayed on the page in question. However, if you want, you can hide the page title, as well as its content.

You can create content by using Gutenberg blocks, within which you can put all your information, images, and other media. Like I mentioned before, once you create all your content, you can either publish a page, save it as a draft or schedule its publishing for later.

Also, you can delete all the pages which you no longer need to use. You should delete all the pages you no longer have the need for because everything unused just puts a strain on your website. To delete the pages, you need to find a page you wish to delete in the Pages > All Pages list, and then click on Trash.

One final note – make sure to also clean any leftovers in the Trash section, because these can also clog up your site if too many deleted pages pile up.

Creating Blog Posts

Now that I showed you how to create inner pages, I will also show you how to create a blog post. The principle for creating blog posts is the same as creating pages, the only difference is that it’s done in another place.

The Post section in the left menu gives you a couple of different options. The first is the All Posts option, which displays all the posts that have been created. Since I haven’t made any yet, I currently only have the ones that came together with the Twenty Seventeen theme. The Add New option has the purpose of creating a new post, just like the one in the Pages section. Once again, the content can be added with the help of blocks.

I will just mention briefly that there are different types of post formats in WordPress, which you can use depending on the type of content you plan to post. You can give your post a specific appearance by selecting one of the following post formats: Standard, Gallery, Link, Quote, Video, and Audio.

After choosing the desired format, everything else remains the same as when you create a new page. You can give your post a title and add content, then publish it, save it as a draft or schedule it for publishing.

Below is my example. My first blog post has a title, text and some photos. The text can be placed inside the Text block (first two paragraphs), though I (personally) opt for the Classic Block more often (last two paragraphs) because I can bold the text there or add some other characteristics.

I added the pictures with the help of column blocks. It’s extremely important to make sure the images have the same dimensions in order to display your content like this.

On the right side of the post in the picture above, you can see the sidebar. I’ll talk more about it a bit later.

One other thing that the blog posts have and regular pages don’t are the categories and tags. They have the purpose of grouping the articles that follow certain criteria. In short, categories stand for the overall labels (i.e. news, business, technology, and so on), while tags are more specific things that can be found in the post. For example, depending on the topic, an article from a technology category could have tags like software, tech, smartphone, gadgets, etc.

Blog Page in Pages

After you created a post or two and started your blog, you should go back to the Blog page that you had run into before – it’s located in the Pages > All Pages.

Just like the title Home has a text “Front Page” right next to it which indicates that it’s different from others, the Blog page also has a “Post Page” next to it. This is a specific type of blog page that has all the published posts until now listed. In other words, it gives you an overview of all posts on your site. This page shouldn’t be deleted – it deserves its spot on the menu so that the users can browse through your blog with ease.

Widget Areas

Aside from the content that you insert into the pages, every theme has areas where you can add extra content. Every theme has a specific number of these areas. The Twenty Seventeen theme, in particular, has three – a Blog Sidebar, Footer 1 (left footer column), and Footer 2 (right footer column).

There is already some data in these areas that comes together with the theme installation, but it has to be changed. To access these areas, go to Appearance > Widgets. Once there, you will see all available widget areas on the right side of the screen (in this case, three).

There are widgets inside each one of these areas. Let’s say that these widgets represent a type of page block that serves the purpose of presenting certain information on your page.

On the left, you will see a list of all Available Widget.

To use these widgets, you can drag them and simply place them inside the desired widget areas.

This is what the widget area with added widgets looks like.

Also, in the picture below you can see the Footer widget area with some widgets inside it. Even though at first glance it may look like the social icons also belong to this area, they are actually part of a Footer Menu. The “Proudly powered by WordPress” part also comes with the theme by default and can be deleted.

Another way in which widget areas can be edited is by going to Appearance > Customize > Widgets.

Creating a Menu

Two default menus come with the Twenty Seventeen theme.

The first one is located on each page right underneath the header image:

The second one is in the footer:

All the menu settings can be accessed by clicking on Appearance > Menu. This is where you can edit the existing menus. Simply select a menu that you wish to edit from the dropdown.

On the left side of the screen, there are items you can add to the menu, such as pages, posts, and so on. A menu structure is on the right, and it’s where you can drag the items and change their order.

During the creation of the footer menu, custom links have been made which contain some default settings. You can delete all the links you don’t need, and for those you wish to keep, you only need to change the links and insert those that lead to your social media profiles instead.

Also, you can insert additional links for other social networking sites, not just for the ones that are offered. For example, you can add Pinterest, and the icon in the footer will pull the Pinterest icon. Here are some of the supported social networks in the Twenty Seventeen theme that will have their own icons if you insert them:

Behance, Codepen, Deviantart, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, Github, Google+, Instagram, Linkedin, Meanpath, Medium, Pinterest, Pocket, Reddit, Skype, Slideshare, Snapchat, Soundcloud, Spotify, Stumbleupon, Tumblr, Twitch, Twitter, Vimeo, Vine, VK, WordPress, Yelp, Youtube.

Menu Settings determine the location in which a certain menu will appear. You can find them at the bottom of the Menu screen.

If the Top Menu checkbox is marked, this means that the menu will appear on every page underneath the header image. If, however, the Social Links Menu is marked, this means the menu will show up in the footer area.

If you want, you can also create a custom menu instead of editing the pre-existing ones. Just like with the pages and posts (and everything else on the site in general), make sure to delete everything you’re not using, so as not to burden the site.

You can also edit your menus by going to Appearance > Customize > Menus.

Additional CSS

In case you wish to change certain theme features and adjust them to your preferences, you can always insert some additional CSS. This can be done by going to Appearance > Customize > Additional CSS and adding the lines of code there.

You can do this by adding new attributes to particular elements (or rather, their class) you wish to change.

For example, I already mentioned in the beginning that I wanted to change the look of the Site Title and Tagline. I made sure to inspect elements, check out their class and assign them different attributes.

Changing the Title and Tagline Color

I also stated that you can change the colors by going to Appearance > Customize > Colors. However, this is only the case for the light theme.

If you wish to change the color on the dark theme, the code for doing so is simple:

.site-title a {color:#e92442 !important;}
.site-description{color:#e92442 !important;}

The .site-title part of the code stands for the Site Title, while the .site-description is for Tagline. The only thing you need to do is copy this code and insert the desired color (or colors).

Styling the Tagline

In the very beginning, I mentioned that the tagline can cause you some trouble. Specifically speaking, if you have a multicolored image, this can cause the tagline not to be seen clearly. That’s why it’s always good to have the styling option.

.site-description{font-family: 'Dancing Script', cursive;
font-weight:bold;
font-size:25px;
opacity:1;
}

This is my code where I added another font to the.site-description element class. I also inserted specific font attributes (weight and size) and changed the opacity to 1. You can add any other font you wish your tagline to have. And of course, you don’t have to put in all the attributes that I added, but can pick the ones that suit you and delete those you don’t need. In case you’ve never done anything in CSS before, you don’t have to worry – it’s pretty easy to do. There are also many useful tutorials on this subject, particularly on how to add a specific font, or how to style the text with CSS.

You can apply all these to any type of text on your website. You just have to find the element class and give it some attributes.

Another thing you may find useful is adding the background color behind the site title and tagline.

The line of code for the background color that needs to be added to the desired element or class is the following: background-color:#000000;.

Now, the code for my tagline looks like this:

.site-description{font-family: 'Dancing Script', cursive;
font-weight:bold;
font-size:20px;
opacity:1 !important;
background-color:#000000;
padding:0 18px 9px 11px;
}

The padding has a function of increasing the text background field. You should insert the values that work for you.

Finally, I will also add the background to the site title:

.site-title{background-color:#000000;
padding-left:10px !important;}

Adding the Extra Sections on Your Homepage

Adding a custom CSS can also help you display more than 4 available sections on your homepage. For example, say that you wish to have 6 additional pages that will also be displayed on your home screen. It’s quite easy to make this possible – you just need to add the following code:

add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' );
function prefix_custom_front_page_sections( $num_sections ) {
return 6;
}

The code should be added to the theme’s functions.php file. And don’t worry – if you follow these steps, you can’t go wrong with it.

First, head to Appearance > Theme Editor.

Then, find the functions.php.

Add the code at the bottom, and click on Update File.

Now, go to Appearance > Customize > Theme Options, and you will see that now, you have the option of adding 6 more pages.

Conclusion

And that’s it – all the essentials you need to know to build a website with the Twenty Seventeen theme. However, aside from all the options I already mentioned in this tutorial, there are always some additional functionalities you can incorporate during your website creation to improve your website’s speed, security and overall ease of use. For example, you can try out some of the must-have WordPress plugins for starting a new site, or install one of the handy WordPress SEO plugins which will make your site optimized for search engines. Whichever direction you want your site to go, I hope this tutorial will help you, and I wish you luck with your building!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

• How to Start a Multi-Vendor Marketplace with Dokan Plugin
• The Best Platforms for Website Design Inspiration
• Free Feminine WordPress Themes with a Gentle Touch