This release focuses on:

• Better design flexibility
• Improved performance
• Easier configuration
• Powerful new features

Whether you’re a new user or a long-time user, version 3.0 makes building beautiful and effective Table of Contents easier than ever.

A Brand-New Settings Experience

Version 3.0 introduces a complete redesign of the settings interface. Everything is now faster, cleaner, and easier to use.

What’s New

• Fully redesigned settings page
• Search bar to quickly locate settings
• Live Preview panel
• Quick Settings panel
• Improved color picker
• Import presets
• Active session checker

The new interface helps you configure your Table of Contents in seconds instead of minutes.

Live Preview: See Changes Instantly

No more guesswork. The new Live Preview panel lets you instantly see how your Table of Contents looks while adjusting settings. The preview is 100% accurate as it leverages an iframe as if it was a visitor viewing the TOC.

This makes styling:

• Faster
• More intuitive
• More precise

Perfect for quickly finding the right design.

New Onboarding Wizard

Getting started is now easier than ever with the new Onboarding Wizard.

New users can:

• Choose a theme
• Preview the TOC in real time as they move through the steps
• Configure key settings
• Get a polished Table of Contents instantly

Perfect for beginners and a great time-saver for everyone.

New Color Palette System

Adjusting your Table of Contents colors to match your brand’s has never been easier. Previous versions required setting a separate color for every element: hover states, numbering, borders, badges, one by one. v3 changes that completely.

The new Color Palette system uses a small set of semantic colors that cascade intelligently across your entire TOC. Set your website’s Accent color once, and every theme-specific detail adapts automatically. And every color you define in the palette becomes a reusable swatch, available across all settings to override any specific element if needed.

Benefits

• Consistent branding
• Faster customization
• Easier theme switching

Update colors once — apply everywhere.

New and Upgraded Themes

Version 3.0 introduces new v3 themes and major upgrades to existing ones.

Updated Core Themes

• Default (v3) — This is an updated version of the “basic light/dark” theme
• Original (v3)
• Hero (v3)

These themes now include:

• Dark mode support
• Compatible with the Color Palette
• Better spacing
• Theme-specific options

New PRO Themes

PRO users also get brand new premium themes:

• Modern (v3)
• Mantis
• Flowline
• Vertik (v3)
• Glass
• Aurora
• Sequoia

These themes bring new visual styles ranging from minimal to bold.

Timeline TOC Mode (PRO)

Introducing Timeline Mode — a brand-new way to display your Table of Contents.

Features

• Proportionally spaced markers
• Perfect for long-form content
• Clean vertical reading experience
• Overlapping Progress bar available

This is one of the most unique and visually distinctive TOC modes available.

More Styling Power

Version 3.0 adds many new styling options:

Numbering Badge Styles

Make your TOC adopt a modern, refreshing look that pairs nicely with modern themes.

• Toggle button styles
• Numbering colors and backgrounds
• Header advanced customization (PRO)
• Top-level heading styling (PRO)
• Separator between top-level headings (PRO)

These options allow deeper customization without writing CSS.

Floating TOC Improvements (PRO)

Floating TOC now includes powerful new controls. Until v2, the floating widget would only show the active heading.

Since v3, the floating widget can either show:

• The active heading (the original floating mode)
• The TOC title
• A single icon
• A custom text

Floating Improvements

• Adjustable width
• Visibility trigger options
• Relative positioning

Slide-Out TOC Improvements (PRO)

The Blend into panel option allows the Table of Contents inside the slide-out panel to visually merge with the panel itself. Instead of appearing as a separate boxed element, the TOC adopts a more seamless, integrated look. This is achieve by removing extra backgrounds, borders, or spacing that would otherwise create a “box-within-a-box” effect.

This creates a cleaner and more modern appearance, especially when using slide-out panels, where the Table of Contents feels like a natural part of the panel rather than an embedded component. Perfect for minimalist designs and distraction-free reading experiences.

Slide-Out Improvements

• Blend into panel option
• New toggle icons
• Dynamic toggle shadow
• Toggle button advanced customization

Reading Time Estimate

You can now display reading time estimates directly in your Table of Contents.

This helps:

• Improve engagement
• Set reader expectations
• Enhance UX for long content

Additional New Features

Version 3.0 also introduces:

• TOC alignment (left, center, right)
• Regional numbering support
• Base font size option
• Extended headings scope
• Title attribute disable option

New TOC Icons

• Newspaper
• Spotlight
• List collapse
• List ordered
• Asterisk
• Atom
• Sparkles

Performance & Technical Improvements

Version 3.0 also includes major improvements under the hood:

• Improved TOC processing engine
• Improved smooth scrolling
• Better jump link behavior
• Selective CSS loading
• Cleaner inline styles
• Grid-based layout improvements

These changes improve:

• Performance
• Compatibility
• Reliability

Breaking Changes

To keep the plugin modern and maintainable:

• Removed v1 legacy support (previously announced)
• Deprecated hexadecimal and binary numeration types

Bug Fixes

• Fixed auto-insert formatting bug
• Fixed bullet spacing issue
• Minor bug fixes

Available Now

Joli Table of Contents 3.0 is the most powerful version yet.

With:

• Redesigned UI
• New themes
• Timeline mode
• Live preview
• Performance improvements

This release represents a major step forward.

Update today and experience the new Joli Table of Contents.

The post Introducing Joli Table of Contents 3.0: The Biggest Update Yet appeared first on wpjoli.

However, if you care about your website’s loading speeds and SEO (and you should definitely care !) you need to optimize your images.

In the case of featured images, there are 4 main levers we can play with to optimize the final image size:

• Resolution (in pixels)
• Image format (jpg, png, webp)
• Compression ratio
• Image homogeneity

In this article, we are going to compare image size and perceived quality using different image settings across 3 types of images.

You can download all the sample files from this test here.

Test protocol

For our test, we are going to compare 3 different images and see how size, format and quality affects the file size.

These 3 images have beem specifically chosen for their difference in homogeneity. But what makes an image homogeneous ? Basically, the more an image is of the same color, the more homogeneous it is. Using plain color backgrounds instead of gradients will make the image more homogeneous, hence smaller in size.

We are going to consider that an image is too large when it exceeds 100Kb. Our goal is to keep our page fast.

Homogeneous image

This featured image is composed of large amount of uniform colors throughout its surface area (2 shades of gray, and 2 shades of blue). The illustration on the right hand side is composed of just a few solid colors, with no gradient. This kind of graphics should give the best results in term of file size.

Semi-homogeneous image

This featured image is composed of roughly half solid color background, and half of a photo. That background photo will contribute in increasing the size even though it does not seem to have many colors.

Non-homogeneous image

The below featured image is probably the worst kind of image for compression algorithms to process ! It is basically a combinatino of 2 photos with very little solid color area.

This kind of image will likely produce a heavy file size, even using compressed formats.

Image resolution (SD vs HD)

In this test we are comparing the size of the image at different resolutions. The first resolution will be 1200×628, that corresponds to the recommanded featured image size. The second resolution will be called “HD”, and is basically double the width and height (2400×1256). The surface area is then 4 times as big.

Homogeneous image

Semi-homogeneous image

Non-homogeneous image

JPG vs WEBP

If you haven’t come across the WEBP format yet, you are missing out ! WordPress now handles it natively provided that your server is compatible. In the following comparison we will see how much better WEBP can do compared to JPG images.

Homogeneous image

On this type of images, the WEBP format performs 3 to 4 times better than the JPG format. The files are much better, and using HD images for your featured images is not going to be a big deal !

Semi-homogeneous image

With this image, the WEBP format confirms its superiority and if you want to keep your image under 100 Kb in HD format, you can aim for a quality ratio of 80-85 if you want to keep your images crisp.

Non-homogeneous image

When it comes to more details photos, the WEBP format still does better than JPG, but not as much as we have seen above. In average, we get a 2x improvement here which is already pretty good !

However, if you want to have your image in HD, you would have to sacrifice on quality to keep a file size low.

Perceived quality (compression ratio)

Homogeneity comparison

In the below table, we are comparing the 3 types of images next to each other. The point is to see how much better a more uniform image performs compared to a very detailed image.

What to understand from this table is that it is preferable to use image without too many details. It is okay to include some photo in the Featured Image, as long as it doesn’t fill up the entire area.

In average, semi-homogeneous have a size 1.1x to 1.5x higher than homogeneous images. This remains acceptable and if an image contains many details, maybe we could consider reducing the quality on a per image basis.

Conclusion

Looking at these results, it becomes clear that you don’t have to choose between speed and beautiful featured images. By combining the right resolution, the WEBP format and a reasonable compression ratio, you can keep most featured images well under 100 Kb (even in HD) without any noticeable loss of quality.

Our tests also show how important image homogeneity is. The more uniform your design (large flat color areas, simple shapes, limited photo area), the easier it is to compress. Semi-homogeneous images remain perfectly acceptable in terms of size, but very detailed, photo-heavy featured images will always be harder to keep lightweight unless you aggressively reduce quality.

As a quick recap, here are some practical guidelines you can apply on your WordPress site:

• Stick to a recommended featured image resolution such as 1200×628, or an HD version like 2400×1256 if your theme and design really benefit from it.
• Prefer WEBP over JPG whenever your hosting environment supports it, as it consistently halves (or better) the file size.
• For WEBP, aim for a quality setting around 70-85 for most images, and lower it a bit for very detailed photos if you need to stay under 100 Kb.
• Design your featured images with simpler, more homogeneous layouts: solid backgrounds, clear typography, limited photo areas and minimal visual noise.

If you want to apply these best practices consistently and save time, a tool like Smart Auto Featured Image can help. It lets you build reusable templates with clean layouts and automatically generate optimized WEBP featured images at the right size for every new post. That way, your blog keeps looking professional, your branding stays consistent, and your pages load fast for both users and search engines.

The post What image format and compression ratio should you use for your Featured Images ? appeared first on wpjoli.

This new feature is based on SVG icons and aims to improve the overall look of the table of contents.

Why use an icon for your table of contents ?

Your table of contents is an essential navigation tool, but why not make it more visually engaging? With the new TOC Title Icon feature, you can add a custom icon next to your TOC title, making it stand out instantly. This simple yet powerful addition enhances the visual appeal of your TOC, catching your readers’ attention and improving the overall readability of your content.

Beyond aesthetics, using an icon helps create a more cohesive and branded look for your blog. Whether you choose a stylish symbol, a brand-related icon, or a fun visual cue, this feature allows you to personalize your TOC to match your website’s theme and personality.

A well-placed icon can also make your content feel more structured and professional, encouraging visitors to engage with your posts.

Try the TOC Title Icon feature today and give your table of contents a fresh, eye-catching touch!

How to insert and customize an icon ?

From the settings switch on the Use title icon option, under the GENERAL > TABLE OF CONTENTS HEADER section.

Once switched on, the Title icon setting will show up, letting you pick an icon.

To further customize the icon, you can adjust its size, stroke width (to make it look more or less thick), and color.

How to use a custom icon ?

If you prefer to use a custom image or a custom SVG as a Table of contents title icon, you can leverage the new joli_toc_title_icon filter hook.

This way, you could easily insert your brand logo or a custom multi-colored SVG.

The post New feature: TOC Title Icon [Joli Table Of Contents 2.7.0] appeared first on wpjoli.

1. What is Dummy Content?

Dummy content refers to placeholder text, images, and other elements that simulate the final content of a website. This type of content is typically used by web designers, developers, and content creators to test the appearance, usability, and responsiveness of their designs. The most common form of dummy text is “Lorem Ipsum,” a scrambled Latin text that has been the industry standard for a while.

Common Elements of Dummy Content:

To reproduce with accuracy the “behavior” of an average blog post, the following elements are going to be used when generating dummy content.

• Text: Lorem Ipsum or any other placeholder text to represent articles, headings, or product descriptions.
• Links: Blog posts almost always contain one or multiple links.
• Images: Random stock images or placeholder images to test media integration.
• Lists : Dummy lists and tables to ensure proper styling and layout.

2. Why Use Dummy Content in WordPress?

Using dummy content during the development phase offers several benefits:

• Visualize Layouts: It helps you understand how text, images, and other elements will look in your design, making it easier to fine-tune the aesthetics of your site.
• Test Responsiveness: Placeholder content allows you to test your site’s responsiveness across various screen sizes and devices.
• Optimize User Experience: By simulating real-world content, you can identify layout issues, broken elements, or inconsistencies in the user interface.

3. How to Generate Dummy Content for WordPress

Generating dummy content manually can be a tedious and time-consuming process. Luckily, there are tools designed to streamline this task, and one of the best options available is LoremIpsumWP.

If you need to generate a lot of content at once, you can consider installing a WordPress plugin like WP Dummy Content Generator dedicated to that, but this will require a little bit more tweaking.

4. Introducing LoremIpsumWP

LoremIpsumWP.com is an online service that is dedicated to generating dummy content tailored specifically for WordPress’s Gutenberg block editor.

Unlike traditional Lorem Ipsum generators, LoremIpsumWP provides content that integrates seamlessly with Gutenberg, allowing you to test your blocks, layouts, and themes with minimal effort.

The dummy content generated includes Gutenberg specific HTML comments markup like in the example shown below:

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Vehicula semper convallis eget posuere sociosqu vestibulum</h2>
<!-- /wp:heading  -->

<!-- wp:paragraph -->
<p>Magna posuere diam leo est, class nunc rhoncus blandit fusce viverra. Habitant per auctor curabitur aptent mollis penatibus faucibus sagittis ve magna gravida sit faucibus. Accumsan ad magnis conubia dis turpis.</p>
<!-- /wp:paragraph -->

Key Features of LoremIpsumWP:

Use the filters to generate dummy content that specifically suits your requirements. Here is some of the settings that you can adjust:

• Headings: Include headings to come up with a structured article.
• Heading depth: From H2 to H6, specify the depth you need. The headings will always keep a logical structure. If the previous heading was H2, the next heading will not be H5, but it will be H2 or H3 (there is some randomness).
• Customizable Paragraphs (sections) : Choose how many paragraphs you want to generate to fit the needs of your design by adjusting the Number of sections slider.
• Paragraph length: Adjust the number of paragraphs per section
• Random Images: Insert placeholder images to see how your site handles media elements.
• Lists and Formatting: Add ordered and unordered lists, blockquotes, and more to preview all the formatting options.
• Quotes: Add random quotes to your articles using the specific markup.
• Table of contents: Insert a table of content to have a better overview of your article and enhance the navigation.

5. How to Use LoremIpsumWP for Gutenberg Content

Generating dummy content with LoremIpsumWP is simple. Here’s a quick guide to get started:

1. Visit LoremIpsumWP.com: Head to the site and explore the different content generation options available.
2. Select Your Preferences: Customize the number of paragraphs, enable or disable images, and specify any additional elements you need (like lists or headings). The content is automatically generated on the go.
3. Copy Content: Click the “Clipboard” icon to copy the whole content. The content will be ready for you to paste directly into your WordPress Gutenberg editor.
4. Paste into Gutenberg: Once you’ve copied the content, go to your WordPress site and paste it into a new post or page using the Gutenberg block editor. That’s it!

6. Why Choose LoremIpsumWP Over Other Tools?

While there are many dummy content generators out there, LoremIpsumWP stands out for a few reasons:

• Gutenberg Compatibility: It’s specifically designed to generate content that looks great in the block editor, ensuring that all elements, such as images and lists, are styled correctly.
• Logical Headings Structure: When the headings option is activated, the hierarchy of the headings will be generated in a logical and sequential manner. No skipping from H2 to H4, a child heading will always be of
• Time-Saving: With simple customization options, you can generate the exact type of content you need in seconds.
• No Plugins Required: LoremIpsumWP doesn’t require any installations. It’s a web based service and a it’s a hassle-free way to create realistic content without impacting your site’s performance or risking to break your website.

7. Practical Use Cases for Dummy Content

Wondering when you might need dummy content? Here are a few scenarios:

• Theme Development: If you’re building a custom theme, dummy content helps you ensure every template looks perfect.
• Website Redesign: When redesigning an existing site, placeholder content allows you to preview new layouts before committing to the changes.
• Testing Plugins: Developers can use dummy content to test new plugins and make sure they don’t break the site’s structure.

8. Final Thoughts

Dummy content is a crucial part of the website development process, allowing you to test and refine your WordPress site efficiently. With tools like LoremIpsumWP, generating high-quality, Gutenberg-friendly dummy content has never been easier. Whether you’re developing a theme, testing your site’s layout, or previewing your designs, LoremIpsumWP offers a streamlined solution that saves time and effort.

Visit LoremIpsumWP.com today and start generating professional dummy content for your WordPress projects!

The post How to Generate Dummy Content for WordPress appeared first on wpjoli.

In this guide, we’ll explore some popular methods for watermarking images with a logo and show you how much easier it can be with the Smart Auto Featured Image plugin for WordPress.

Why Watermark Your Featured Images?

• Protect Your Content: Watermarks deter others from copying and reusing your visuals without permission.
• Brand Recognition: A logo watermark keeps your brand visible, no matter where the image appears online.
• Professional Appeal: A uniform watermark gives your content a polished, consistent look.

Different Ways to Watermark an Image with a Logo

Watermarking your featured images can be achieved using different ways. The most obvious one is to use an image editing software, but this is not the only way to do.

Using Image Editing Software (e.g., Photoshop, GIMP)

• Steps: Import your image, add your logo as a new layer, adjust opacity, and place it strategically.
• Pros: Offers full control over placement, size, and opacity of the watermark.
• Cons: Time-consuming if you have many images to watermark and requires basic design software knowledge.

Online Watermarking Tools (e.g., Watermarkly, Canva)

• Steps: Upload your image to an online tool, add and adjust your logo watermark.
• Pros: Easy-to-use interface and accessible without software installation.
• Cons: Can be tedious to use for each image and may require a premium version for batch processing or custom placements.

WordPress Plugins for Watermarking (e.g., Image Watermark)

• Steps: Install and configure a plugin, set your logo, and customize watermark placement for images uploaded to the media library.
• Pros: Automates the watermarking process for all images.
• Cons: Limited control over specific image placements and can be resource-intensive.

How to Watermark with Smart Auto Featured Image

If you’re looking for a simple, automated way to watermark your featured images, Smart Auto Featured Image makes it a breeze with its dynamic layer feature. Here’s how it works:

• Automatic Logo Insertion: Simply enable the logo layer within the plugin’s template editor. Smart Auto Featured Image pulls the logo directly from your website settings, so every image is watermarked consistently.
• Customizable Placement: You can adjust the placement, opacity, and size of your watermark to fit your brand’s style, ensuring a professional look every time.
• Dynamic Updates: With Smart Auto Featured Image, you can easily update your watermark settings across all images without editing each one individually. This keeps your brand fresh and saves time on re-edits.

Example: If you need to watermark each new blog post’s featured image with your logo, the plugin’s dynamic layer allows you to insert the logo at the click of a button—saving you from repetitive, manual work.

Step-by-Step Guide: Watermarking with Smart Auto Featured Image

Set Up Your Logo Layer: Open Smart Auto Featured Image’s template editor, and draw a new Content-based image layer on the canvas.

Adjust Content-based settings: In the property panel on the right, use the dropdown to set the Image source to “Site logo”.

Adjust the image fit: Make sure to set the image fit to “Contain” if you don’t want your logo to be cropped.

Adjust Position and Style: Place the logo where you want it, adjust opacity, and choose your desired size. You can use the layer alignment buttons to perfectly center the logo for example.

Save the Template: Once your logo watermark is positioned, save the template so that you can use it later in your posts.

Generate with Ease: Every time you publish a post, select the template, click the Preview button to show up the preview and check the render.

Preview & Generate: Every time you publish a post, select the template, click the Preview button to show up the preview and check the render. On the below image, you will see the site logo automatically pulled from the WordPress website and inserted. All is left to do is to click the “Generate featured image” button. The featured image will be automatically inserted to your post !

Final Thoughts

Watermarking is an essential step to brand your images and maintain control over your content. Although several methods exist, Smart Auto Featured Image simplifies the process by automating watermarking directly in WordPress. With this plugin, you can apply your logo to every featured image consistently, efficiently, and with minimal effort—leaving you more time to focus on creating great content.

Get Started with Smart Auto Featured Image and bring uniform branding to your WordPress site’s visuals today!

The post How to Watermark Your Featured Images with a Logo appeared first on wpjoli.

In this guide, we’ll discuss the best featured image sizes for WordPress, why they matter, and how using a tool like Smart Auto Featured Image can simplify this process and optimize your images automatically.

Why Featured Image Size Matters

Choosing the right size for your featured images does more than just make your posts look good—it impacts your site’s performance, SEO, and overall user experience. Here are some key reasons why featured image size is important:

1. Improves Page Load Speed

Large images can slow down your page, which affects user experience and SEO. According to Google, even a one-second delay in load time can reduce user satisfaction by up to 16%. When images are optimized for size, they help improve load times, keeping visitors on your page longer and increasing the likelihood of engagement.

2. Enhances Visual Consistency

A consistent visual style across posts contributes to a cohesive brand image. Choosing a specific size for all featured images ensures they look aligned and professional. The right image dimensions prevent pixelation, distortion, or awkward cropping, helping your website appear more polished.

3. Boosts SEO

Fast-loading images are favorable in search engine rankings, and Google considers page speed as one of its ranking factors. Properly optimized images contribute to faster loading times, which can improve your SEO and help you rank better on search engines. In this regards, the image format is also important and the .webp image format should strongly be considered.

Recommended Featured Image Sizes for WordPress

Most WordPress themes have recommended dimensions for featured images. While these can vary, the general consensus for an optimal featured image size is 1200×628 pixels. This size provides a good balance between high resolution and manageable file size, making it suitable for social media sharing as well.

Facebook recommands a resolution of 1200×630 at least for optimal results when sharing your blog post on social media.

However, if you need to use a slightly different image ratio, I would recommand keeping a width of 1200 pixels but it is completely fine to adjust the height of a few pixels around the 628 pixels mark.

Here is some featured image size worth looking into:

1200×624 pixels

This particular size allows you to cleanly design your images using a helping grid whose cells are multiple of 4 and spread from edge to edge without being cropped.

You can design based on grid cells of 4×4 pixels, 8×8 pixels, 12×12 pixels, 16×16 pixels, 24×24 pixels.

This is very convenient when designing a template to ensure every element will be perfectly adjusted.

1200×628 pixels

This size is is the most commonly found featured image size. However if you need to design with the help of a grid with even cells on the horizontal and vertical axis, spreading from edge to edge without being cropped. You can only use a grid cell size of 4×4 pixels, which is fairly small. Any above value will result in the right or bottom grid cells being cropped, and this is not ideal for even designs.

1200×630 pixels

This size is recommanded by Facebook, and it allows you to design with a helping grid whose cells are multiple of 5, spreading from edge to edge without being cropped.

You can design based on grid cells of 5×5 pixels, 10×10 pixels, 15×15 pixels, 30×30 pixels.

Popular Image Sizes Based on Theme Use

• Standard Blog Post: 1200×628 pixels (ideal for social sharing)
• Homepage Thumbnail: 150×150 pixels (useful for grid-based layouts)
• Full-Width Image: 1920×1080 pixels (suitable for image-centric themes)

Pro Tip: Always check your theme’s documentation for specific image size recommendations. WordPress themes can vary significantly, so using the recommended dimensions helps you achieve the best display.

Adapting Image Sizes for Social Media, Mobile, and Desktop

Another reason to optimize your featured image size is to ensure it looks great across different devices and platforms. Below are some suggested dimensions to make sure your featured images look their best on various screens and when shared to social media.

Social Media Sharing

For Facebook and Twitter, images with a 1200×628 resolution generally display best, while on Instagram, square images (1080×1080) are often more appropriate. Ensuring your featured image dimensions are compatible with these social platforms helps maximize your blog post’s reach and visual appeal.

Mobile Responsiveness

With over 50% of internet traffic coming from mobile devices, it’s essential that your featured images look good on smaller screens. WordPress will automatically resize images based on screen size, but images around 800×600 pixels also work well on mobile without slowing load times.

Desktop & High DPI Screens Optimization

If your site is mostly accessed on desktops, especially if it’s a portfolio or image-heavy blog, you might want to choose larger dimensions like 1800×945 pixels (which is 1.5x the 1200×630 pixels resolution). This provides sharp, high-quality images across larger screens without compromising the visual appeal.

Another option if you care about having a crisp, high quality featured image that will render well, even on screen with a high DPI, is to generate your featured image with Smart Auto Featured Image using the HD option.

When this option is activated, the final image will have its resolution doubled.

WordPress Featured Image Display Across Pages

WordPress uses featured images differently across various sections of your site. Understanding where and how these images are displayed can help you select the best sizes for each use.

• Homepage and Blog Roll: Images are often resized to thumbnails or grid formats, meaning your images may appear smaller here than on individual posts.
• Single Blog Post: Images generally display in full or near-full size, giving you flexibility with larger dimensions.
• Social Sharing Thumbnails: WordPress often uses the default featured image when posts are shared on social media. This is another reason to choose images with a good aspect ratio, such as 16:9, to ensure they appear correctly when shared.

To streamline this process, Smart Auto Featured Image helps automate image generation directly within the WordPress Gutenberg editor. With templates optimized for all these display formats, it ensures your images are always ready for any use, saving time and enhancing visual consistency.

How to Optimize Featured Images for Better Performance

Properly optimizing images involves both choosing the right size and compressing the file to minimize load times. Here’s how to achieve an ideal balance between quality and performance.

1. Use Compression Tools: Services like TinyPNG, ImageOptim, or WordPress plugins like Smush reduce image file sizes without compromising quality. Keeping featured images files under 200KB is generally a good rule of thumb.
2. Choose the Right Format: JPEGs work well for photographs, while PNGs are better for graphics with transparent backgrounds. To further optimize, consider the .WEBP format supported in the Pro version of Smart Auto Featured Image, which offers high quality at a reduced file size.
3. Don’t use complex graphics: Overly detailed photos and gradients are costly in terms of image size (weight, not format). Whatever image format you pick, a detailed image with a lot of different colors will always come out heavier. Use graphics such as SVGs and monocolor backgrounds to reduce image size and improve your SEO!
4. Test and Preview: Use tools like Google’s PageSpeed Insights to see how images impact your page’s loading time. Experiment with different sizes until you find a balance between quality and speed.

Automating Image Sizing with Smart Auto Featured Image

For busy site managers, manually adjusting image sizes can be time-consuming. Smart Auto Featured Image simplifies this process by using a template that you would already have configured. This way, you pick the size you want your featured images to be and whenever you reuse this template, the size will always be the same.

This plugin allows you to select a template directly in the Gutenberg editor and generate images that align perfectly with your theme’s needs without additional tools or tedious imports.

Ensuring Consistency in Your WordPress Featured Images

Consistency is key to maintaining a professional brand image. Here are a few tips to make sure your featured images always look great:

1. Use a Standard Aspect Ratio: Aim for an aspect ratio around 1.9 as a general rule. This ratio is versatile across devices and looks polished in both landscape and portrait orientations.
2. Avoid Busy Backgrounds: Clear, focused images are more effective. Too much detail can be distracting, especially when overlaid with text.
3. Avoid detailed illustration or gradients: The more complex an image, the more colors, and the more file size in the end ! Use simple illustrations without too many colors to improve loading speeds !
4. Rely on Templates: Smart Auto Featured Image offers Pro templates that streamline this process. You can design a layout once, then reuse it for different posts to ensure each image aligns with your brand style.
5. Use the Same Font and Colors: Consistent font styles and color palettes create a cohesive visual identity. Smart Auto Featured Image allows you to save these styles in templates, making it easier to apply them across posts.

Wrapping Up: Why Featured Image Size Matters

Choosing the best featured image size for WordPress involves balancing aesthetics, functionality, and performance. By following recommended sizes, optimizing for speed, and leveraging tools like Smart Auto Featured Image, you can elevate your website’s appearance while reducing the time spent on tweaking your featured images.

Unlike popular opinion, instead of the 1200×628 pixels featured image format, I’d privilege either the 1200×624 pixels or the 1200 x 630 pixels for the reasons explained above.

Ready to simplify your image creation process? Smart Auto Featured Image is here to help. With features designed to automate, streamline, and optimize featured images for every post, it’s a must-have tool for WordPress site managers looking to create a consistent, professional visual style. Try it today and see the difference it can make.

The post The Best Featured Image Size for WordPress: A Complete Guide for Optimal Performance appeared first on wpjoli.

The default look of the table of contents is rather simple and will blend well with most themes. However, under the hood Joli Table of Contents has been designed to be fully customizable.

In this article, I will customize an exemple table of contents from scratch, by leveraging Joli Table of Contents’ advanced customization features.

The default table of contents

In our example, we will use the default “Basic Light” theme. This is how it looks like with the default settings:

Basic styles: borders / rounded corners / colors

The first we are going to do to get a more custom look using the plugin’s settings is the following:

• Add a border
• Round the corners
• Change some colors

Custom border

To add a border, let’s go to the settings page. Under STYLES > TABLE OF CONTENTS, let’s set the Border to 3px on each side.

Next, we are going to set the Border radius to 12px on each corner. This setting will make the corners rounded.

Now let’s give a custom color to the border, and this is how the settings look like so far:

At this point, our table of contents looks like this:

Table of contents colors

For our style, we want to have a blue colored header with the table of contents title in white and a white background for the table of contents body (behind the headings).

Under STYLES > TABLE OF CONTENTS, let’s set the table of contents Background color to our custom blue color (#5838e9). This will make the whole table of contents blue.

Under STYLES > TABLE OF CONTENTS TITLE, let’s set the table of contents Title color to white (#ffffff).

What we want to do now, is to set a different body color. Let’s make it white, and slightly transparent to bring out a tiny bit of a blue shade.

Under STYLES > TABLE OF CONTENTS BODY, we are setting a white, with an opacity of 96%.

If you are wondering why I did not just change the Header background color, it’s because of the table of contents border that we set. In this particular case, the anti-aliasing from the rounded corners was creating a small, but noticeable hair thin white line near the corners. So by setting the blue background color at a deeper level (the TOC root), it prevents this visual defect from happening.

The table of contents now looks like this:

Because of the blue color around the heading area, the space between the TOC title and the headings looks narrower. Let’s fix this by setting a Margin bottom to the Header.

Under STYLES > TABLE OF CONTENTS HEADER, we are setting the bottom Margin to 14px.

Finally, let’s change the headings color to match our table of contents color.

Under STYLES > HEADINGS TEXT LINK, we are setting the Color to our custom blue.

This is what the table of contents looks like at this point:

Increase spacing between headings

In order to make the table of contents look less packed, we are now going to increase the space between the headings.

Under STYLES > HEADINGS TEXT LINK, we are setting the Padding top and bottom to 5px each, to keep it even. We are using padding instead margin in this case because it will provide more area to the heading to click on.

The table of content now looks like this:

Custom background image

Let’s push the customization a little further now by using some custom CSS. The goal here is to set a custom background pattern on top of our slightly transparent white body background.

To make things simple, we are going to use an SVG pattern generator like Pattern Monster, and all we have to do is to pick a pattern, customize colors (make sure to adjust transparency).

The website lets you copy the corresponding CSS code by a click of a button but because it is not possible to save HTML in the settings, we need to encode the SVG in base 64.

The website fffuel.co lets you do that easily. Just import or paste your SVG, and it will generate automatically the corresponding URL string that we can use for our CSS.

To make our table of contents body have this custom background, we need to target it with CSS using the .wpj-jtoc--body class. All we have to do now is to paste the base 64 encoded CSS code generated and here we have our CSS rule:

Under STYLES > CUSTOM CSS, let’s just paste this custom CSS.

.wpj-jtoc--body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ncGF0dGVybklkJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxkZWZzPjxwYXR0ZXJuIGlkPSdhJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHBhdHRlcm5UcmFuc2Zvcm09J3NjYWxlKDIpIHJvdGF0ZSgwKSc+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0naHNsYSgwLCAwJSwgMTAwJSwgMCknLz48cGF0aCBkPSdNMC0xMEMtLjAxMS00LjQ5LTQuNDg1LjAzLTEwIC4wMy00LjQ4NS4wMy0uMDExIDQuNDkgMCAxMCAuMDExIDQuNDk4IDQuNDkzLjAwMSAxMC0uMDEgNC40OTMtLjAyLjAxMi00LjQ5OCAwLTEwem0wIDIwYy0uMDExIDUuNTEtNC40ODUgMTAuMDMtMTAgMTAuMDMgNS41MTUgMCA5Ljk4OSA0LjQ2IDEwIDkuOTcuMDExLTUuNTAyIDQuNDkzLTkuOTk5IDEwLTEwLjAxQzQuNDkzIDE5Ljk4LjAxMiAxNS41MDIgMCAxMHptMjAtMjBDMTkuOTg5LTQuNDkgMTUuNTE1LjAzIDEwIC4wM2M1LjUxNSAwIDkuOTg5IDQuNDYgMTAgOS45Ny4wMTEtNS41MDIgNC40OTMtOS45OTkgMTAtMTAuMDEtNS41MDctLjAxLTkuOTg4LTQuNDg4LTEwLTkuOTl6bTAgMjBjLS4wMTEgNS41MS00LjQ4NSAxMC4wMy0xMCAxMC4wMyA1LjUxNSAwIDkuOTg5IDQuNDYgMTAgOS45Ny4wMTEtNS41MDIgNC40OTMtOS45OTkgMTAtMTAuMDEtNS41MDctLjAxLTkuOTg4LTQuNDg4LTEwLTkuOTl6JyAgc3Ryb2tlLXdpZHRoPScxJyBzdHJva2U9J2hzbGEoMjU5LCA1OSUsIDU5JSwgMC4wNCknIGZpbGw9J25vbmUnLz48cGF0aCBkPSdNMTAgMEM5Ljk4OSA1LjUxIDUuNTE1IDEwLjAzIDAgMTAuMDNjNS41MTUgMCA5Ljk4OSA0LjQ2IDEwIDkuOTcuMDExLTUuNTAyIDQuNDkzLTkuOTk4IDEwLTEwLjAxLTUuNTA3LS4wMS05Ljk4OC00LjQ4OC0xMC05Ljk5eicgIHN0cm9rZS13aWR0aD0nMScgc3Ryb2tlPSdoc2xhKDI1OSwgNTklLCA1OSUsIDAuMDQpJyBmaWxsPSdub25lJy8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0nODAwJScgaGVpZ2h0PSc4MDAlJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwLDApJyBmaWxsPSd1cmwoI2EpJy8+PC9zdmc+");
}

Here is our table of contents with a custom background:

Custom styles for specific headings depth

Let’s keep pushing our customization journey by leveraging another built-in capability of Joli Table of Contents.

For each generated heading, Joli Table of Contents automatically “tags” it with a specific depth class. This way, it is easy to target different depth for styling.

The way it works is the following: if the heading is of type H2, it will get the .--jtoc-h2 CSS class. if the heading is of type H3, it will get the .--jtoc-h3 CSS class, and so on until H6 depth.

From there, and because of the way Joli Table of Contents works, we need to create a specific CSS rule to target specific heading depth. We cannot just use the .--jtoc-h2 class by itself or it will give an unwanted result.

Here is the rule that you need to follow: .--jtoc-h2>.wpj-jtoc--item-content a

This rule targets all headings of type H2, and all links contained within .wpj-jtoc--item-content, directly after the .--jtoc-h2 element.

In the following example, we are going to style every heading of type H2, and make the font weight to be bold.

The custom CSS needs to be pasted in the Custom CSS section of the settings.

.wpj-jtoc .--jtoc-h2>.wpj-jtoc--item-content a {
    font-weight: bold;
}

This is what the Table of contents looks like now:

Custom HTML after specific headings

Now, to go even further, we are going to create a visual “separation” between each heading of type H2. For simplicity’s sake, we are going to create a simple horizontal line.

To achieve this, we are going to leverage the built-in action hooks and insert custom HTML dynamically.

For this specific task, the most appropriate hook is joli_toc_before_begin_item_content. When the hook is triggered, it comes with a variable ($args) containing the current heading information while it’s being processed.

$args is an Array and contains the following offsets:

    $args['id']      // The heading id (its html anchor)
    $args['title']   // The heading title as it will show
    $args['counter'] // The heading counter (1, or 1.1, or 2.1.1, etc)
    $args['depth']   // The heading depth (from 2 to 6)
    $args['url']     // Optional url that would override the id

We can the use this to have a fine control over the way our custom HTML will be inserted.

Our goal is to insert an horizontal line before each heading of type H2, except for the first one.

To do that, we are making sur that the counter must be different from “1” which corresponds to the very first heading. The second condition will be matched against the depth. We only want depth of level 2.

The following snippet must be placed in your theme’s functions.php.

add_action('joli_toc_before_begin_item_content', function ($args) {
    //Skip first heading and only process H2 headings
    if ($args['counter'] != '1' && $args['depth'] == 2){
        echo '<hr>'; //Horizontal line
    }
}, 10, 1);

Here is our table of contents now with the horizontal lines:

Custom bullet points instead of standard numeration

To give a more unique look to our table of contents, we are going to get rid of the numeration, and instead, we want to have custom bullet points shaped as a pill.

First of all, we need to turn off the numeration in the settings:

The next step is to use another action hook in order to inject custom HTML right before each heading.

The hook that we need for this is joli_toc_after_begin_item_link.

The following snippet must be placed in your theme’s functions.php.

add_action('joli_toc_after_begin_item_link', function ($args) {
    echo '<span class="pill-bullet"></span>'; // Custom HTML that will be inserted before each heading
}, 10, 1);

The second step in this process is to give some styles to the .pill-bullet class so that our pill shaped bullet point actually show up.

In the Custom CSS section, we are going to add this rule that will render a “green pill” :

.pill-bullet {
    display: inline-block;
    width: 20px;
    height: 8px;
    background: #34ddb4;
    margin-right: 10px;
    border-radius: 10px;
}

We can see here that the numeration has been replaced by our custom HTML. If we wanted to, we could add more complexity and have different colors or shapes per heading depth.

Add a custom link at the bottom of the Table Of Contents

Still using action hooks, let’s see how we can add a custom link to the bottom of our TOC. This link will be present on every single TOC.

The hook that we need for this is joli_toc_after_headings.

In this example, out link will be wrapped in a div with some inline styles to make the link centered. The following snippet must be placed in your theme’s functions.php.

add_action('joli_toc_after_headings', function ($args) {
    echo '<div style="text-align:center;width:100%"><a href="https://my-custom-link.com" class="ext-link">External link</a></div>';
}, 10, 1);

Still in the Custom CSS section, we are going to give some basic style to our text link :

a.ext-link {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    color: gray;
}

And voilà ! Here is our table of contents with the link at the bottom:

Altering headings

This is another advanced feature that you can use to have full control over your headings.

Whether you want to target a specific keyword or add a random string, you can use the joli_toc_headings filter hook to alter the actual output.

In the following example, we are going to remove the vowels from every heading. It is not really useful, but it is just to demonstrate how it’s done and so you can use the same pattern for a more useful application.

The following snippet must be placed in your theme’s functions.php.

add_filter('joli_toc_headings', 'filter_headings', 10, 2);

function filter_headings( $headings ){ 
    $headings = array_map(function($heading){
            //Remove vowels from titles
            $heading['title'] = preg_replace("/[aeiouAEIOU]/", "", $heading['title']);
        return $heading;
    }, $headings);

    return $headings;
}

Here is the table of contents with the vowels removed from the headings !

Another similar example, but this time the function will remove any combination of a number and a dot at the start of a heading.

For instance, “2. Top 5 pets for a big backyard” would become “Top 5 pets for a big backyard”. This would give a cleaner look at the table of contents when there is already the numeration activated and you have some random headings in the page that contain numbers.

add_filter('joli_toc_headings', 'filter_headings', 10, 2);

function filter_headings( $headings ){ 
    $headings = array_map(function($heading){
            //Remove first number and dot from titles
            $heading['title'] = preg_replace("/^\d+.\s+/", "", $heading['title']);
        return $heading;
    }, $headings);

    return $headings;
}

Conclusion

As you can see, there are many ways to customize Joli Table of Contents. Some customizations require a little bit of code but there are already plenty of customizations available from the settings.

Joli Table of Contents bundle a large array of hooks that allow for extensive customization. Make sure to have a look at the documentation to have a good outlook of what’s possible to achieve.

Keep in mind that all the customizations shown in this article work for both the Free and the Pro version of Joli Table of Contents.

The post How to Customize Joli Table of Contents: Beginner & Advanced Tips appeared first on wpjoli.

In addition, search engines like Google will most likely be happy about it. Not only will this help your articles rank higher in the SERPs but also they may even be featured with rich snippets!

It is very easy to add this functionnality to your WordPress website using a plugin. Below is our selection of the best Table Of Contents Plugin for WordPress.

1. Joli Table Of Contents

Joli Table Of Contents is a feature rich Table Of Contents plugin for WordPress. It is highly customizable and provides a clean and easy to understand settings page. You can easily choose the title alignment (left, center, or right), the toggle button position (left or right) and icons, change the font size or even change.

As a matter of fact, this very article is using the Joli Table Of Contents plugin for WordPress! To achieve this specific look, we used FontAwesome for the toggle icons, and used the hooks to add a custom horizontal bar under the title. The colors have been set from the settings panel of the plugin.

One of the best features is the visibility options (folded or unfolded in the free verstion, or with a floating widget available in the pro version). The floating widget remains on the screen as the user reads the article and allows to quickly jump to another section. It also shows the current section of the article.

Joli Table Of Contents comes with multiple built-in themes and lots of color and font options to choose from. It is really easy to setup the look of the table of content to your liking.

Download Joli Table Of Contents:

2. Easy Table of Contents

Easy Table Of Content is the most simple plugin of its kind. It does what it says and has gained popularity over the years due to its simplicity and basic settings.

It offers a good amount of options but is lacking advanded customization. For example, it is not possible de change the toggle icon or position unlike Joli Table Of Contents.

Download Easy Table Of Contents:

3. LuckyWP Table of Contents

LuckyWP Table Of Contents is good alternative to Easy Table Of Contents. It features all the basic options you could expect from this kind of plugin and you can even skip the processing of the heading using custom texts.

It features blocks for Gutenberg, Elementor, or Toolset. Its main drawback, similarly to Easy Table Of Contents is the lack of advanced styling and the settings panel needs to reload the whole page when changing tabs, which is not convenient.

Download LuckyWP Table Of Contents:

4. CM Table Of Contents

CM Table Of Contents is a bit different in the way it is working. It allows the use of custom selectors for building the actual table of contents. This means that you can use divs, or tables, or any html tag with custom classes or ids instead ot the traditional H1 to H6 tags. This will be helpful for a minority of users and is a nice addition.

However in the free version, this plugin offers very limited features and options which makes it hardly usable without the pro features.

Download CM Table Of Contents:

5. Thrive Architect

Unlike all of the above plugins, Thrive Architect is actually a WordPress page builder that comes with a Table Of Contents option.

The generation of the actual table of contents is automatic. Just drag and drop the widget on your page from the visual builder and that’s it!

Once you’ve done that, you can adjust a few settings such as chosing which heading tags you want to include in the table. It’s quite easy yet is not meant to be highly customizable.

By default, the table will show on two columns. However, you can change this to one colum if you wish to. All of the basic alignment, margin, padding options or available but don’t expect to go too fancy.

Conclusion

Enhancing your content with a Table Of Contents is the best thing you could for your WordPress website. It is effortless and can only be benficial for both your visitors and Google as you may be featured with rich-snippets in the SERPs

Our favorite pick is of Joli Table Of Contents as it is the one that are using, but feel free to let us know any other plugin that is worth looking into!

The post The Best Table Of Contents Plugins for WordPress in 2025 appeared first on wpjoli.