How To Change The Navigation Bar Color In Wordpress Twenty Seventeen

Xx Seventeen shipped as the new default theme with WordPress 4.vii. This business-oriented theme marks a noteworthy difference from the blog-centric default themes of the by and reflects WordPress' broader transition from a blogging platform into a platform well-suited to creating all sorts of websites.

If you plan to try out Twenty Seventeen y'all'll figure something out quickly: this theme is zippo like its predecessors. Past default themes have required only minimal setup and were designed to exist functional web log themes correct out of the box. This is not the case with Twenty Seventeen.

Sure, yous can use information technology as a blogging theme, but that actually isn't what it's designed or intended for. It'south actually designed to build business websites using a department-based landing page mode homepage — which you can quickly discern by taking a look at the official theme demo site.

The outcome of this shift in focus is that setting up Twenty Seventeen takes a chip more doing than past default themes. In this post, we'll explore 20 Seventeen, see what information technology has to offer, and I'll walk y'all through the theme setup and so that yous tin can prepare a professional business landing page with Xx Seventeen with ease. Continue reading, or jump ahead using these links:

• The Twenty Seventeen Theme
• How to Create Homepage Sections in Twenty Seventeen
  • Step 1: Create a Page for Each Homepage Section
  • Pace two: Add a Featured Image to Each Page
  • Step 3: Assign a Static Front Page and a Posts Page
  • Step iv: Assign Pages to Each Forepart Folio Department
  • Step 5: Create Your Principal Navigation Menu
  • Stride half dozen: Add together a Video Header
  • Extra Credit: Create Dynamic On Page Navigation

The 20 Seventeen Theme

The Twenty Seventeen default WordPress theme.

The apply of a landing page to serve as the homepage for business websites has taken the web by force. And Twenty Seventeen makes it piece of cake to build an attractive business landing folio with the default WordPress theme.

To get a sense of the possibilities, have a look at the official Twenty Seventeen theme demo.

Right off the bat, you'll notice the video header. Scroll downwards a trivial and the exclusive design of the page volition become apparent. Each section is separated by a hitting parallax background image that occupies the full width and height of the viewport.

Navigation is made simple with a sticky top navigation bar. And a single font, Libre Franklin, is used throughout the theme in a variety of weights, brightness values, and styles.

Once properly set up, 20 Seventeen presents a modern, professional person expect, built upon readable font selections and potent use of striking visuals balanced by the generous use of whitespace.

How to Create Homepage Sections in 20 Seventeen

Provided how much emphasis Matt Mullenweg has placed on the Customizer in recent history, information technology'll come as no surprise that much of the Twenty Seventeen setup work happens in the Customizer.

A wait at the menu options bachelor in the Customizer with the Twenty Seventeen WordPress theme activated.

In addition to the standard features such as menu and widget setup, from the Customizer, yous tin set up a header image or video, switch to a different colour scheme, and assign content to your front end page sections.

WordPress 4.7 too introduces a new feature called visible edit shortcuts — they appear every bit blue icons in the paradigm above. Clicking on any of these shortcuts will open up the Customizer menu where that part of the site tin can be customized.

That makes it pretty easy to edit many of the features in 20 Seventeen such as the header image, site tagline and title, and the content appearing in each folio section. Simply find the content yous wish to edit, click on the visible edit shortcut, and customize to your heart's content.

WordPress 4.7 also ships with a new Customizer feature which yous'll notice nether the Additional CSS Customizer menu option. Nosotros've written about the new Boosted CSS characteristic before, so we merely briefly mention it once more hither and point out that it is a core feature and not a characteristic specific to Twenty Seventeen.

To demonstrate how to set up Twenty Seventeen I'm going to setup the theme equally if I were going to employ it for my personal website. Let's get right to it.

Step 1: Create a Page for Each Homepage Section

Create the pages that you desire to display in the front end page sections.

The showtime thing y'all need to do is to create a few pages:

• Create a page to serve as your static homepage.
• Create a page to serve equally your blog or posts page.
• Create upward to four additional pages to contain the content that will be displayed in your homepage sections — brand it 3 boosted pages if y'all plan to use your blog or posts page as one of the homepage sections.

In the case of my example website, I created a home page, weblog page, nigh folio, services page, and contact page.

Step ii: Add a Featured Image to Each Folio

In gild to achieve the parallax image upshot, you need to add a big featured prototype to each folio that volition be part of your forepart page sections. You will probably not want to add a featured prototype to the home page you lot created in the previous pace, but you lot will want to add a featured image to every other folio.

Fix a featured epitome for every folio.

The Twenty Seventeen demo uses images that are 2000 pixels wide by 1200 pixels tall. Images that are close to that size piece of work very well. Don't use minor images or the results will be very poor.

In my example, I sourced gratuitous images from StockSnap and resized them all to 2000 pixels wide and approximately 1200 pixels tall, give or take 10 percent.

Step 3: Assign a Static Front Page and a Posts Page

Select the option to display a static front page.

Now information technology'due south time to offset customizing. Launch the Customizer — get to Advent > Customize in the admin surface area or click Customize on the admin bar while viewing the site forepart.

Select the Static Front Page menu item and brand the following setting adjustments:

• Below Front page displays, select the radio push for A static page.
• From the Forepart page dropdown bill of fare, select your site home page.
• From the Posts page dropdown bill of fare, select your posts or blog page.

Don't forget to hitting Save & Publish, and then motility on to the adjacent pace.

Pace 4: Assign Pages to Each Forepart Folio Department

To assign the various pages you created previously to the front folio sections select the Theme Options menu detail from the Customizer. Next, employ the drop-downward menus to assign each folio to the relevant front page department where you want it to appear.

Step 5: Create Your Primary Navigation Card

You tin create your navigation carte du jour either by selecting the Menus option from the Customizer menu or by going to Advent > Menus in the admin expanse. In either example, creating WordPress menus hasn't changed in WordPress 4.vii, so create a menu only equally you have done in the past and assign it to the Top Card location.

Next, let'south supercede that ho-hum header prototype with a video. Become to the relevant department of the Customizer by clicking on the advisable visible edit shortcut or locate the Header Media menu particular in the Customizer.

Upload or select the video you wish to utilise. Alternatively, you lot tin too provide the URL of a YouTube video to display in the header if you wish. If you exercise upload a video note that the theme instructions recommend a video with dimensions of 2000 by 1200 pixels.

I selected a free stock video to use for my site. At 1920 past 1080 pixels, it wasn't quite up to the recommended dimensions but it still looks quite overnice.

At this point, your static homepage with forepart folio sections is done!

Extra Credit: Create Dynamic On Page Navigation

1 feature that is notably absent from Xx Seventeen is built-in support for navigation between the front end page sections. Information technology certain would be overnice if the navigation took you directly to the relevant sections of the homepage. Thankfully, this is an omission we can quickly remedy.

The outset thing to exercise is to create a card that links to id attributes rather than to unlike pages of your website. To practice this, create custom menu links that expect similar this:

Create custom menu links using IDs.

When crafting IDs, merely apply the page titles from each page displayed as a front page section, but convert the championship to lower example and replace any spaces in the title with dashes.

If y'all have installed WordPress in a subdirectory — a adequately common practice for sites developed in a local evolution environment — you volition need to include the subdirectory in your link. For example, for this project, my development site URL is http://localhost/wp4point7. This means that WordPress is installed in a subdirectory: …/wp4point7. In order for the links to work properly, I need to include the subdirectory in the URL like this: /wp4point7/#nigh.

If y'all aren't working with a subdirectory installation you can omit the subdirectory and utilize the structure shown in the image to a higher place.

With your navigation in identify, you demand to add ids to each front folio section. Y'all can do this in one of 2 ways.

The simplest solution is to add the ids directly to the page titles using the WordPress page editor.

You can add HTML straight to the championship field in the page editor, merely this method is not ideal.

Notice that to add the id I've wrapped the championship in a span element. The id itself is merely the page championship in lowercase with any spaces in the championship replaced with dashes — this means that the IDs volition match the IDs nosotros added to the custom navigation bill of fare links. In addition, I've added a way attribute and 96 pixels of top padding. When the links are clicked this padding value pushes the content down so that it tin can exist seen beneath the sticky navigation bar.

To exist honest, this approach is a bit of a hack and I don't much care for it. What I'd rather practise is add the bridge element, id, and padding using jQuery. That way, I'm not mucking upward the page titles in the editor but however accomplish the same end outcome.

Here'south a bit of code I came upwards with that produces the desired results:

What that code does is locate the title of each section and so wrap the title in a bridge with the necessary styling applied. In addition, the lawmaking creates an id value past grabbing the section title, converting information technology to lower case, and then replacing spaces with dashes. So, if you were to have a section with the title My Blog (such every bit in the image in a higher place), this lawmaking would add the following id aspect: id='my-web log'.

This id format matches the aforementioned syntax I recommended for your custom navigation menu links.

To load that code on your site y'all could add it in one of 2 different places: a JavaScript file that is part of an activated Twenty Seventeen kid theme or to a plugin that loads custom JavaScript.

Personally, I went the 2nd route and used the custom CSS and JavaScript plugin described in the article How to Plow Whatever WordPress Theme Modification into a Simple Plugin. Nonetheless, you could just every bit hands use a plugin similar Simple Custom CSS and JS to add the jQuery.

With the jQuery loaded and the new navigation carte created, here'southward how my site's primary navigation now works.

Now 20 Seventeen is set up as a landing page and the primary navigation works as on-folio navigation between the homepage sections. If yous desire to take things a few steps further, you could consider implementing the following additional enhancements:

• Add together redirects then that anyone who lands direct on 1 of the pages that are displayed equally homepage sections is redirected to the relevant section on the homepage. For example, redirect the folio http://example.com/contact to the front end page department http://example.com/#contact.
• If yous opted to apply jQuery to enable navigation between front page sections, employ conditional tags to but load the code on the homepage.
• If your site will include additional pages that aren't home page sections, add those to the navigation menu and nest all of the front folio section links in a driblet down carte du jour as shown in the image beneath.

Add the panel links to a drop downwards menu if you want to also link to other pages with your navigation menu.

Conclusion

Xx Seventeen signals a whole new brood of WordPress theme — at least, as far as default themes are concerned. It'due south articulate that the WordPress developers behind Twenty Seventeen were committed to pushing WordPress further from its blogging roots and into the world of business and eCommerce websites.

Twenty Seventeen offers a cute and modern department-based front page blueprint. Still, setting it upward takes a flake more than effort than previous standard themes accept required.

Every bit you lot've seen in this post, putting in the endeavour is well worth it and the effect is a far more than professional and attractive business organisation website that previous default themes could ever have dreamed of creating.

Editor'due south Notation: This post has been updated for accuracy and relevancy. [Originally Published: December 2016 / Revised: February 2022]

Tags:

Source: https://wpmudev.com/blog/twenty-seventeen-wordpress-theme/

Posted by: bartleytheds1985.blogspot.com

Share this post