Plugin requirements and setup rules

WAH PRO and FREE versions requirements

1. Like most WordPress plugins – jQuery must be installed on your website theme: more info about adding scripts to your theme can be found here
2. Your body tag must contain a valid WordPress body_class() functions according to WordPress Codex documentation
3. PHP version minimum 5.3 version, our recommendation is 7+ version
4. If you “have to” implement code-based changes, PLEASE, do that with actions and filters provided by the plugin. All hooks can be found on our Documentation page, otherwise, after the plugin update, you will lose all your changes…
5. Additional step you can take, is install the “Theme Check” plugin, and check if your theme coded well, without any errors and warnings.

Important notice

Your website should be coded the right way, semantic way. Otherwise, some plugin functions will not work properly.

What is Semantic HTML

An important principle of the Web Standards movement that is responsible for the industry we have today is the idea of using HTML elements for what they are rather than how they may appear in the browser by default. This is known as using Semantic HTML.

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are and browsers know how to display them.

On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.

Examples of semantic HTML tags include the header tags <h1> through <h6>, <blockquote>, <code> and <em>. There are many more semantic HTML tags that can be used as you build a standards-compliant website.

Why You Should Care About Semantics

The benefit of writing semantic HTML stems from what should be the driving goal of any web page— the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page. Text that is enclosed in the <code> tag is immediately recognized by the browser as some type of coding language. Instead of trying to render that code, the browser understands that you are using that text as an example of the code for an article or online tutorial of some kind.

Using semantic tags gives you many more hooks for styling your content. Perhaps today you prefer to have your code samples display in the default browser style, but tomorrow, you want to call them out with a gray background color, and later you want to define the precise mono-spaced font family or font stack to use for your samples. You can easily do all of these things by using semantic markup and smartly applied CSS.

Use Semantic Tags Correctly

When you want to use semantic tags to convey meaning rather than for presentation purposes, you need to be careful that you don’t use them incorrectly simply for their common display properties. Some of the most commonly misused semantic tags include:

• blockquote – Some people use the <blockquote> tag for indenting text that is not a quotation. This is because blockquotes are indented by default. If you simply want to benefit from indentation, but the text is not a blockquote, use CSS margins instead.
• p – Some web editors use <p> </p> (a non-breaking space contained in a paragraph) to add extra space between page elements, rather than defining actual paragraphs for the text of that page. As with the previously mentioned indenting example, you should use the margin or padding style property to add space.
• ul – Like blockquote, enclosing text inside a <ul> tag indents that text in most browsers. This is both semantically incorrect and invalid HTML, as only <li> tags are valid within a <ul> tag. Again, use the margin or padding style to indent text.
• h1–h6 – The heading tags can be used to make fonts bigger and bolder, but if the text is not a heading, it should not be inside a heading tag. Use the font-weight and font-size CSS properties instead if you want to change the size or weight of specific text on your page.

By using HTML tags that have meaning, you create pages that impart more information than by just surrounding everything with <div> tags. 

Which HTML Tags Are Semantic?

While nearly every HTML4 tag and all the HTML5 tags have a semantic meaning, some tags are primarily semantic in nature.

For example, HTML5 has redefined the meaning of the <b> and <i> tags to be semantic. The <b> tag doesn’t convey extra importance, but rather a text that is typically rendered in bold. The <i> tag also doesn’t convey extra importance or emphasis, but rather defines the text that is typically rendered in italics.

Semantic HTML Tags

<abbr>	Abbreviation
<acronym>	Acronym
<blockquote>	Long quotation
<dfn>	Definition
<address>	Address for author(s) of the document
<cite>	Citation
<code>	Code reference
<tt>	Teletype text
<div>	Logical division
<span>	Generic inline style container
<del>	Deleted text
<ins>	Inserted text
<em>	Emphasis
<strong>	Strong emphasis
<h1>	First-level headline
<h2>	Second-level headline
<h3>	Third-level headline
<h4>	Fourth-level headline
<h5>	Fifth-level headline
<h6>	Sixth-level headline
<hr>	Thematic break
<kbd>	Text to be entered by the user
<pre>	Pre-formatted text
<q>	Short inline quotation
<samp>	Sample output
<sub>	Subscript
<sup>	Superscript
<var>	Variable or user-defined text