Summary & Genesis of this session on increasing blog article length and keeping the parts of the article clickable as ‘parts’

In this session, Brett works with author and blogger Craig Phillips from Second Chance to Live . Craig’s blogs and books help survivors of traumatic brain injuries from a physical, mental, emotional and spiritual perspective.

For years, Craig has written hundreds of blog articles and 7 books on these topics. Some of those longer articles were broken up into multiple parts. Times are changing and in 2018 long form content is more popular than ever. Successful bloggers average article length is 900-1200 words long and growing. Bloggers are writing longer articles, spending more time with their craft and those that do are performing better in their efforts to rank in Search Engines (via SEO techniques).

 

Jump to 12:26 to skip Gutenberg troubleshooting

Feel free to skip ahead in this video to the 12 minute and 26 second mark to skip the troubleshooting portion of this video where we install the Classic WordPress editor after an automated WordPress 5.0 update by Craig’s host, Godaddy.

or click here to hop into it faster!

So we sat down with Craig in this Zoom session to look at what it would take to convert a 3 part article into a long form article.

Craig still had the goal of making his articles easy to navigate for his audience. Some of his audience members due to the nature of their traumatic brain injuries, need options to deal with longer articles in segments.

An old html concept sometimes referred to as a jump link or an anchor link (jump links can also mean something else), can be used in a long article to create either a mini menu only in the article or even a clickable table of contents if that is desired (even better for SEO).

So in this example we show how to set this system up in a WordPress post using the html concept of an id with a value set in quotes.

Now when we created this video, Craig’s site hosted on Godaddy, had just gone through a WordPress 5.0 upgrade a day or two before. So we also walked through the quick troubleshooting process of adding the Classic Editor plugin into his site so that Craig could work in a system he is familiar with (the WordPress Classic editor.)

So the first few minutes of this dealt a bit with that challenge. Anchor links can also be used in a Gutenberg, new wordpress blocks context, but we do not show that in this video.

It can also be used with any WordPress builder. In fact, advanced looking button and menu systems can also be created in some great builders like Divi Builder, Elementor or Beaver Builder.

Those builders can dress up the look and make the UI (user interface) even easier to understand. So if you’d prefer to avoid html and would rather work in the drag and drop elements of a builder, that is possible!

If you’d like help or more guidance with this, you can reach out to Brett at https://softduit.com or https://wpthemespeed.com (we’ll be merging these brands in 2019).

HTML Tips

Here’s some of the html examples used in this video

<h2 id=”part1″ >Part 1</h2>

and its corresponding hyperlink in the menu

<a href=”#part1″>Part 1</a>

<h2 id=”part2″ >Part 2</h2>

and its corresponding hyperlink in the menu

<a href=”#part2″>Part 2</a>

<h2 id=”part3″ >Part 3</h2>

and its corresponding hyperlink in the menu

<a href=”#part3″>Part 3</a>

What do those links look like in the pseudo menu looking example

<a href=”#part1″>Part 1</a> | <a href=”#part2″>Part 2</a> | <a href=”#part3″>Part 3</a>

Don’t like the Pipe character “|” ?

Use anything you like or nothing at all!

<a href=”#part1″>Part 1</a> – <a href=”#part2″>Part 2</a> – <a href=”#part3″>Part 3</a>

<a href=”#part1″>Part 1</a>  <a href=”#part2″>Part 2</a>  <a href=”#part3″>Part 3</a>

These links in this example do nothing, just here for a visual example

Part 1 | Part 2 | Part 3

Part 1 – Part 2 – Part 3

Part 1  Part 2  Part 3

Below these html tips, you’ll see 3 buttons showing the this same technique with buttons instead of links. This is powered via the Divi Builder or Divi Theme!

Comments

Responses...