Simple Post Navigation with SVG Icons

When developing new themes in the past, I have found it challenging to find clean and simple examples to enhance the default WordPress navigation to next/previous posts when using the_post_navigation function. We can easily add a SVG icon inline to the arguments and style it with CSS to have the same color and behave like our link text. This works great when starting with Underscores when making your new WordPress theme.

    • Find the_post_navigation in your WordPress theme project. Typically, the_post_navigation will be located in the single.php file.
    • the_post_navigation();
  1. Add an array to the_post_navigation so that we can change the default arguments. For this example, I want to change the default prev_text and next_text. The %title tells WordPress to insert the title of the post we are linking to.
    • 
      the_post_navigation( array(
        'prev_text' => __( 'Previous: %title' ),
        'next_text' => __( 'Next: %title' ),
      ) );
      
    • Save the single.php file and open a Post in your browser. The new navigation, depending on your default CSS styles, should look something like this.
    • Rendered result of step 1
  2. Wrap the arguments with a span tag and give them a descriptive class. This will allow us to style the links text with our CSS later. I used the class name "nav-next-prev-text". Make sure to use double quotes for the class name.
    • the_post_navigation( array(
        'prev_text' => __( '<span class="nav-next-prev-text">Previous: %title</span>' ),
        'next_text' => __( '<span class="nav-next-prev-text">Next: %title</span>' ),
      ) );
  3. In order for us to style our SVG icons with CSS, we need to add one more set of span tags. Let’s add one with a class of "nav-prev-icon" before the “Previous” text and one with "nav-next-icon" after the “Next” text.
    • the_post_navigation( array(
        'prev_text' => __( '<span class="nav-prev-icon"></span><span class="nav-next-prev-text">Previous: %title</span>' ),
        'next_text' => __( '<span class="nav-next-prev-text">Next: %title</span><span class="nav-next-icon"></span>' ),
      ) );
  4. Now we are ready to get our SVG icons. For this example, I chose the icons chevron_left and chevron_right from the Material Design collection. You can chose any others that will fit your theme styles or needs.
    • Download your selected icons and open them in your code editor.
    • The chevron_left code should look like this.
    • <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    • The chevron_right code should look like this.
    • <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  5. We can now add the inline SVG code to our arguments. This will create a long array, but I think the end results are worth it.
    • Insert the SVG code for the left pointing icon (chevron_left) between the span tags with the "nav-prev-icon" class. The SVG code for the right pointing icon (chevron_right) between the span tags with the "nav-next-icon" class.
    • Our completed array should now look something like this.
    • the_post_navigation( array(
        'prev_text' => __( '<span class="nav-prev-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span><span class="nav-next-prev-text">Previous: %title</span>' ),
        'next_text' => __( '<span class="nav-next-prev-text">Next: %title</span><span class="nav-next-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span>' ),
      ) );
    • If you re-save the single.php file and refresh your browser, you should now see the new icons in next to your navigation text.
  6. Let’s review the code that WordPress will output when calling our modified function. We will need to reference this when creating our CSS styles.
    • <nav class="navigation post-navigation" role="navigation">
        <h2 class="screen-reader-text">Post navigation</h2>
        <div class="nav-links">
          <div class="nav-previous">
            <a href="http://YOURDOMAIN/sample-post-01/" rel="prev">
              <span class="nav-prev-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span><span class="nav-next-prev-text">Previous: Sample Post 01</span>
            </a>
          </div>
          <div class="nav-next">
            <a href="http://YOURDOMAIN/sample-post-03/" rel="next">
              <span class="nav-next-prev-text">Next: Sample Post 03</span><span class="nav-next-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span>
            </a>
          </div>
        </div>
      </nav>
  7. We will use flexbox in the this example to control the layout. Open your themes CSS file and we will get started.
    • If we look at the generated code above, you will notice that a div with the class "nav-links" wraps around our navigation links and acts as a container for our child divs. We can use that container to display the contents with flex, put our links in a row and make sure the child containers are pushed to either end of the row with justify-content: space-between;.
    • div.nav-links {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    • Set the child containers to 50% (or less) so they both fit in the container. Additionally, use text-align to have the links move to the correct side of the page.
    • .posts-navigation .nav-previous,
      .post-navigation .nav-previous {
          width: 50%;
          text-align: left;
      }
      .posts-navigation .nav-next,
      .post-navigation .nav-next {
          width: 50%;
          text-align: right;
      } 
      
  8. Time to format the text. I wanted my text understated, so set the font-size to 16px and the line-height to 1 in order to make it easier for us to line up the elements in the next steps.
    • .nav-next-prev-text {
          font-size: 16px;
          line-height: 1;
      }
      
    • Next, set the color for your links. Use whatever colors match your theme the best. I also set text-decoration to none. This will remove the underlines from the link text.
    • .nav-previous a, .nav-next a {    
          color: #204569;    
          text-decoration: none;
      }
      .nav-previous a:hover, .nav-previous a:focus, .nav-next a:hover, .nav-next a:focus {
          color: #5691CB;
      }
    • If you save your CSS changes and reload the page, you will see the layout getting better.
  9. Our layout is looking better, but the arrows are not lined up and their color does not match our link color. We can now fix that with a bit more CSS.
    • Start off by giving the span tag we wrapped our SVG icons a relative position. This will allow us to tweak the positioning of the icons.
    • .nav-previous a span.nav-prev-icon, .nav-next a span.nav-next-icon {
          position: relative;
      }
      
    • Now we can add some more styles to line up the icons with the middle of the text and change its color using the fill property to match our text link colors. We also want to declare the height and width of the icon.
    • .nav-previous a span.nav-prev-icon svg, .nav-next a span.nav-next-icon svg {
          position: relative;
          height: 24px;
          width: 24px;
          vertical-align: middle;  
          fill: #204569;
      }
      
    • If you save your CSS changes and reload the page, you will see icons are the right color and almost perfectly lined up. We just need to adjust them up by 2 pixels to make them perfect.
    • Add the top property to the last block of CSS and give it a value of -2. You may need to adjust that number if you are using different icons. Your new CSS should look like this.
    • .nav-previous a span.nav-prev-icon svg, .nav-next a span.nav-next-icon svg {
          position: relative;
          height: 24px;
          width: 24px;
          vertical-align: middle;  
          fill: #204569;
          top: -2px;
      }
      
  10. Finally, let’s add one more block of CSS to make the icon color change when we hover over it to match the text.
    • .nav-previous a:hover span.nav-prev-icon svg, .nav-previous a:focus span.nav-prev-icon svg, .nav-next a:hover span.nav-next-icon svg, .nav-next a:focus span.nav-next-icon svg {
          fill: #5691CB;
      }
      
    • Refresh your page and take a look at your new navigation.