Testing WordPress Basic Default Styles

Welcome to this test article designed to explore all the basic default styles in WordPress. This article will demonstrate headings, paragraphs, lists, images, links, tables, and other elements commonly used in content to ensure your WordPress theme handles them properly. Let’s start by examining each type of content below.

Headings

Headings are a key part of structuring your content. Here’s how different heading levels are displayed:

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading
This is an H6 Heading

Headings are crucial for SEO and readability. Make sure each heading is styled correctly and visually distinct from the others.

Paragraphs

This is a standard paragraph. A paragraph is a block of text that starts on a new line and is separated from other blocks of text by a margin. Paragraphs help to break up content, making it easier to read and understand.

Here’s a second paragraph. Notice how it follows the same formatting as the previous paragraph, keeping the content flow smooth and consistent. Properly formatted paragraphs are essential for a good reading experience.

Links

Here’s an example of a standard text link that directs users to another page. It’s important to ensure that links are styled clearly so users can easily identify clickable elements.

Bold and Italics

This is a bold text. Bold text is often used for emphasis or to highlight important information.

This is an italicized text. Italics are typically used for emphasis, citations, or titles of works such as books or movies.

Blockquotes

This is a blockquote. Blockquotes are used to highlight quotes from a different source or author. It’s important that blockquotes stand out from regular text to visually indicate that the content is a quotation.

Lists

Unordered List

  • This is the first item in an unordered list.
  • This is the second item.
  • This is the third item.

Ordered List

  1. This is the first item in an ordered list.
  2. This is the second item.
  3. This is the third item.

Images

Images add visual interest and context to articles. Below is an example of an image with caption:

Placeholder Image
This is a caption for the above image.

Make sure that images are responsive and adjust correctly to different screen sizes. Also, check if the theme provides proper margins and padding around images.

Some Lorem ipsum text and a left aligned image

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec pretium urna, in hendrerit eros. Morbi consequat risus quam, non aliquet est auctor in. Vivamus quis nibh vel erat pharetra faucibus. In sed dignissim mauris, ac ullamcorper odio. Cras condimentum leo eu lobortis dictum. Donec sagittis, lectus sit amet dignissim venenatis, erat eros semper dui, sit amet efficitur elit quam id augue. Phasellus eu laoreet lacus. Nam sagittis ex quis vestibulum vulputate. Vestibulum vulputate, urna eu efficitur auctor, libero nisl molestie justo, vitae congue sapien sapien non nisi. Curabitur sodales felis nec massa iaculis, et dapibus sapien molestie. Phasellus ut dolor bibendum, maximus elit vulputate, faucibus orci. Nulla quis risus lacinia, commodo metus volutpat, ullamcorper risus. Donec vestibulum scelerisque lacus, quis maximus felis sodales porta. In volutpat ac arcu eu finibus. In et dolor vehicula dolor finibus pulvinar dignissim sed dui.

Some Lorem ipsum text and a center aligned image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec pretium urna, in hendrerit eros. Morbi consequat risus quam, non aliquet est auctor in. Vivamus quis nibh vel erat pharetra faucibus. In sed dignissim mauris, ac ullamcorper odio. Cras condimentum leo eu lobortis dictum. Donec sagittis, lectus sit amet dignissim venenatis, erat eros semper dui, sit amet efficitur elit quam id augue. Phasellus eu laoreet lacus. Nam sagittis ex quis vestibulum vulputate.

Placeholder Image

Vestibulum vulputate, urna eu efficitur auctor, libero nisl molestie justo, vitae congue sapien sapien non nisi. Curabitur sodales felis nec massa iaculis, et dapibus sapien molestie. Phasellus ut dolor bibendum, maximus elit vulputate, faucibus orci. Nulla quis risus lacinia, commodo metus volutpat, ullamcorper risus. Donec vestibulum scelerisque lacus, quis maximus felis sodales porta. In volutpat ac arcu eu finibus. In et dolor vehicula dolor finibus pulvinar dignissim sed dui.

Some Lorem ipsum text and a right aligned image

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec pretium urna, in hendrerit eros. Morbi consequat risus quam, non aliquet est auctor in. Vivamus quis nibh vel erat pharetra faucibus. In sed dignissim mauris, ac ullamcorper odio. Cras condimentum leo eu lobortis dictum. Donec sagittis, lectus sit amet dignissim venenatis, erat eros semper dui, sit amet efficitur elit quam id augue. Phasellus eu laoreet lacus. Nam sagittis ex quis vestibulum vulputate. Vestibulum vulputate, urna eu efficitur auctor, libero nisl molestie justo, vitae congue sapien sapien non nisi. Curabitur sodales felis nec massa iaculis, et dapibus sapien molestie. Phasellus ut dolor bibendum, maximus elit vulputate, faucibus orci. Nulla quis risus lacinia, commodo metus volutpat, ullamcorper risus. Donec vestibulum scelerisque lacus, quis maximus felis sodales porta. In volutpat ac arcu eu finibus. In et dolor vehicula dolor finibus pulvinar dignissim sed dui.

Tables

Tables are useful for displaying data in a structured format. Here’s an example:

Header 1Header 2Header 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
Row 3, Cell 1Row 3, Cell 2Row 3, Cell 3

Make sure that tables are styled neatly and are easy to read on all devices, especially mobile screens where space can be limited.

Code Blocks

Code blocks are used to display programming or markup code. Here’s an example of a code block:


//Add the language data to WP Block:
<pre class="wp-block-code" data-language="JS">
// This is a code block.
function testFunction() {
    console.log("Hello, world!");
}

Check to see if the code block is properly formatted and distinguishable from regular text.

This is an example of inline code within a paragraph.

// Theme setup function
add_action( 'after_setup_theme', 'beeverse_parent_theme_setup' );
function beeverse_parent_theme_setup() {
    // Add support for WordPress features
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    add_theme_support( 'woocommerce' );

    // Register navigation menus
    register_nav_menus( array(
        'main-menu' => __( 'Main Menu', 'beeverse-parent' )
    ) );

    // Load translation files from the global or local language folder
    beeverse_load_textdomain_for_mu();
}

Horizontal Rule

Horizontal rules are used to separate content visually:

Forms

Forms allow users to input data and submit it. Below is a basic example of a form: Name:

Email:

Message:

Ensure that form fields are properly styled and easy to use, especially on mobile devices.

Embedded Content

Embedded content like YouTube videos or tweets adds multimedia elements to your posts. Here’s an example of a YouTube embed: https://www.youtube.com/embed/dQw4w9WgXcQ

Make sure that embedded content displays correctly and adjusts responsively to various screen sizes.

Conclusion

This article covers the basic default styles in WordPress, including headings, lists, images, tables, code blocks, and embedded content. By using this as a test, you can ensure that your theme or website design handles all types of content correctly and provides an optimal user experience. If you’re looking for professional help in building or styling your WordPress site, contact Alox & Co for expert support.