Approval Studio v1.1 Released

This latest release of Approval Studio v1.1.2 is a maintenance release with two new features. Most of the code work went into optimizing the code behind the scenes, making sure it was PHP 8 and WordPress 5.8 ready and capable. Plus, a documentation section and the new WPStudio licensing have been added to the plugin to simplify life. One of the main reasons a documentation tab was added to the Settings area of the plugin was because the approval system requires multiple notification emails going back and forth between client and designer (along with other interested parties) it is imperative that any website using Approval Studio utilizes an SMTP connection to ensure email delivery.

The Settings area of Approval Studio now allows for modification of the URL/slug and setting an alternative email name and address to be used specifically for the Approval Studio interactions along with the new documentation and license tabs.

What is Approval Studio?

If Approval Studio is a new tool for you then you are in for a treat. If you need a simple method of sending design proofs to clients and then soliciting feedback and interactive client/designer communication along with an approval signing system, you are in luck. Approval Studio allows for designs/images/screenshots to be loaded into the plugin and the ability to leave interactive feedback along with an approval signing system.

The design feedback and approval working board is sent to a client and any interested party so all can interact with the design. Once they click on an area of the design they want to respond or provide feedback, a modal window with name opens and logs the comment/feedback so that all parties involved in the process can see the feedback.

Once the client is ready to move forward in the project, they have the ability to digitally sign an approval form that logs the signature, date/time, and approval authorization.

Approval Studio provides a simple solution that fits within any designer's workflow to garner direct feedback from the client and to get a real-time approval authorization that can be filed into the client account. Design -> Feedback -> Approval

How can you get Approval Studio?

Currently, Approval Studio (along with numerous other custom WordPress plugins and themes) are made available to members of the WPStudio Training Community. If you are interested in gaining access to Approval Studio along with hundreds of hours of past live training events, all future live training events, plugins like SEO Studio, Security Studio, Form Studio, VocePress, Code Studio, Loop Studio, and all the other benefits of membership... I encourage you to head over to the Join WPStudio Page.

Understanding Image File Types

Did you know that certain image file types should only be used in specific contexts? Did you know that most website owners seem to not understand which image file types should be used for the web and thereby end up slowing down their site load time which lowers their SEO rankings. This article should help provide a better understanding of images for the web.

There are two main categories for image types

Raster Image Files

The raster image file format is probably the most common on the internet. JPEG, GIF, and PNG are all raster image files. Another way to understand the raster image files is that every pixel in the image has a defined color, position, and proportion based on resolution. And since a raster image is static, it cannot efficiently be resized. This is why you see a lot of "stretching", "distorting", "squishing", and even "pixelated". Most photographs and images on the internet are rasterized image files.

Vector Image Files

Some of the more common vector image file formats are SVG, EPS, and even PDF. As opposed to the raster image files, the design and shape of a vector image is tied directly to a pixel and therefore the images are more flexible. This means that no matter what size (large or small) image is used, the image can proportionally adjust properly.

The Most Popular Image File Types

  1. JPEG (and JPG) - Joint Photographic Experts Group
    JPEG is a raster image file format with lossy compression that makes it great for "shareable" images. The "lossy" aspect means the file size is reduced but also the quality of the image goes down.
    - Universal Support
    - Low File Size
    - Lossy image compression can lead to poor text
    WHEN TO USE - -
    - Good for blogs and articles, product images, and more.
    - Do not use for infographics and images with lots of small text or tutorial screenshots
  1. PNG - Portable Network GraphicsPNG is a raster graphic and is similar with lossy compression but it offers better text reada
    bility over JPEGAdvantages/Disadvantages
    - Higher quality images and clearly visible text
    - BUT larger file sizes can slow down a website.
    WHEN TO USE - -
    - Good for infographics, banners, screenshots, coupons, and images that use text
    - Don't use for high-resolution photos because it will cause larger than normal file sizes.
  1. GIF - Graphics Interchange Format
    The GIF is another raster graphic format that also uses lossless compression, but it constrains the image to 8 bits per pixel with a limited palette of 256 colors. Most people know the GIF format as a method of animating images and therefore internet-friendly.
    - Low file sizes
    - Animation support
    - 8-bit limitations means lower image quality
    WHEN TO USE - -
    - Spice up content with GIFs to demonstrate how to complete tasks in tutorials and guides.
    - If you need more than 8-bit color, do not use GIFs
  1. WebP
    An image format developed with better lossless and lossy compression. On a website, switching from JPEGs and PNGs to WebP can not only save disk space but also bandwidth.
    - Smaller files with better image quality
    - Not supported universally
    WHEN TO USE - -
    - Replace all JPEGs and PNGs to save bandwidth and site speed.
  1. TIFF - Tagged Image File Format
    Most commonly used for storing and editing images that will be used for print. TIFF files tend to be extremely large and do not use compression.
    - High-quality files for print publishing
    - Large files with no compression
    - Limited browser support
    WHEN TO USE - -
    - Used by scanners to preserve quality of scanned documents
    - Use when preparing images and graphics for publication
  1. BMP - Bitmap
    An outdated image file format that maps pixels with little or no compression. These can be impractical to store or handle.
    - Griant file sizes with no noticeable gains over WebP, GIF, or PNG.
    WHEN TO USE - -
    - None
  1. HEIF - High Efficiency Image File Format
    This image file format was developed by the team behind MPEG video format and is a competitor to JPEG. Compression is twice as effective as JPEG which make the quality of the image much higher with the same file size. The file format is also based on pixel mapping which means its easy to scale up the image without losing quality.
    - Quality to file size ratio
    - Currently no browser support and limited OS support
    WHEN TO USE - -
    - Mainly used on phones
  1. SVG - Scalable Vector Graphics
    A markup language to render two-dimensional images right inside the browser. It uses XML text to outline shapes and doesn't rely on raster format. This means SVG images can scale without loss of quality.
    - Small file size
    - Loss-free scaling
    - Not ideal for complex drawings
    WHEN TO USE - -
    - Ideal for logos, icons, illustrations that are needed to scale in a responsivel design.
  1. EPS - Encapsulated Postscript
    A vector image file used for storing illustrations. EPS is actually a text-based document that outlines shapes and lines with code rather than mapping pixels and colors.
    - Lossless scaling
    - Printer support for documents and designs
    WHEN TO USE - -
    Mostly used for storing, saving, and printing illustrations with Adobe products.
  1. PDF - Portable Document Format
    PDFs are files that are based on the same PostScript language that powers the EPS vector image files.
    - Indexable and searchable text
    - Can include links and interactive elements
    - Lossless scalability
    - Cannot be included in web content, must be embedded
    WHEN TO USE - -
    - Creation of interactive visual reports or infographics
  1. AI - Adobe Illustrator Artwork
    Image format designed by Adobe to save image and project state. Not meant for web and isn't supported in browsers.
    - All strokes, lines, shapes, filters, are customizable and reversible
    - Scale up or down freely
    - Large file sizes
    WHEN TO USE - -
    - Saving and storing Adobe Illustrator projects
  1. XCF - eXperimental Computing Facility
    Is an open-source file type from the application GIMP. Equivalent to PSD files. Not supported by web browsers.
    - All paths, files, and shapes are customizable and reversible
    - Lossless image quality
    - Large file sizes
    WHEN TO USE - -
    - Saving and storing GIMP projects
  1. INDD - Adobe InDesign Document
    Native file format for Adobe InDesign. While most would refer this as an image file format, it also has links to visual elements beyond text.
    - Store large multi-page design projects
    WHEN TO USE - -
    - Used by graphic designers for designing posters, flyers, magazines, and pamphlets.
  1. INDD - Adobe InDesign Document
    Native file format for Adobe InDesign. While most would refer this as an image file format, it also has links to visual elements beyond text.
    - Store large multi-page design projects
    WHEN TO USE - -
    - Used by graphic designers for designing posters, flyers, magazines, and pamphlets.
  1. Raw Image File Types
    These are file types that come from digital cameras to store full-quality images for later post-production and editing. Most RAW files offer up to 16,384 shades per color channel in a single picture (as opposed to the 256 shades per color channel in JPEG).
    - Higher quality pictures with more variablity in color
    - Giant image file sizes (sometimes more than 40megabytes)
    WHEN TO USE - -
    - When saving your images from your digital camera for future post-processing and editing.

Process of Enqueuing Resources in WordPress

The basic concept of including and/or adding resources (scripts and stylesheets) to any website is to add it to the <head></head> section of the HTML document. But what happens when you have a dynamic content management system like WordPress where multiple different systems (WordPress core, plugins, and themes) may all be attempting to add the same scripts and/or styles? Unless there is a management to control how assets are added to the site, the site will have nothing but trouble.

WordPress solved this issue early in its history by standardizing the method in which all assets are handled and processed on the site. Almost everything added to a WordPress site runs through the hook wp_enqueue_scripts. This article will talk about how the hook works in order to add stylesheets and scripts to the site, how dependency management works, and some advanced tips and tricks.

So how does this wp_enqueue_scripts work?

Basically, there are two steps taken when adding a script of stylesheet. (Though there is a shortcode where it will appear only one step is taken... more on that later.)

  1. We need to register the script... i.e inform WordPress where the script is located.
  2. We need to enqueue the script and connect it to the WordsPress hook that understands whether to place the script into the site's header or right before the closing <body> tag.

PRO TIP: So why are there two steps? Because there may be times you want to "register" the script, but you may only want to conditionally load or use that script in one or two locations of the site. The two-step process provides modularity.

Basics of enqueuing

As mentioned earlier in the article, everything revolving around the enqueuing of assets to a WordPress site is going to run through the wp_enqueue_scripts hook. If you are interested in learning more about WordPress hooks, I recommend starting here. Inside the wp_enqueue_scripts hooked function, we use four different WordPress functions that handle the registering and enqueueing of the assets.

In the above code example, you can see that script is first registered using the wp_register_script function and then later in the function the same identifier ('custom-script') is called inside the wp_enqueue_script function. And the same is done for the style.css file using the wp_register_style and wp_enqueue_style functions.


One of the major benefits of using the WordPress enqueueing system is that it already has built-in support for dependency management. (What is dependency management? Let's say you are adding a jQuery tooltip script and in order for the tooltip script to function it needs jQuery to load BEFORE the tooltip script. Dependency management takes care of all that to make sure everything that is required to load happens in the right order.) In fact, because the WordPress wp_enqueue_script function has dependency management, we have the option of simply enqueueing the script and not run a separate registration function. Here is an example:

In the above example, the dependent.js file is given a script ID (custom-dependency), declared the location (plugins_url( '/js/dependency.js'), and then tells WordPress that this dependent.js script file requires (depends upon) jQuery to be loaded.

Load a Script in the Header or Footer

Sometimes you MUST load a script and/or stylesheet in the header in order for the site to function properly. But sometimes you can have the script load right before the closing of the </body> tag. There are many benefits of loading a script at the end of a page, but one of the key ones is it improves the speed of a site and helps eliminate "render-blocking scripts" that you'll see in lots of website speed measurement reports.

This is where another benefit of the enqueueing functionality in WordPress comes into play. Using the fifth parameter in the wp_enqueue_script function (note: the fourth parameter is an optional version number of the script/stylesheet), we can specify whether or not to load the script in the header or the footer.

In the fifth parameter, by stating the argument to be true, the script will be loaded in the footer. If you state the fifth parament to be false, the script will be loaded in the header. (NOTE: if you leave off this fifth parameter, the script will automatically be loaded in the header.) This header/footer option as a fifth parameter is only utilized in a script enqueue process (wp_enqueue_script). If you are dealing with a stylesheet (wp_enqueue_style), there is a different parameter used in this location.

Only Load a Stylesheet on a Specific Media Type

If you are familiar with writing Media Queries in CSS, you will be right at home with utilizing the fifth parameter in the wp_enqueue_style function. The fifth parameter for those function allows you to control the stylesheet will be loaded based upon which media type is in use. (Example: screen, print, handheld, etc). For more about Media Types, you can read this article.

Quick Recap

To dig deeper into wp_enqueue_script function, you can head over to

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

  • $handle = The name of the script. Should be unique
  • $src = Full URL of the script, or path relative to the WordPress root directory
  • $deps = An array of registered script handles this script depends upon.
  • $ver = String specifying a script version number
  • $in_footer = Whether or not to enqueue the script in the header or footer (true/false)

To dig deeper into wp_enqueue_style function you can head over to

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

  • $hanlde = The name of the stylesheet. Should be unique
  • $src = Full URL of the stylesheet or path relative to the WordPress root directory
  • $debs = An array of registered stylesheet handles this stylesheet depends upon.
  • $ver = String specifying stylesheet version
  • $media = The media for which this stylesheet has been defined.


wp_enqueue_scripts (plural) is the WordPress hook that we connect a PHP function containing our wp_enqueue_script() and wp_enqueue_style() functions in order to connect all our assets (scripts and stylesheets) in WordPress.

Navigating the WordPress Block Editor

This post is a bit of a rant, but there is a solution at the end of this post. If you are new to the WordPress Block Editor (Gutenberg) or maybe you've been using it for a long time, the moment you start to create even the slightest of advanced layouts you can get frustrated by trying to locate the specific block that you are editing.

In the following example of a "reworked" Sample Page, you can see that the layout isn't too complex, but because of multiple container blocks that control typography and spacing along with multiple grid blocks in addition to all the text and image blocks it can be difficult to "relocate" a block in order to do any editing.

Luckily, WordPress Provides a Solution

Now before everyone jumps on the comments and explains to me that WordPress already solved this issue... I already know about the solution of using the Outline list view of all the blocks used on the page in a nicely formatted and hierarchical list. I love it and use it all the time.

But here is the issue that is showing up with WordPress 5.8. In all the "decision-making" and "planning" sessions made by the core developers, it appears the "drop-down" navigation of the Outline list view has been dropped in favor of a new panel that slides out of the left side of the page canvas.

And for anyone using a smaller laptop to make edits on the go lose SO much canvas real estate that it makes the Outline list view a non-starter for trying to navigate across the block hierarchy on any given page. There are times that it feels the development cycle of the Block Editor (Gutenberg) is constantly in search for a solution for a problem that doesn't exist.

But have no fear there is a proper solution

Christopher John released their first plugin recently that solves all of these block locating frustrations that are brought about when creating more complex and dynamic layouts in the Block Editor. The plugin is called Wayfinder and provides a real-time block outline solution that works just like you'd expect it to work.

Now it becomes simple to select the right block container / grid / element when returning to a post to edit content or even during the development stage of a post. There are other plugins that provide similar and/or alternative solutions but as of now, I believe the Wayfinder plugin has the best implementation. (And even after the Wayfinder plugin adds an additional margin to the bottom of each block in order to add the classes and labels, the plugin is still a far and away better solution.)

None of these block outlining solutions would be needed, in my opinion, if the original Block Editor drop-down outline list view was still available in the next WordPress 5.8 release. But because of design decisions to add a fly-out left panel for the Outline list view paired with the already necessary right panel fly-out for the Post and Block options, the actual content canvas becomes too small on smaller laptop screens.

What are your thoughts? Do you use the current Outline list view dropdown block finder? Do you think it needs its own panel (like in WordPress 5.8)? What do you use to help navigate the Block Editor canvas area?

VocePress Now Offers White Label Options

With the release of version 1.3, VocePress now offers a complete white label option for the theme and addon plugin. Before this release, the only method of serving up a "custom solution" for a client was to easily create a child theme that utilized all the functionality of the VocePress theme. Now, you can rebrand all aspects of the theme and plugin installation. Let's take a look at this new functionality.

Enabling the White Label Feature

The White Label module options for VocePress is automatically enabled when you install and activate the VocePress Addon plugin. Once installed, you navigate to the White Label option in the Appearance menu in the WordPress Admin area and check the only setting box available on the screen.

The white label module opens up the ability for users to change the agency and/or author name of the plugin and theme. There is also the ability to completely rename the theme along with its description AND a theme screenshot. Plus, each site can also rename the addon plugin.

Things to be aware of with the White Label option

  • Once the white label option is saved, the white label settings page disappears. In order to make any changes, you must deactivate and then reactivate the VocePress Addon plugin.
  • If a site takes advantage of the white label option, that site will CONTINUE to receive VocePress theme and addon plugin updates pushed directly to the site.
  • If you have any questions, you can ask them in the WPStudio Members Forum

How to Comment CSS

Placing comments in a CSS file or code block can serve multiple purposes.

  • CSS comments can be used to explain the concepts of a block of CSS.
  • CSS comments can be essential during the development of a site to turn on/off specific elemental stylings.
  • CSS comments can control a temporary change into a site that may be reverted at a later date.
  • CSS comments can be crucial to organizing the logical structure of a CSS stylesheet.

For whatever the reason used to comment CSS, commenting CSS code is a simple way to not allow the commented code or text to execute when browsers load a stylesheet upon a visit to the site.

Different methods of commenting CSS

Both single and block comments in CSS b begin with a /* (forward slash + asterisk) and end with a */ (asterisk + forward slash). Several examples of commented CSS using both the single and block comments:

There are no restrictions as to the number of CSS comments that are allowed to be used within a CSS code block or file. Plus, there is no “standard” as to how much styling you can give to your CSS comments, as seen in the example below.

Many times in large web projects, the stylesheets can grow in size quickly and become a beast to manage and maintain. In these types of projects, it is not uncommon to find table-of-contents commented into the CSS that is meant to make it easier to find the necessary CSS rules in the future.

Where to Comment CSS

CSS comments can be used in any location where CSS is used for a website.

  • CSS comments can be used within Inline CSS
    Inline CSS is when styling is applied to a single element directly in the HTML tag.
  • CSS comments can be used within Internal CSS
    Internal CSS is a quick way to apply CSS rules directly to the HTML page that the internal CSS is added. The Internal CSS is added within the <header> section of the HTML site and wrapped with a <style>... Insert Inline CSS...</style> tag.
  • Finally, CSS comments can be used within external stylesheets as was talked about above.

Do you have a specific way of styling your CSS? How well is your CSS commented? Could another developer come alongside and quickly understand the processes you are using to style your sites? Never be afraid to “over-comment” your CSS (and your code in general).

WordPress 5.8 Is Coming

Preview of WordPress 5.8

With WordPress 5.8 right around the corner, it is about time to look at the new features coming to people's WordPress installations. We are currently at Release Candidate 4 and that means the next version of WordPress could drop at any time. This post is an overview of many of the features and I will follow-up with a number of additional posts looking at a number of the features at a deeper level. So buckle up as we look at a number of the new features.

Manage Widgets with Blocks

After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks

Display Posts with New Blocks and Patterns

The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like creating a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.

Edit the Templates Around Posts

You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.

Overview of the Page Structure

Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.

Suggested Patterns for Blocks

Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!

Style and Colorize Images

Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.


Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature.

Dropping Support for Internet Explorer 11

Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you switch to a more modern browser.

Adding Support for WebP

WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.

Adding Additional Block Supports

Expanding on previously implemented block supports in WordPress 5.6 and 5.7, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks.