Building Navigation tree without Graph traversal. Anchor Navigation benefits for a blog.
I want to share with you one short, straightforward and exciting software development story.
Here is the context. People.ai is a revenue intelligence platform that allows Sales, Marketing, and RevOps to grow revenue by translating insights into actions. The company has a business website with a technology description and many interesting posts related to the sales and marketing areas. If you are interested in incredible success stories, tips, and tricks related to sales and marketing, please check out our business blog.
The challenge.
As mentioned earlier, People.ai’s website has a blog. Marketing and sales teams regularly post articles, and some of them are huge (4000+ words). Working with the metrics, I noticed that people leave the posts before they finish reading. I have found out that navigation through the articles is quite challenging, and you can do it only while scrolling the page. And the logical step was to add a sidebar with navigation by paragraphs.
The Implementation.
My first idea was to find a lightweight library or a WordPress plug-in, but I realized that the plug-ins are usually over-engineered or don’t solve our goal easily and elegantly. And I decided to build my “own bicycle” — a navigation widget.
Step one.
I use WordPress as a CMS for content editing. CMS generates HTML output for an article. One of the functions that return post HTML is get_the_content(); All headers have the next tag construction shown below.
<h3 id=”headerID”>HeaderTitle</h3>Obviously, as step one, I have written a regular expression that collects all headers from the WordPress output to an array.
/h.*?id=[\”,’](.*?)[\”,’].*?>(.*?)<\/h(.)/Here is a detailed explanation of the regular expression using Regex.
Step Two.
Once the headers are collected in the same order as in the HTML output, I build a Tree where H2 tags are parents and H3–H6 tags are children.
It is a classic scenario of building a graph by traversing through the headers list.
As the plug-in renders the list, I transform the hierarchical structure to a plain list. The magic trick is to add a class that keeps the data about ranking to the tag “<li>” and adds the padding to each CSS class depending on the H hierarchy (size). For example, from 10 px for H2 to 50 px for H6. As one example:
<li class=”h-size-2">H2Title<h2>.h-size-2 { padding-left: 10px; }
That magic trick saves your developing time, makes code transparent, easier to write and debug. Also, use less CPU time for calculation.
Bonus.
To make an expandable list for nested H elements, I use a straightforward trick with CSS and a couple of lines of JS code.
I have defined main-headers and marked them via CSS classes. The child tags are hidden by default via CSS style.
In the JS code, I added a listener to a click event to change the classes on the fly to make items visible after expansion.
The Result.
I performed the A/B testing once I finished implementing the new navigation panel, where 50% of the readers didn’t see a navigation panel, and the other 50% saw the navigation panel. During 30 days of testing, the statistics showed a 23% increase in average reading time, and about 18% of the users scrolled to the end of the article.
PS.
I implemented an anchor navigation tree for WordPress in June. While I was writing this article, I found an excellent article from Kinsta. That author described a few ways to create an anchor tree for navigation and explained why it is essential to have that navigation for a post with 4000+ words. I recommend reading that article and choosing the best way to implement post navigation based on your criteria. I just proposed an option for your consideration here.
Check out the rest of our technical blog to see more exciting stories and useful tricks from our engineering team.
