Author: Nick Schäferhoff

Growing a website is not an easy undertaking, especially if you are on a budget. While there are plenty of tools out there to help you attract visitors to your site, most of them are paid. So, what are you supposed to do as a startup or small business that is strapped for cash? Use free marketing and traffic growth tools.

In this post, we have compiled a list of useful tools for increasing website visitors and growing your site that you can use without paying a dime. Some are completely free, some are limited free plans of otherwise paid tools.

What they all have in common is that they help you grow your site and improve your content, SEO, social media, and digital marketing. With their help, you can bootstrap your way to more traffic and grow your business for free.

Free Tools for Website Building and Development

We are starting with the most basic thing: building your website. Without one, what are you even going to market? So, let’s take care of that first.

1. WordPress

Naturally, our tool of choice for website building is WordPress. It’s a proven, open-source solution that you can download and use for free. Sure, you still need to pay for a domain and hosting to have your site available online, however, the website itself doesn’t have to cost you a thing.

2. Free Code Editors

To make detailed modifications such as working with CSS you need a good code editor. Thankfully, there are plenty of options, including:

• Light Table
• Brackets
• Notepad++
• Komodo IDE

For a detailed discussion, check our article on the best code editors.

3. FileZilla

When running a WordPress website, more often than not, you will need to access the server at some point. This usually happens via FTP and FileZilla is a popular and free FTP client that allows you to do so. It has everything you need to browse your file system via FTP or its safer cousin SFTP.

4. PageSpeed Insights

Page loading time is an important part of marketing. Visitors don’t like to stick around slow-loading websites and will hit the back button on their browser quickly when they get fed up. In addition, search engines demote you in their rankings for lack of speed.

There are plenty of things you can do to make your site faster but usually the first step is to speed test your website so you know where the roadblocks lie. PageSpeed Insights is a free tool that will give you a lot of information on this topic including your Core Web Vitals.

Alternatives: Pingdom, GTmetrix

Complimentary Content Creation Tools

Content is going to be one of the main pillars of your marketing and for attracting visitors and customers to your site. As a consequence, you can take all the help you can get to make it excellent. Here are some free tools to help you do so.

5. Grammarly

Grammarly is a really good proofreading and editing tool. Simply input your post and it will correct your spelling, punctuation, and clarity. While you don’t get all the features of the premium version on the free plan, it still does a lot to make your writing better.

Grammarly even has a browser plugin that enables you to use its service in other places, such as directly in the WordPress editor. If you want even more, paid plans start at $12/month.

Alternative: Hemingway

6. HubSpot Blog Topic Generator

Having a hard time coming up with topics to write about? Fret not, the topic generator by Hubspot has your back. Simply enter up to five nouns, hit the button, and receive five title ideas that you can flesh out into full articles. If you sign up to their mailing list, you even get 250 title variations to get your creative juices flowing.

Alternative: Portent Content Idea Generator

7. Google Scholar

This one of those tools that, honestly, I didn’t know about until researching this post. It’s like the normal Google search engine but only for scientific papers and publications. Super useful if you want substantiated sources for your content (good for your E-A-T).

8. Convert to Title Case

This is a very small tool but one that I use surprisingly often. It does a single thing: turn any text that you feed it into title case.

Not sure what that is?

Look at the headings in this post. Notice how they have all proper nouns and important words capitalized. A lot of blogs and websites do this as part of their style guidelines and this tool really comes in handy if you need to convert a lot of text or find yourself unsure as to whether you are doing Title Case right.

9. Feedly

RSS and RSS feeders have fallen out of style a little bit. However, back in the day, they were one of the most popular ways to embed or collect content from all your favorite blogs in one place.

The thing is, you can still do that and it’s a great way to stay up to date with your industry, get content inspiration, and find material to share on your social outlets. There are several options out there but Feedly is one of the most popular and comfortable to use. It’s also free.

Alternatives: Inoreader

Graphic Design Tools That Don’t Cost a Thing

Besides written content, visuals are very important for the look, attractiveness, and shareability of your pages. Besides free stock photo sites, you can use the tools below to whip up some images quickly and easily.

10. Canva

Canva is one of the most popular online tools for graphic design, not least because of their generous free plan. It lets you create images, graphs, infographics, visuals for social media, presentations, and much more with just your mouse. There are plenty of templates to choose from, making it easy even for beginners to get started. If you want permanent access to their premium features, the yearly plans are quite affordable as well.

Alternatives: Visme

11. Image Resizer

Similar to the title case generator above this is a relatively small tool that, however, provides a very useful service. In this case, it allows you to upload visual assets and have the page spit them out resized to different common sizes.

Examples include Facebook profile pictures, Instagram story images, YouTube banners, TikTok ads, and much more. Custom sizes are also available. Just upload your image or enter a URL, pick the sizes you need, and download them with a single click. You have to create a free account though.

Alternatives: PicResize

Free Email Marketing and List Building Tools

Email continues to be one of the most effective forms of marketing with one of the highest ROI. For that reason, it’s imperative that you start building an email list ASAP. Use the free email marketing tools below to get started.

12. MailerLite

MailLite is an email marketing service that offers up to 1,000 subscribers and 12,000 emails you can send per month for one website for free. That’s more than fair.

It also comes with a drag-and-drop newsletter editor, offers ten landing pages, A/B split testing, and more. Finally, their paid plans are quite affordable as well for when your site starts to take off.

Alternatives: MailChimp, Sendinblue, GetResponse

13. MailPoet

If you’d rather go for a WordPress-native solution for email marketing, consider MailPoet. The plugin allows you to collect, store, and manage subscribers as well as set up and send out email newsletters from directly inside the WordPress back end. It’s free up to 1,000 subscribers, has templates for emails and subscription forms, offers GDPR compliance, stats, and more.

Alternatives: Newsletter, Icegram Express

14. Sumo

Sumo is a free list building tool that comes with its own WordPress plugin for easy integration. It gives you several different customizable opt-in options, ecommerce features, and analytics amongst other things. Unfortunately, the Pro features aren’t all that affordable when you want to upgrade but it offers a solid foundation.

Alternatives: HollerBox

Improve Your SEO With These Tools (And Without Paying)

Search engine optimization is the foundation of most websites’ traffic. Whether for keyword research, on-page SEO, or technical SEO, there are many free SEO tools that you can add to your marketing stack.

15. Yoast SEO

If you are active in the WordPress sphere, this plugin probably doesn’t need any introduction. It’s the most popular SEO extension in existence due to its ease of use and beginner friendliness. Install it and take advantage of both the SEO analysis and readability indicator to greatly improve your content optimization.

Alternatives: Rank Math, SEO Framework, SEOPress

16. Keywordtool.io

This is a great free SEO tool to quickly collect keyword ideas. It mines Google’s autosuggest function, which means all you have to do is input a seed keyword and it will tell you what users write into the search box in conjunction with it. It also works for YouTube, Bing, Amazon, Instagram, and a bunch of other websites.

Alternatives: Answer the Public, WordStream Keyword Tool

17. SEMrush

SEMrush is one of several full-fledged SEO suites available. What makes it special is that it has a free plan with limited functionality that still offers enough to be useful. You can use it for keyword research, site auditing, backlink analysis, link building, content analysis, and a dozen other things. Unfortunately, it’s quite pricey once you update.

Alternatives: Google Keyword Planner, Ubersuggest

18. Google Search Console

Next we have Google’s free webmaster tools. Connect them to your site and learn everything Google thinks about it. See for what keywords you appear in search and your indexing status, submit a sitemap, learn of problems Google encountered, and check your Core Web Vitals. That’s just the tip of the iceberg, check our detailed article on how to use Google Search Console for the deets.

19. Google Trends

Trends is another free tool that Google provides to improve your SEO. It allows you to compare the popularity of different search terms and see their trends over time. You can also monitor competitors, see daily search trends, and find related search queries to your keywords. It’s all very useful and I recently wrote an entire article on how to use it that I recommend you check out.

20. Screaming Frog SEO Spider

Finally, there is this free SEO tool to crawl your entire website. SEO Spider by Screaming Frog can tell you about broken links, error codes, and the technical optimization of your site. You can use it for free to scan up to 500 URLs and you need to download and install it to do so.

Analytics Tools You Can Use at No Cost

Analytics tell you about what’s going on on your site, such as the number of visitors, the pages they visit, and how they move around on website. Knowing this allows you to make informed decisions about your site content.

21. Google Analytics

Google Analytics is the de-facto standard in web analytics. The free suite can tell you all about the full cycle of visitors interacting with your website. For example, where they come from, how they found you, what they do on your site, from where they leave, and their lifetime value. Check out our Google Analytics 4 tutorial since that version will become the default in summer of 2023. For more similar tools, read up on Google Analytics alternatives.

Alternatives: Matomo

22. Hotjar

Hotjar offers a slightly different approach to analyzing visitors. Instead of the usual tracking across your website, it looks at how they interact with individual pages and shows you the results in form of heatmaps. This allows you to optimize your page makeup to make it more engaging. The free plan can capture up to 35 sessions per day and comes with other features to get feedback from visitors.

Alternatives: Inspectlet

23. SparkToro

This is a relatively new tool for audience research and one of my favorites. It allows you to understand who your audience is, what topics they care about, media they consume, people they follow on social, and a lot more. The free plan gives you 50 searches per month.

Free Marketing Tools for Social Media

These days, social media is a part of most marketing strategies. Use the tools below to save time and get better at it.

24. Buffer

Buffer allows you to schedule social updates in advance. Simply connect your channels and fill the tank. The tool then publishes your updates according to a pre-configured schedule or exactly at the time you have set. The free plan gives you three channels with a maximum of ten updates per channel that you can schedule ahead.

Alternative: Crowdfire, SocialOomph

25. Pablo

Pablo is by the same people who make the Buffer app. It’s a useful little tool to quickly make visuals for social media. It has thousands of image options, can add text overlay in different fonts, and offers the right formats. If you have Buffer, you can also directly schedule your creations from Pablo.

26. Tweetdeck

This free program by Twitter makes managing your account(s) easier. It lets you arrange all the information you need (your feed, direct messages, notifications, subscribed hashtags, and more) in columns for an easy overview. You can also send updates directly from inside the program.

Video Marketing Tools That Won’t Strain Your Wallet

Video content has seen a dramatic surge in recent years thanks to the success of platforms like YouTube and TikTok. For that reasons, it’s good to have some free video tools at hand in order to be able to take part in this trend.

27. Storyboarder

Storyboarder is a desktop tool you can use on Mac OS, Windows, and Linux. It allows you to easily create storyboards for your video ideas and helps with planning. Plus, the program doesn’t cost a thing, who doesn’t love that?

28. Vidyard Video Script Timer

Another one of those small but super useful free marketing tools, this one for video production. Vidyard helps you figure out how long your video is going to be according to the length of your script. Simply enter the word count or paste the script text, use the slider to choose your delivery tempo, and get your time estimate.

29. Wistia

Wistia is a video marketing platform. It allows you to create and edit videos as well as host, manage, and embed them on your website from the platform. They also have engagement tools like annotations, lead capture tools, and analytics. The free plan includes 10 videos and 200GB bandwidth as well as basic analytics.

Alternatives: YouTube, Vidyard

Which Free Marketing Tools Are You Going to Use?

Growing a website without a budget might seem super difficult at first. However, if you look closely enough, you can see that there are lots of helpful tools out there to help you. Hopefully, you have found a few ideas for your own website and business in the list above. There is no shame in starting off with free software and graduating to paid tools once you have gotten off the ground. After all, that’s what bootstrapping is about.

Do you have additional tips for free marketing tools? Please share with the rest of us in the comments below!

The post 57 Free Marketing Tools: A No-Cost Website Traffic Growth Toolkit appeared first on Torque.

Studying examples of hyperlink design is more significant than you would think. Links are what turn the Internet into “the web” and connect otherwise unrelated pages and websites to each other. They also lead visitors around your site, allow them to discover more of it, and dive deeper into the topics they are interested in. Plus, as backlinks, hyperlinks are desired as an SEO signal.

In short, without links, websites and the Internet wouldn’t be what they are.

We have already talked about how to style links using CSS in a past article. However, just because you know how to apply it, that doesn’t mean you know what styling to give your links. For that reason, that’s what we want to cover in this post.

Below, we will go over examples of how different websites make sure their links are noticeable and good-looking. We will also examine the underlying markup and discuss how they achieved the design for their hyperlinks. Hopefully, together it will give you a good understanding and ideas for the links on your own website.

Why Think About Your Link Design at All?

Let’s first talk about why you should invest in the design of your site’s hyperlinks to begin with. Unless you are in the web design business, you are probably so familiar with using them, that you never really consciously thought the way they look before.

Yet, if you pay attention, you quickly notice that links appear very different from website to website. They use various colors, some are underlined, some not, yet, you still instinctively know that a piece of text is a clickable link. At least, in the best case scenario.

In the worst case, the link design is so bad that you are having a hard time identifying them and that is a problem.

Why?

Because, first of all, few people actually read your entire pages and articles, most of them scan. That means they jump from one anchor point to another to find only the parts of your content that interest and are relevant to them.

Along with headings or images, links are one of those anchors. If you don’t make them stand out and identifiable, it makes your content harder to understand for a large part of your readership. And that’s never a good idea if you want them to stick around.

Of course, you also need to think about link anchor text, which lets them know where the link will take them but that’s a topic for a whole other article.

Aside from that, your links are part of your web design, so you need to make sure they are consistent with the rest of your site.

How to Target Links

As already mentioned in the introduction, we have an entire article on how to style links via CSS that I highly recommended you check out. However, because some of the principles in it are important to understand the examples below, here are the cliff notes.

The first thing that is important to know is that, in HTML, links are created with the a or anchor tag.

<a href="https://torquemag.io/">TorqueMag</a>

As consequence, that’s also how to target their styling in CSS:

a {
	color: #3af278;
}

Secondly, besides simply a, links go through several states when used.

You can style them separately using pseudo classes:

• a:visited – A link that the user has visited before, meaning it exists in their browser’s history.
• a:focus – A focused link, for example, is one that a visitor has navigated to using the tab key.
• a:hover – The styling that is visible when users hover their mouse cursor over a link. hover and focus are often styled together.
• a:active – Briefly visible styling during the moment of a link click.

Hyperlink Design Examples to Inspire Your Own Choices

After this quick discourse, let’s have a look at the different ways you can design hyperlinks on your website.

Smashing Magazine

We are starting off with Smashing Magazine. As a well-known web design magazine, you would think their link-design game is on point. For that reason, it’s suprising to see that they pretty much went with the standard option, at least for their in-content links. They are blue, underlined, and they don’t even change when hovered over.

On the one hand, this is really good as it makes sure anyone can recognize them as links. On the other, it’s a bit disappointing because the rest of the website has a lot of microinteractions, but the links don’t.

But fear not, when set to focus, a little playfulness and branding does come through with a dotted line around the link in Smashing Magazine red.

How They Did It

If you want to use a similar outline effect as Smashing Magazine, here’s the CSS markup:

:focus {
      outline: 3px dotted var(--THEME_COLOR_HOVER,#d33a2c) !important;
      outline-offset: 2px;
}

It’s nothing too crazy. A simple dotted outline with a defined width, color (using CSS custom properties), and an offset to make it wider.

TorqueMag

Next up is how we handle link design here on TorqueMag. If you examine any of the links on this or other pages, you will find out the following:

• Hyperlinks are blue and underlined in a colorful way
• Hovering turns them black and also changes the color of the underscore
• When focused or active, a link gets surrounded by a box with a drop shadow

CSS Markup

How is all of this technically achieved? Let’s start with the obvious star of the show, the gradient used for underlining the links, both in their normal state and at hover and active. Below is the code that creates it.

a {
    color: #5568aa;
    text-decoration: none;
    font-weight: 700;
    background-image: linear-gradient(45deg,#ffc08c,#aa278c 30%,#0ecad4);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 100% 2px;
    transition: background-size .3s;
}

a:focus,
a:hover {
    color: #252d4a;
    background-size: 400% 2px;
    -webkit-animation: underline-gradient 4s linear infinite;
    animation: underline-gradient 4s linear infinite;
    text-decoration: none;
}

Here’s the breakdown: First of all, the CSS markup eliminates the usual underline (see text-decoration: none;) and then creates a background image with a gradient that uses three colors. This background image is then positioned fully at the bottom and set to repeat. Finally, it receives a size, which is 100% horizontally and 2px vertically.

There is also a transition property that’s needed for the hover effect, which, suprsingly, is achieved by increasing the size of the background image. That way, the colors stretch out, which, together with transition, give it a sense of motion. The latter is amplified by the fact that the hover effect also uses an animation that causes the colors to keep moving while the cursor is on the link.

Lots of stuff going on for a simple link, isn’t there?

In contrast to that, the focus design is quite simple with just an outline and a drop shadow to the outside:

:focus {
    box-shadow: 0 0 6px #75a1f2;
    outline: 1px solid #75a1f2;
}

WPKube

I have to admit, I really like this next hyperlink design example. While it’s quite simple, in my opinion, it’s also very tastefully done.

The initial design looks simple enough: links are colored in red with a grey line underneath.

When you hover over it, the grey line takes on the same shade of red, with just the slightest delay between the two states.

The Underlying Code

Naturally, the markup for this kind of look is not very complicated:

a {
    border-bottom: 1px solid #ddd;
}


a:hover {
    border-bottom: 1px solid #f05928;
    text-decoration: none;
}

The interesting thing is that they achieve it with the border property. This used to be a thing because it gave you more control over how to style the line. However, today have new CSS features that can target text-decoration properties directly, like text-decoration-offset or text-decoration-thickness, so hacking it via border is no longer necessary.

Notice that the transition effect is part of a catch-all declaration for many site elements, including buttons, etc. It is small but makes a difference.

Focused links on WPKube simply have a dotted line around them.

We have already seen this in another example, so there is no need to go into how to achieve this in CSS again.

Nerd Fitness

Next is one of my favorite fitness websites. They also do a good job making their links stand out by coloring them in the brand’s red.

However, I specifically chose this hyperlink design example because it has a subtle effect for the hover state. The link color becomes slightly desaturated to give users feedback.

Here’s How to Do It

This is a simple effect, so it also doesn’t need a lot of markup to achieve. You simply have a color for the anchor tag and another for a:hover while there is a sitewide transition property to make the change less abrupt.

* {
    transition: all ease-in-out .25s;
    transition-property: all;
    transition-property: background,color,border,opacity;
}

a {
    color: #c73737;
    text-decoration: none;
}

a:hover {
    color: #d35e5e;
}

Apple

I included this example to show you that even the biggest companies with basically infinite design budget can go with a very basic approach. On the Apple homepage, links simply appear in blue and become underlined when hovered over (properly, via text-decoration). The outline for the focus state is simply slightly thicker than usual.

The Markup

Here is the code if you want to do a similar thing:

a {
    color: #2997ff;
}

a:hover {
    text-decoration: underline;
}

:focus {
    outline: 4px solid rgba(0,125,250,0.6);
    outline-offset: 1px;
}

Men’s Health

This magazine website brings a new idea to the table. At first, it seems business as usual: links on the page simply have an underline. The only thing that is noteworthy is that the line is slightly thicker than usual.

However, they have a trick up their sleeve for when you hover over the hyperlinks. To signal that, Men’s Health have chosen to use a background color as an indicator. The links turn yellow with just the tiniest of delays. A first among our hyperlink design examples.

CSS Code

The underlying markup for this is also noteworthy for another reason. To achieve the initial line for their links, the site uses the aforementioned and relatively new properties for controlling text-decoration.

a {
    text-decoration: underline;
    text-decoration-thickness: 0.125rem;
    text-decoration-color: #d2232e;
    text-underline-offset: 0.25rem;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

As you can see, both text-decoration-thickness, text-decoration-color, and text-underline-offset play a role in making the design look the way it does.

As for the hover effect, one thing that stands out is that it simply uses yellow as its color denomination.

a:hover {
    background-color: yellow;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

Outside of examples and test websites, this is a very rare way of declaring colors in CSS and it’s funny to see it out in the wild. Aside from that, you naturally find the transition property to make the appearance and disappearance of the hover background less abrupt.

National Geographic

National Geographic is going for a similar effect as Men’s Health, however, they achieve it very differently. Here, too, the hyperlink design is initially simple with thicker underlines. However, on hover, they go on to cover the entire linked word or phrase.

The interesting thing here is that the background appears to grow from the bottom up, so let’s look at how they did it.

How is This Possible?

First of all, here is the markup for the links in their normal state:

a {
    background-image: linear-gradient(120deg,#fc0,#fc0);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0;
    border: none;
    border-bottom: 2px solid #fc0;
    text-decoration: none;
    -webkit-transition: background-size .125s ease-in;
    -o-transition: background-size .125s ease-in;
    transition: background-size .125s ease-in;
}

As you can see, like in other hyperlink design examples, they achieve it with a simple border-bottom declaration. However, at the same time there is a background image positioned all the way to the bottom but with zero vertical size.

That is actually how they get the impression of growth, as on hover, it goes to 100% vertical size while the ease-in transition takes care of the fact that it appears gradually from the bottom.

a:hover {
    background-size: 100% 100%;
    border-color: #fc0;
    color: #000;
}

Twenty Twenty-Two

For the last examples, let’s look at how two WordPress default themes handle hyperlink design. The first one is Twenty Twenty-Two. There is nothing too spectacular going on, the usually solidly underlined links have a dashed line underneath on hover.

However, we haven’t seen this kind of manipulation yet, so I thought it would be a good thing to cover.

This is How it Works

The theme handles this in the way you would expect. The anchor tags have text-decoration: underline assigned to them and also values for their thickness and offset. Upon hover, it turns to text-decoration-style: dashed. That’s it.

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
    text-decoration-style: dashed;
}

Twenty Twenty-One

Our final example is Twenty Twenty-One. It has a similar hover effect as its predecessor, however, instead of a dashed line, it uses a dotted one.

But that’s not reason why I’m mentioning it here. Instead, the interesting part is its focus effect. Instead of the usual outline, the designers decided to use a contrasting background color to make it stand out.

The Accompanying CSS

How they achieved it is also interesting. As you can see from the markup below, the background color is basically white, however, it has its opacity set to 90%.

a:focus {
    outline: 2px solid transparent;
    text-decoration: underline 1px dotted currentColor;
    text-decoration-skip-ink: none;
    background: rgba(255, 255, 255, 0.9);
}

That way, you get this more subtle look that provides a clear contrast but is not too harsh.

Use These Examples for Your Own Hyperlink Design

Without links, what we call the Internet or World Wide Web would not be what it is. For that reason, hyperlinks deserve as much attention in your web design as other elements. After looking at the hyperlink design examples above, let’s summarize what we can take away from them:

• Mark your links clearly so that they are easy to recognize, the most common tools for that are colors, underscores, or both.
• Use hover effects to make sure that users can see their interaction with your links. There is a wide range of possibilities for that.
• Don’t neglect the focus state! Make it easy for users with different abilities to navigate your pages.

That’s it. Now you have a good basis to make design decisions about your own hyperlinks.

Which of the hyperlink design examples above do you like or dislike the most and why? What other design possibilities for links do you enjoy? Tell us in the comments below!

The post Hyperlink Design: 9 Examples from Real-Life Websites (Incl. CSS) appeared first on Torque.

In this post, I will review the WordPress block editor, that has found its way into the platform as part of the Gutenberg project. It has been around for four years and was one of the most controversial changes to ever happen to WordPress.

Now that it has had time to mature and because it is a topic laden with such emotions, I thought it would be a good idea for me to weigh in. As a professional WordPress blogger, I spend all day every day not only writing in WordPress but also testing every aspect of the platform over and over again for different articles. Naturally, that includes the block editor and its growing capabilities.

So, what follows is my personal review of the Gutenberg block editor from the perspective of a WordPress power user. I will talk about what I like, dislike, and what I think could be improved.

The WordPress Block Editor: A Definition

Before jumping into the pros and cons, let’s first quickly settle what exactly we are talking about. Because, when it first came out, Gutenberg only replaced the WordPress post and page editor. However, by now it has branched out to other parts of the user interface. So, to make sure we are on the same page, here’s what is part of Gutenberg.

Post/Page Editor

I already mentioned this. This is what you land on when you go to Posts/Pages > Add New or edit your existing content. The original Gutenberg implementation in WordPress 5.0 only exchanged this part of the editing experience by replacing TinyMCE, which is what WordPress was using before. Naturally, this is where you edit the content of your posts and pages but nothing template related.

Site Editor

First introduced as Full-Site Editing (FSE), this part of Gutenberg has now been re-christened to Site Editor. It is accessible via Appearance > Editor, when you are using a block theme like Twenty Twenty-Two or Twenty Twenty-Three. Here, WordPress allows you to edit your entire site architecture, including headers, footers, menus, page templates, widgets, and the homepage.

Template Editor

Something that a lot of people might not be aware of is that Gutenberg also includes a standalone editor for page or post templates. Again, this is only available for block themes. You can access it from the Page/Post Editor when you click on the name of the template used.

From there, you have the possibility to modify your current template or create custom page templates. It has a slightly different interface as the Site Editor but is overall very similar.

Widget Editor

This part is a bit outside of the rest of the block editor but it is officially part of the Gutenberg project, so I have to mention it here. By now, the block editor UI also extends to widget management. You can find it under Appearance > Widgets in classic themes. In block themes, as mentioned, widget handling happens inside the Site Editor.

To be honest, I don’t really have much to say about this. I don’t think it’s necessarily any better or worse than the old menu and it does its job. Therefore, I am not going dicuss the Widget Editor in detail below. If anyone else has strong feelings or opinions about this, I’d love to hear it in the comments!

Reviewing the Gutenberg Post/Page Editor

Now that we have an idea about what encompasses the Gutenberg block editor, let’s review how its various installments are performing. We are starting with the Post/Page Editor.

What I Like About It

First of all, I have to say I generally really like creating content with the block editor. I wouldn’t want to go back to Classic Editor, I am simply too used to the benefits of the new experience by now. Here are my reasons why.

Slick and Modern

All honor to TinyMCE, which is a true workhorse that has served WordPress well for a long time. However, let’s face it, it’s not the most modern-looking piece of software.

The classic editor experience is a bit clunky and constantly seemed stuck in the early 2000s. In contrast to that, Gutenberg or the block editor simply looks more up to date.

It is spacious, minimally designed, and clean. I also find it easy to discover all the important settings and information. I, for one, am not surprised it’s being adopted into other content management systems.

What You See is What You Get

Secondly, I enjoy that the editing experience is much more aligned with the finished result on the page. In TinyMCE, while you had the ability to add editor styles, you constantly had to preview the page to see what the content looks like on your site.

This goes especially for non-typical elements like buttons or forms. In TinyMCE, it was often necessary to add these via shortcodes. Consequently, you sometimes ended up with a document full of brackets for which you needed to know the meaning in order to decode what is going on.

In contrast to that, in the Gutenberg block editor, except for when explicitly using the shortcode block, you usually see the finished elements in the editor. Even if you don’t, at least you have a valid placeholder.

I find this very useful for adding visuals to content. Back in the day, I had to post a lot of things like “[screenshot]” in my articles in order to mark and find the places where I wanted to include images. In Gutenberg, I can simply add image blocks while writing and fill them when it’s time to add screenshots.

This is a great way to construct post content without having to switch back and forth. Of course, it’s not a perfectly parallel experience. For example, you often have to check whether images need a different alignment. But it’s much better than before.

Easy to Navigate

One thing I remember about the Classic Editor is: So. Much. Scrolling.

If I wanted to re-read an earlier passage or make changes to another part of the post, I had no other choice but to use the mousewheel. This made it easy to lose track of the overall content and sometimes hard to find specific locations.

That’s something that is completely different in the block editor. The menu that opens up when you click the little i icon on top left is actually one of the options I use most often.

It lets you review a breakdown of the entire post via its headings and Gutenberg allows you to jump to different sections with a click. This is so incredibly useful, especially if, like me, you tend to write very long pieces.

What Could Be Better

Of course, using the Post/Page Editor is not all roses and butterflies. It, too, comes with shortcomings, some of them I would call serious.

Performance

My main issue is the editor’s sometimes spotty performance. All that JavaScript necessary to run it can really take a toll on your browser.

Case in point, as I mentioned, I tend to write longer articles. On my own blog, posts are usually at least 3,000-4,000 words long, some way beyond that.

I recently upgraded to a new laptop and, I kid you not, one of the main reasons was that the block editor simply became unusable on my five-year old machine after a certain number of words,. It slowed down to a crawl and took so long to perform just normal tasks that I was sometimes forced to copy sections of a post into a new article, edit them there, and then copy them back. I don’t remember ever having to do that in the Classic Editor.

So, this is a serious area for improvement, even if things have already become better. There’s also something to be said about stability but I am getting to that further below.

Missing Keyboard Shortcuts

One of the things I most liked about the Classic Editor was its robust set of keyboard shortcuts. It easily lets you turn text into headings, change headings to a different order, or switch between ordered and unordered list. All without touching the mouse.

This is a part that’s simply missing from the block editor. While there are sensible keyboard shortcuts (find them in the menu in the upper right corner or by pressing Shift+Alt+H), they simply don’t cover as much as TinyMCE does.

Yes, there are slash commands to input any block of your liking (which is great). However, if I want to change existing text to a heading or switch from an h2 to an h3, I usually have to use the mouse.

Maybe that’s a personal pet peeve but it’s definitely something that could be better in my opinion.

Delving Into the Site Editor

Next up in this Gutenberg review, let’s talk about the Site Editor. Here, too, there’s a lot that’s good and some things that could be better. However, keep in mind that this is a project still in development (as exhibited by the beta tag next to its menu item).

Therefore, take some of what I mention below should with a grain of salt.

What the Site Editor Does Well

I am starting off with the things I think the Site Editor already excels at.

Very Powerful

There’s no denying that the Site Editor can do a lot and gives an incredible amount of power into the hands of non-technical users.

Customizing page templates, creating and changing headers, footers, and other site elements — just a few years back you would have to either know PHP, hire someone, or install a page builder plugin for that. Now, with the right theme, it’s a native function of WordPress and that’s simply great. In addition, the ability to change the entire style of your website with a single click is mind boggling.

Both allows non-developers to make very fundamental modifications to their sites and basically create custom themes by themselves. Especially since they can also export their changes to use on other websites. This is definitely progress and fully in keeping with why so many people love WordPress.

Block Patterns and Template Parts

Two tools that most help modify page content in decisive ways are block patterns and template parts. Being able to completely change the layout of a query loop or switch out the header and footer with just a few clicks is pretty priceless.

In addition, something that the developers really nailed is the ease with which you can add block patterns, including from the pattern directory. Simply copy and paste and they are immediately available where you need them. It allows you to build fully fleshed-out layouts in a very short time.

Room for Improvement

At the same time, there is a fair amount of criticism that you can level against this part of the block editor.

Not the Most User Friendly

While I admire the raw power that the Site Editor offers, it doesn’t always make it easy to wield it from the user’s perspective. While the user interface is condensed enough to serve well for editing pages and posts, the higher complexity of customizing your entire site means that you will often find yourself hunting for settings. The number of menus is limited, which means you often need to do a lot of clicks to achieve your goal.

Apart from that, it’s often the small things:

• Moving blocks in list view via the mouse is very hard. They often end up where you don’t want them.
• Generally, positioning page elements can be a bit of a drag (pun intended).
• Finding out where to do what can take a while, even for someone who is used to building websites.

By far the most confusing task is creating menus. To be honest, I’m not even sure I have understood it completely by this point. You sort of do it on the page, but there is also the Manage menus link in the block options that takes you to the old UI where you can’t really do anything.

I can see this causing a lot of frustration among users and find some of the criticism absolutely valid.

Lack of Documentation

This goes hand in hand with the above. While working with the Site Editor, I noticed that it’s very hard to find good help for specific problems, at least on Google. I know that there is the official support page and I don’t want to take away from the support team, who are doing a tremendous job.

However, the fact is that, more often than not, I had to figure out by trial and error how to perform certain tasks, because I couldn’t really find a good resource to fall back on. Especially when looking for help with specific block functions.

Maybe it’s also due to the fact that this is all pretty new but I found a distinct lack of good articles regarding the Site Editor.

Missing Functionality

Another thing that bothers me is that there are some things you simply can’t do with the Site Editor (yet). Examples include setting negative margins or creating box shadows (though it’s on the roadmap).

If I want to take advantage of any of that, I still need to use custom CSS. That’s a) something beginner users do not know and b) kind of defeats the purpose of the editor. At the very least, it forces you into a hybrid approach where you build the basic page structure and broad design strokes with the Site Editor but still have to go back to the style sheet for the final touches.

Of course, you can’t expect the editor to provide every single possible option CSS offers. However, sometimes the feature set still seems a little thin.

On the other hand, that’s simply the difficult position that the Site Editor is in. It’s not quite a page builder because it’s missing certain capabilities but is also far beyond a basic option like the WordPress Customizer. As a consequence, it ends up somwhere in that middle grey area which doesn’t always do it favors.

Stability

Finally, one of the biggest drawbacks of Full-Site Editing and a topic that needs to be part of any Gutenberg review is that of stability. The Site Editor is by far the one that I have seen the most crashes in.

In its defence, so far that has never led to big data loss, meaning, it was always pretty easy and quick do redo what I did before it crashed, which is mostly due to the excellent autosave function.

However, together with aforementioned performance problems, stability is definitely an area that deserves the most attention because it can get annoying really fast.

Template Editor

As mentioned, this is the editor tagged on to the Page/Post Editor. It’s a bit of a pared-down version of the Full-Site Editing experience.

I assume its purpose is to make changes to page templates on the fly, without having to go all the way back to the Site Editor. That’s generally a good idea, though I have to say that this is the part of the block editor that I have used the least. Therefore, my opinion towards it is relatively neutral. However, that doesn’t mean I don’t have one.

Here’s What I Like

Let’s see what the Template Editor has going for itself.

Good for Its Intended Use

If this editor’s purpose truly is changing templates on the go, I think it is doing a good enough job. You can modify the order of the featured image and page title, switch fonts and colors, or even change headers or footers.

So, when you are working on a page or post and notice that something about the template needs changing, you can do it quickly and easily. Alternatively, it’s also possible to create custom page templates right then and there. That way, you can apply changes only to that one page or assign them to other chosen content. Again, there is no code required for something that you definitely used to need a code editor before.

What I Couldn’t Get on Board With

On the other hand, here’s what I didn’t like that much.

Possibly Confusing for Beginners

The main problem I can imagine for the Template Editor is that it’s difficult for beginners, who don’t know that much about website building, to understand where they are supposed to do what. For example, that you are not supposed to fill the page with content in the Template Editor but only make structural changes to the template itself and then add content in the Page/Post Editor.

Here, too, it’s a bit of a question of how to put this much power into users’ hands without properly teaching them how to apply it.

Final Thoughts: Gutenberg Review

So there you have it, a review of the WordPress block editor and implementations of the Gutenberg project from someone who works with the platform professionally on a daily basis.

Even if I had a bunch of criticism, I am generally a big fan of the new editing experience. Especially the block editor for posts and pages is not something I would want to miss. Sure, there is room for improvement, but it is definitely already on a good level.

In addition, the above list is in no way exhaustive. I focused on the most important points that occurred to me in my work. There is more I could talk about both positively and negatively. However, these are the broad strokes. What’s your opinion?

Do you agree with my Gutenberg review? What’s your opinion of the block editor and how it has been implemented? Please share in the comments below!

The post Gutenberg Block Editor Review (By a WordPress Power User) appeared first on Torque.

While using custom web fonts is a great way to make your site more unique and distinguish your branding, it can also come with certain problems — from privacy to performance. The solution: host your fonts locally on your WordPress website instead.

To help you do so, in this post, we will tell you everything you need to know about this topic. Below, we discuss why it’s a good idea to host fonts locally in WordPress in the first place and then give you a rundown of code and no-code solutions to make it happen in both classic themes and WordPress block themes.

Hosting Web Fonts Locally vs Remotely

So, the first thing we probably have to talk about is what hosting fonts locally even means.

These days, a lot of people use so-called web fonts to change the typography on their websites. Those are font files that typically load from a third-party service, the most popular of which is Google Fonts.

It has a huge library of free fonts that you can use on your website by simply adding a special link to it. Then, when someone requests to see your site, they load remotely so that you can display them to visitors. Google Fonts is also integrated into many themes so that users can switch their font face very easily.

In contrast to that, when you host fonts locally, your font files don’t load from a remote server like Google’s but instead reside on your own server and visitors receive them from there. In the end, both achieve the same thing just in different ways.

Why Should You Locally Host Fonts in WordPress?

There are many good reasons to put font files on your own server instead of using a third-party solution:

• Privacy concerns — Especially if you are subject to European privacy laws, using web fonts particularly from Google can be problematic. The company collects visitor IP addresses and other information, which you need to mention in your privacy policy if you want to use them. Otherwise, you risk being fined. To avoid issues like this, many people simply opt to host fonts locally instead.
• Fond availability — The problem with using third-party hosted fonts is that you make yourself dependent on the service that provides them. If they go out of business, have a server breakdown, or if their URL changes for some reason, all of a sudden your site is without the typeface you chose. While that’s not likely in the case of Google, you never know, and crazier things have happened.
• Wider selection — While established libraries offer a wide range of different fonts, there is a lot more available that’s not in web font form. Consequently, knowing how to host fonts locally gives you many more possibilities to purchase and use premium fonts.
• Performance — When hosting your own fonts, you have full control over how they load. You can configure their caching and fix any issues on your own server. In addition, hosting your own fonts results in fewer HTTP requests as you don’t need to pull in data from another connection. All of the above is good for site performance.

Disadvantages and Caveats

At the same time, there are also some factors that speak against hosting fonts on your local server:

• Performance, again — Google Fonts especially are set up in way that offers high performance. They have a CDN to serve font files from the nearest server. In addition, many of the most popular fonts are already in most browsers’ caches. As a consequence, they load faster than your premium custom font. It’s the same reason why you shouldn’t host your own videos. For all the reasons above, it’s a good idea to use your own CDN if you are going to use local fonts.
• Higher complexity — Setting up your font files locally is more difficult than, say, going with the Google Fonts installed in your theme. However, as you will see below, unless you are going the completely manual route, it’s not that much harder. In fact, there are some one-click plugin solutions.

A Quick Word About File Formats

One thing you should know is that fonts are available in different formats, the most common of which are:

• TrueType Fonts (.ttf) — This is a font standard developed in the 1980s by Apple and Microsoft. It’s the most common format for operating systems and also usable on the web. While not the recommended file format, it’s a good fallback for older versions of Safari, iOS, and Android.
• OpenType Fonts (.otf) — Built on TrueType and developed and trademarked by Microsoft, the .otf format is for scalable computer fonts.
• Embedded OpenType Fonts (.eot) — This is a legacy format of OpenType for rendering on the web. It is required by older versions of Internet Explorer.
• Web Open Font Format (.woff) — WOFF was explicitly developed for use in web pages. It’s the OpenType/TrueType format with compression and extra metadata. This format is recommended for use by the W3C and supported by all major browsers.
• Web Open Font Format 2.0 (.woff2) — An improved version of .woff with better compression for faster download. Developed by Google and compatible with very modern browsers.
• SVG Fonts (.svg) — It’s also possible to use SVG shapes for fonts but this method is currently only supported by Safari.

So, which format should you choose? Of course, performance wise WOFF/WOFF2 makes the most sense. However, in order to be compatible with older browsers, including other formats is also useful. Plus, some providers, such as Google Fonts, only provide .ttf or similar formats for download. Luckily, there are ways around that, which we will show you momentarily.

However, keep the above in mind when procuring custom fonts for your website from a provider.

Hosting Fonts Locally in WordPress (Manually, Classic Themes)

At this point, we are finally going to talk about how to practically host fonts locally on your WordPress site. We have a bunch of different scenarios to cover and we are starting off with classic themes and the manual method.

This is the most technical approach, so you’ll learn the hardest method first before we go over easier solutions. Doing the whole thing by hand will help you understand the mechanics behind it and also improves your WordPress skills in the process.

1. Get Your Font Files

The first thing you need to host fonts locally is font files. Google Fonts allows you to download them but, as mentioned above, doesn’t yet provide the latest file formats. While you can theoretically turn their files into your desired format yourself, it’s much easier to use the Google Webfonts Helper instead.

Not only have they done the conversion work for you, the site also provides you with the necessary code for embedding your fonts.

The first thing you need to do here is choose a font of your liking. For that, you can either use the list on the left or the search field above it. When you have found your desired typeface (for this example we going with Advent Pro), it’s time to choose your character set and styles on the right.

First, check if you need Cyrillic, Greek, or Latin Extended characters. Below that, check the boxes for all the font styles you need. Be sure to pick only those you will actually use on your website so you don’t make visitors load stuff that they won’t even see.

Under Copy CSS, you can choose which file formats you will download.

Best Support setting includes .eot, .ttf, .svg, .woff, and .woff2 files while Modern Browsers only include the latter two. It’s usually a good idea to leave it at the default setting.

Once you are happy with your choices, scroll all the way down and click the big blue button to download your files.

2. Upload the Font Files to Your WordPress Site

Once you have the font files on your hard drive, the first step is to unzip them. After that, you need to get them up to your server.

For that, connect to it via an FTP client and navigate to your theme directory (inside wp-content > themes). Here, it makes sense to place the files inside their own directory, e.g. fonts. Therefore, first create the directory, then drag-and-drop your font files into your FTP client to upload them.

The files are small so this shouldn’t take very long and you can move on to the next step.

3. Load the Local Fonts in Your WordPress Theme

Next up, if you want to use the local fonts on your website, you need to load them first. For that, Google Webfonts Helper kindly already provides the necessary markup. You have probably seen it earlier.

At the bottom, you can customize the folder name, in case the one you have placed your files into is not called fonts. You should already have made your choices about whether you are using the code for highest compatibility or only for modern browsers earlier. Therefore, now it’s time to simply click into the field with the markup to mark it all, then copy it with Ctrl/Cmd+C.

After that, go to your theme’s folder on your server and open the style sheet (style.css). Here, paste the markup you copied earlier at its beginning.

Quick note: In order to use relative paths with @font-face, meaning if you want WordPress to access your local font files inside the fonts directory in your theme folder, you need to delete ../ in front of the URLs above. So, in my case, each line would look like this:

url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

This is assuming that your style.css file resides directly in your theme folder.

After you have made any necessary changes, save and re-upload the file and you are ready to use your local fonts on your WordPress site.

4. Eliminate Fonts Already Loading on Your Site

This step only applies if your theme already pulls in third-party fonts. You want to eliminate that for the aforementioned reasons as well as in order to not load the same font twice and also see if your local fonts have taken effect.

How to switch off third-party fonts depends on how they load in the first place. Some themes have dedicated options where you can switch to a system font or similar.

If, for some reason, they are hardcoded into your header.php file, you need to remove it from there (use a child theme for that). If they load via functions.php, you can remove the call from there. Do this in a child theme as well.

Finally, there is the Disable and Remove Google Fonts that you can try out. Autoptimize also has an option for removing Google Fonts, you can find it under the Extra tab.

4. Use Your Local Fonts

The last step is to actually assign your local fonts to elements on your site. For example, in the Twenty Twenty-One theme, you can use the following markup:

.entry-title {
	font-family: Advent Pro;
}

This results in your blog post titles appearing in the new Advent Pro font:

Hosting Local Fonts in Classic Themes: Plugin Edition

If the above is too complicated for you and your already have Google Fonts on your website (e.g. through a theme) you can also use a WordPress plugin solution to locally host your fonts. One of the best options for that is the OMGF or Optimize Google Fonts plugin that’s available for free in the WordPress directory. Install it in the usual way via Plugins > Add New.

Once you have done so, you find a new menu item under Settings, called Optimize Google Fonts. Click it to get to this menu:

Usage is pretty simple. In most cases, all you have to do is click Save & Optimize at the bottom. The plugin will then automatically find all Google Fonts style sheets on your site and replace them with local versions. You can see all of them at the bottom of the screen.

Here, you also have the option to configure the plugin not to load some of the fonts or font styles or pre-load them, which is important for typography that appears above the fold. There are some more settings but they are mostly for cases when something is not working.

OMGF also has paid a addon for installing more Google Fonts on your site. It’s very fairly priced and worth checking out. Other plugin options include Perfmatters and the Pro version of the aforementioned Disable and Remove Google Fonts plugin.

Manually Hosting Fonts in WordPress Block Themes

WordPress block themes also allow you to use local fonts. In fact, at the time of this writing, that’s all they do, you currently can not host third-party fonts in a block theme (though an API for that is in the making).

For that reason, the first few steps, acquiring font files and uploading them to your server, is the same as for classic themes. From there, the differences begin.

Loading Fonts Inside theme.json

In block themes, theme.json is the central file for styling and it is there that you set up the fonts. To do so, look for fontFamilies under settings and typography.

In block themes, new fonts are added using the following values:

• fontFamily — The name of the new font as it will be used in CSS. That means it can include fallback fonts.
• name — Name of the font that will appear in the WordPress back end.
• slug — A unique identifier that WordPress uses in the CSS custom property.
• fontFace — This corresponds to the CSS @font-face rule and is what really enqueues the font.

In order to work, fontFace includes several other pieces of information:

• fontFamily — The name of the font (again).
• fontWeight — A list of available font weights separated by spaces.
• fontStyle (optional) — You can set the font-style attribute here, e.g. normal or italic.
• fontStretch (optional) — For example, for font families that have a condensed version.
• src — Path to the local font file.

You can include several font files in fontFace, e.g. to load different styles. Separate them with curly brackets and a comma to do so. Here’s what this looks like for the same font example as above:

"fontFamilies": [
	{
		"fontFamily": "Advent Pro",
		"slug": "advent-pro",
		"fontFace": [
			{
				"fontFamily": "Advent Pro",
				"fontStyle": "normal",
				"fontWeight": "400",
				"src": [
					"file:./fonts/advent-pro-v19-latin-regular.woff"
				]
			},
			{
				"fontFamily": "Advent Pro",
				"fontStyle": "italic",
				"fontWeight": "400",
				"src": [
					"file:./fonts/advent-pro-v19-latin-italic.woff"
				]
			}
		]
	}
]

With the Gutenberg plugin active, you can also use wp_register_webfonts() inside functions.php instead, which is a new PHP function for this purpose that is not yet in Core. It takes the same arguments as above but in PHP format.

Local Fonts in Block Themes: Plugin Solution

Finally, it is also possible to locally host fonts in WordPress block themes with the help of plugins. One of them is the Create Block Theme plugin. After you install and activate it, it adds a new Manage theme fonts option to the Appearance menu.

Here, you can preview the font families included in your current theme as well as remove entire font families or single styles.

What’s even more interesting are the buttons saying Add Google Font and Add Local Font at the top. Let’s start with the Google Font option.

Using it is really easy. Click on its button and select your desired font from the drop-down list at the top. After that, tick the boxes for the font weights and styles that you want to add to your theme. Finally, click Add google fonts to your theme at the bottom.

The plugin will then automatically download and embed your chosen fonts so that they are available in the block and Site Editor.

The local font option works very similarly.

The difference here is that you upload a font file from your hard drive and have to provide the font’s name, style, and weight so that the theme knows what’s what (the plugin also automatically tries to recognize this information). That also means you need to upload your font files one by one. However, overall it’s super simple.

Are You Ready to Host Fonts Locally in WordPress?

Custom fonts are a popular way to spruce up your website. However, the ability to locally host them in WordPress is something that’s becoming more and more important because of performance, legal, and other reasons.

Above, we have gone over several ways to do so. You can either achieve it manually or using a plugin. There are also differences when using a block or classic theme though overall the principles are very similar. We hope you now feel up to the task.

How did you choose to locally host your fonts in WordPress? Let us know in the comments section!

The post How to Host Fonts Locally in WordPress (Classic & Block Themes!) appeared first on Torque.

Blog comments are an important way of interacting with readers, collecting feedback, and getting ideas for new topics. However, your comment section can also be overrun by spam and turn into a toxic cesspool of people fighting (you know, like Twitter). In order to avoid that, it makes a lot of sense to set up a blog comments policy.

Creating some rules around comments left on your blog is a great way to set some boundaries and expectations toward your audience. It helps raise the quality of comments you receive and, as such, the quality of your site as a whole.

To help you facilitate that, in this post, we will go over how to create, announce, and enforce an effective blog comments policy. We talk about why you should have one, what rules to include, and how to let readers know about it.

Why Set Up a Policy for Your Blog Comments?

We already alluded to why a blog comments policy is a good idea in the introduction. It sets up a set of expectations as to how people in your comments section should behave – if they want to see their comment on your website. Besides that, it can help with other things, too.

Build a Civilized Community

Building a blog also means building a community. Ideally, there are people who come back to your blog over and over again and regularly comment on your posts. With a blog comments policy, you get to decide what kind of community first timers will find.

Will it be open, prone to interesting discussions, and polite disagreements? Or a bunch of doo doo heads yelling at each other (you know, like Twitter)?

Comment guidelines allow you to weed out behaviors that you don’t want to see in your comments section. It can include things like rude and offensive behavior or spammy comments.

While just setting up a comment policy won’t eliminate all the spam on your blog (if only, unfortunately, most of it is automated), it might discourage some of it and inspire people to leave better comments. It might also deter some users from commenting, however, they are often the ones that the policy is aimed at in the first place.

Set a Precedent

In addition, having a comments policy in place gives you instant justification to delete comments that don’t adhere to it. Nobody can complain that their comment didn’t show up if they didn’t bother to follow the rules.

A blog comments policy is sort of like a “no shoes, no shirt, no service” sign that they have in restaurants sometimes (at least in movies).

You can metaphorically tap it whenever someone complains that their contribution didn’t show up.

This especially applies to news websites. The tone online has become rougher with some people feeling that the anonymity of the Internet allows them to spew every offensive and racist nonsense or conspiracy theory out there without consequence.

A comment policy in place gives you official justification to delete all that drivel.

Note: A Comment Policy Is Not for Censoring

As we have settled so far, a comment policy should be a legitimate guideline to encourage good behavior and fruitful discussions. At the same time, what it should not be is a justification to delete every comment that you don’t agree with or that doesn’t agree with you.

Criticism can be great source of feedback to further improve your writing or clarify your content. It can also be a good start for interesting conversations and exchange of ideas, if it’s constructive. After all, the comment section exists to connect with readers, even those that don’t think the same way as you.

Sure, if you are being brigaded or trolled just for the hell of it (some people just want to watch the world burn) that’s not constructive criticism and you have every right to delete it. Just be aware that the policy should not used to silence dissenting voices but to make sure that the conversations that happen are above board.

What Should Be Part of Your Policy and Rule Set?

Next, let’s talk about what guidelines should be part of your comments policy. Here are things that people commonly include for reader contributions.

Welcome and Encourage

Ideally, your policy shouldn’t just be a list of commandments of everything that is forbidden (“thou shall not spam!”). As all other content, it’s part of your branding, meaning part of how you present yourself and what you stand for. Therefore, you can use it to further show readers who you are and what they can expect from you.

To achieve this, start off by welcoming readers to your blog and encouraging them to take part in the conversation. In addition, set expectations. Again, not just about what’s forbidden, you can also set positive intentions. Say what you expect comments on your site to be like and what kind of discussion you wish to see.

Content Quality Guidelines

Secondly, it’s a good idea to put rules in place to make sure that comments adhere to certain quality standards:

• Anonymity — A good way of combating a lot of anonymous contributions is to make the use of an email address mandatory in order to leave a comment. You can do that in WordPress under Settings > Discussion. The menu also has other settings that are useful, such as automatically holding comments in moderation until manually approved.
• Relevance — Ask commenters to stay on topic and add input that carries the conversation forward, not simply regurgitates what the article already says. Also ask that members of your audience don’t write anything that is completely off topic, like a personal rant.
• No spam — You should already have spam plugin in place to catch genuine junk comments. However, some people still try to use spammy tactics in blog comments that make sense to ban. Examples include the use of a business name or URL as their name, trying to link from inside their comment, or purely promotional content.
• Copyright, privacy — If it turns out that something someone posts in the comment section is copyright protected, it will go. Same for private information like phone numbers or email addresses. A comment section is not for a classified ads.

Absolute No-Gos

In addition, your comment policy should include whatever is a hard no for you. The type of comments that will never see the light of day on your site and that gets people permanently banned from the comment section.

• Hate speech — Sexism, racism, or any of the other -isms aimed at discriminating against individual groups of people should never be tolerated. Same for homophobia, transphobia, or general threats and harrassement against anyone.
• Offensive language — Want to ban curse words like the f-bomb in your comment section? Include it in your policy. Same for abusive, threatening, pornographic, misleading, or libelous statements.

Consequences

Finally, once you have established your rules, it’s also important to point out what happens when someone violates them.

• Editorial rights — Make clear that you reserve the right to modify comments in order to make sure they adhere to the your policy or simply delete them if they don’t.
• Outcomes — Spell out what happens to comments that fail to adhere to the policy, such as that you delete, block, or report them.
• Frequently asked questions — It often helps to proactively include answers to questions that come up a lot. For example, why a comment might not be published, how to contact a moderator, etc.

In short, the comment section should be a place where everyone feels welcome and don’t have to fear being harrassed for no reason. Use your blog comments policy to enourage people to be decent to one another and keep out those that refuse to do so.

How to Display the Blog Comments Policy on Your Website

With the above out of the way, the question that remains is where and how to make your comments policy visible on your WordPress site. For that, you have several options.

Publish a Dedicated Page

One of the easiest ways is to create a separate page for your blog comments policy.

This is especially a good option if it has gotten too long to appear directly in the comments section. Just like your privacy policy, you can give it its own page where your audience can read it in its entirety.

The important thing here is that, just like for other policies, you make it findable. A link in the footer is a good solution for that.

Of course, you can also do a hybrid model and add a short version to the comments section that links to the full edition on a separate page.

Include It in the Comments Section via the Site Editor

If you want to link to your policy in your comments section or if it is short enough to post it there, that’s pretty easy to do if you are using a block theme like Twenty Twenty-Two. In that case, first access the Site Editor under Appearance > Editor.

Here, you need to click the logo in the upper left corner to access Templates.

Look for the Single page template.

That’s the one that controls the look of your blog posts. In it, you will find the Comments block that controls the markup of your comments section.

Adding a comments policy is as easy as including a paragraph block wherever you want the policy to appear (using list view makes this especially easy). Then simply paste it there (including any links).

Note that you might have to switch the Comments block into editable mode to make any changes. Once you save the template, the policy should start showing up on your blog as well.

Add the Policy via Code

If you are using a classic theme, you can still incorporate a policy in your blog comments section by using markup. You have three basic options for that:

• Edit the template file — WordPress comes with a template file called comments.php. You can edit it and include your blog comments policy there directly to have it show up on the page.
• Add it via hook — WordPress has a number of action hooks you can use to show your policy in your comments section such as comment_form_before. More on hooks in this article.
• Use a widget area — If you want to be able to change your comment policy from the WordPress back end, adding it via a widget area might be the best idea. In that case, you first need to edit comments.php and create a new widgetized area where you need it. After that, you can add a text widget and edit it to your liking.

For all of the above, it’s best if you have a code editor that you like and that you implement the changes in a WordPress child theme. That way, they won’t vanish at a theme update.

Use a Plugin

As far as I can tell, there is no plugin dedicated to adding a comments policy to your blog section. However, some plugins that enhance or take over your comments have settings that allow you to easily display it. Disqus is one of them.

Thus, if you use a WordPress comments plugin, make sure to check for possibilities like this.

Examples of Blog Comments Policies

In the final part, let’s have a look at some of the commenting guidelines of websites out in the wild. You can use the examples as comment policy templates to come up with your own.

WordPress.com

WordPress.com has their blog comments policy on a dedicated page. Here’s what they ban from the comments section:

• One-word comments
• Self-promotion
• Support questions
• Multiple comments by the same author
• Really long comments
• Personal comments about WordPress.com staff
• Non-English comments
• Comments that have too many grammatical and spelling errors to be understandable

The only thing I couldn’t find was how to access the policy without searching in Google or on the site. A link somewhere on the blog would be useful.

Copyblogger

The Copyblogger blog also have their own dedicated page for the comment policy and link to it from the site footer. Here’s the gist of what it says:

• Comments are only open for two weeks after a post’s publication date
• Use your real name and email address
• Read the article before commenting in order to be able to add relevant insights and constructive criticism
• Comments may be deleted if they are spammy, self-promotional, irrelevant, threatening, defamatory, racist, obscene, or violate someone’s copyright

Tim Ferriss

Author Tim Ferris has his blog’s comment rules directly below the comment form.

It’s short and sweet and basically says no rudeness, no personal URLs in comments, and use your real name or initials. That’s pretty much it.

What Will Be Part of Your Comment Policy?

A blog comments policy is an important part of Internet real estate. It’s a great way to put some guard rails up for the discussions below your articles so that they doesn’t veer off track. It also helps to remind people to behave well while interacting with one another.

Above, we have gone over reasons why you should consider putting comment guidelines for your blog in place, what to include, and how to publish them on your WordPress site.

The last thing to keep in mind is that the blog comments policy can (and often should) evolve over time. The rules are not set in stone and you are able to adapt them as needed. If you find that you have forgotten something the first time around or realize that something is not clear enough, feel free to make changes as required.

Do you have an explicitly written blog comments policy? If so, what did you include in it? And how are you making it available to your visitors? Please feel free to share in the comments section below!

The post How to Create a Blog Comments Policy (And Display It on Site) appeared first on Torque.