Top News - Page 15 - Extly News - The essential news, powered by Perfect Publisher.

Mastering Custom Block Styles in WordPress: 6 Methods for Theme and Plugin Developers

Block Style Variations (block styles) enable developers to give content creators pre-made styling options for core blocks, ensuring brand consistency and streamlining content production. Using block styles can also eliminate the need to create custom blocks, reducing code maintenance.

In this guide, you’ll learn several ways to add custom block styles in WordPress, whether you’re working with a theme or a plugin. We’ll cover options using JSON (theme.json), PHP (register_block_style()), and JavaScript, with clear guidance on which method suits which situation.

You will also learn how to remove core block styles from the editor and curate the experience for your content creators.

The theme.json code refers to block styles as “variations” (short for “block style variations”), which is sometimes confused with block variations or Global Styles variations. This post refers to these as “block styles” to avoid confusion.

This post starts with simple examples and gradually introduces more advanced methods for adding block styles, from quick theme tweaks to plugin-based approaches.

The code referenced in this post is also available on GitHub:

Theme: plain-pauli
Plugin: block-styles

You’ll want to have a basic understanding of CSS to follow along. Being comfortable with theme.json is also key, and knowing a bit about PHP and WordPress hooks will definitely come in handy.

To follow along or use the example code, you can use Studio, our free and open source local development environment, available for Mac and Windows.

Method 3: add a block style with register_block_style() (PHP)

3a. Use the style_data parameter 3b. Use the inline_style parameter 3c. Use the style_handle parameter

What are custom block styles?

Custom block styles let you define alternative visual treatments for existing blocks, like adding a border, changing the background, or tweaking typography.

When the block is selected, these custom styles will appear in the Styles panel within the editor sidebar, giving content creators easy ways to apply consistent, reusable design patterns. You can create as many custom block styles as you’d like.

Below you’ll find an example of the Image block. The Styles panel below shows four styles: Default, Rounded, Purple Border, and Red Border (which is the selected style showing in the editor).

A red border around an image in the WordPress editor

We’ll walk through six ways to add custom block styles in WordPress, from simple theme edits to more advanced methods.

Method 1: add a block style via a JSON file (`/styles` folder)

Best for: Theme developers
Where you would typically use it: Commonly in themes
Version requirements: WordPress 6.6 or higher with theme.json v3

For theme developers, the most streamlined way to add custom block styles to a theme is to add a new file to the /styles folder.

This method requires upgrading the theme.json schema to v3, which is only available in WordPress 6.6 and above. As a theme developer, you would either require your users to install the Gutenberg plugin or update the minimum requirement for your theme to WordPress 6.6 to ensure everything works as intended.

Say we wanted to add a blue border style called image-blue-border.json.



{
        "$schema": "https://schemas.wp.org/trunk/theme.json",
        "version": 3,
        "title": "Blue Border",
        "slug": "blue-border",
        "blockTypes": [ "core/image" ],
        "styles": {
            "border": {
                    "color": "#00f9ff",
                    "style": "solid",
                    "width": "4px",
                    "radius": "15px"
                },
                        "shadow": "var(--wp--preset--shadow--natural)"
                }
}

With theme.json v3, the metadata information for a block’s style is automatically registered within the WP_Block_Styles_Registry:

The title is the same as the label from the register_block_style code.
The slug is similar to the name property of the register_block_style function.
The blockTypes property can be used to assign a style to a particular block or series of blocks.

a blue border around the image block in the WordPress editor

The code "shadow": "var(--wp--preset--shadow--natural)" refers to the preset “Natural” shadow style in WordPress. By using a preset variable, your block will automatically reflect any global style changes, keeping your design consistent across themes and updates.

Once you save your code changes:

Your new style is added to the Styles panel for that particular block.
The block editor shows a preview when you hover over the button.
The Styles engine attaches the CSS class is-blue-border to the block in the editor and on the frontend.
When opening the Global Styles via Styles → Blocks → Image, the styles can be changed by the user for the whole site.

To organize your block style code, you can create a subfolder in the styles folder called /blocks and keep them all together. A few theme developers found they could reduce the length of their functions.php file considerably by implementing subfolders instead.

Method 2: register block style in PHP and style it via `theme.json`

Best for: Theme developers
Where you would typically use it: In the theme.json file and in functions.php
Version requirements: WordPress 6.6 or higher with theme.json v3

To add a custom block style using this method, you’ll need to register the style and add your stylings in the theme.json file.

Register block style

In your functions.php file, use the register_block_style() function to set the two mandatory arguments (additional optional arguments are covered below):

name: The identifier of the style used to compute a CSS class.
label: A human-readable label for the style.

Once set, you can add them to the init hook in your theme.



function my_style_red(){

   register_block_style(
       'core/image',
       array(
           'name'  => 'red-border',
           'label' => __( 'Red Border', 'my-theme' )
       )
   );
}
add_action( 'init', 'my_style_red' );

Add styling to `theme.json`

We’ll add some styling for the red-border variation to the theme.json file. It’s placed within the styles.blocks.core/image section, as we’re making changes to the Image block.



"styles": {
       "blocks": {
           "core/image":{
               "variations": {
                   "red-border":{
                       "border": {
                               "color":"#cf2e2e",
                               "style": "solid",
                               "width": "4px",
                               "radius":"15px"
                       }
                   }
               }
           },

These two code snippets work together because the name used in the register_block_style() function in your functions.php file and the variations’ name arguments in your theme.json file are identical.

This method produces the same editor and frontend results as using a JSON file in the /styles folder:

The style will be visible in the editor and on the frontend.
It is also available via the Editor → Styles → Blocks → Image section for global customization.

a red border around an image block in the Global Styles in WordPress

If the styles available in theme.json aren’t enough, you have a few options:

You can use the CSS property in JSON notation. The WordPress.org per-block CSS with theme.json article provides a good summary of how to do this.
You can use any of the methods below and add them to your functions.php file.
You can register the block style via register_block_style() and include the CSS in your theme’s overall style.css file, referencing the block and style class name. That being said, this is not recommended as these styles will always load, even if the block isn’t in use. A bug is also preventing the styles from loading on the frontend.
You can use block stylesheets to only load the styles when the block is used, as outlined in the WordPress Theme handbook tutorial on block stylesheets.

Method 3: add a block style with `register_block_style()` (PHP)

The register_block_style() function has three additional and optional parameters. They are listed on the documentation page for the WP_Block_Styles_Registry class that handles the registration and management of block styles.

style_data: A theme.json-like object used to generate CSS.
inline_style: Inline CSS code that registers the CSS class required for the style.
style_handle: The handle of a previously registered style to enqueue alongside the block style.

See the documentation for register_block_style() for more information.

3a. Use the `style_data` parameter

Best for: Plugin developers and theme developers
Where you would typically use it: In plugin files or functions.php
Version requirements: WordPress 6.6 or higher

Although block styles have been a fundamental way that WordPress works since 5.0, the style_data parameter was added in WordPress 6.6.

This method for defining block styles uses “a theme.json-like object,” meaning an array of nested styles in a format that very closely resembles the styles section of the theme.json file. At the root level, the styles are applied to the block(s) that you define with the block_name array.

If you are familiar with theme.json structure, you can use this method to add additional styles. This method enables those styles in Editor → Styles → Blocks and users can make changes there.

As you can see, the array notation for this parameter follows JSON closely.

The theme.json reads:



"border": {
             "color":"#cf2e2e",
             "style": "solid",
             "width": "4px",
             "radius":"15px"
          }

The array in PHP reads:



array(
       'border' => array(
       'color' => '#f5bc42',
       'style' => 'solid',
       'width' => '4px',
       'radius' => '15px'
      ),

To further demonstrate this idea, this function adds an orange border with a box shadow using the “sharp” shadow style preset.



function my_orange_border() {

   register_block_style(
       array( 'core/image' ),
       array(
           'name'         => 'orange-border',
           'label'        => __( 'Orange Border', 'pauli' ),
           'style_data'=> array(
                           'border' => array(
                           'color' => '#f5bc42',
                            'style' => 'solid',
                            'width' => '4px',
                            'radius' => '15px'
                           ),
                       'shadow' => array(
                           'var(--wp--preset--shadow--sharp)'
                           )
                       )

           )
   );
};

add_action( 'init', 'my_orange_border' );

An Orange Border style selected in the Styles panel and the orange border showing on the image in the WordPress editor

Of the three parameters, only the style_data information will be added to the global style section in the site editor and can be edited by the site owner. The other two add the styles to the Styles panel, and there is no edit path within the UI.

3b. Use the `inline_style` parameter

Best for: Plugin developers and theme developers
Where you would typically use it: In the main plugin PHP file or functions.php
Version requirements: WordPress 5 or higher

The value for the inline_style parameter is a combination of the CSS selector and the CSS properties.



function my_double_frame_styles() {
   register_block_style(
       'core/image',
       array(
           'name'         => 'double-frame',
           'label'        => __( 'Double-Frame', 'pauli' ),
           'inline_style' => '.wp-block-image.is-style-double-frame
                               img { border: 10px ridge lightgreen; }'
       )
   );
}
add_action( 'init', 'my_double_frame_styles' );

A Double Frame style selected in the Styles panel and the green border showing on the image in the WordPress editor

The class name follows standard block editor naming conventions. Each core block’s class name contains the prefix wp-block + the block name, like image. It is then followed by the block style prefix is-style and the registered style slug, like double-frame.

The class name .wp-block-image.is-style-double-frame is followed by the style that you want to attach to the block. Here you see the CSS values for the border property for the image element (img). It adds a ridged, light green 1px border.

You can have quite a few CSS properties combined in the inline_style parameter for the function, but it may become hard to read and manage.

3c. Use the `style_handle` parameter

Best for: Plugin developers and theme developers
Where you would typically use it: In plugin files or functions.php
Version requirements: WordPress 5 or higher

For more elaborate styles, consider placing the CSS in a separate file and using wp_enqueue_style() to load it on the frontend and backend. Then use the style_handle parameter in the register_block_style() function.

Here is some example code using this method to add a purple border style.



function my_purple_border_styles() {
   wp_enqueue_style(
       'my-image-block-style',
       plugin_dir_url(__FILE__) . '/my-purple-border.css',
       array( 'wp-edit-blocks' ),
       '1.0'
   );
 
   register_block_style(
       'core/image',
       array(
           'name'         => 'purple-border',
           'label'        => __( 'Purple Border, slightly rounded', 'pauli' ),
           'style_handle' => 'my-image-block-style'
       )
   );
}

And here is the accompanying my-purple-border.css file, which is placed into the plugin’s root folder.



.is-style-purple-border img {
   border: 6px solid purple;
   border-radius: 15px;
   box-shadow: 10px 5px 5px #e090fc;
};

The image block now has a purple border with a pinkish shadow style.

A purple border style selected in the Styles panel and the purple border showing on the image in the WordPress editor

Note: There is also a bug report open about the stylesheet loading even when the block styles aren’t used. Because of this, it’s not recommended for complex CSS.

Method 4: register block styles using JavaScript + CSS

Best for: Plugin developers and theme developers
Where you would typically use it: In a separate *.js file, enqueued in a plugin file, or in functions.php
Version requirements: WordPress 5 or higher

Compared to using the separate JSON file to add a block style variation, using JavaScript is more elaborate. It has three parts:

PHP: To enqueue the necessary files
JavaScript: To register the block style
CSS: To style the block

The wp_enqueue_script() function adds JavaScript files to a webpage. It’s not JavaScript itself, but rather a WordPress PHP function that’s often used in WordPress theme or plugin development. For this example, we can store the .js file in the theme’s /js/ subdirectory and name it curate-core.js.

The example code loads our custom curate-core.js file after the necessary WordPress block editor scripts. It’s added to the bottom of the page for better performance and is hooked into enqueue_block_editor_assets so it only loads in the editor.

This code example goes into the theme’s functions.php file or your plugin’s *.php file.



function pauli_block_editor_scripts() {
       wp_enqueue_script(
           'pauli-editor',
           get_theme_file_uri( '/js/curate-core.js' ),
           array( 'wp-blocks', 'wp-dom' ),
           wp_get_theme()->get( 'Version' ), true
       );
       }
      
add_action( 'enqueue_block_editor_assets', 'pauli_block_editor_scripts' );

This code should go in the JavaScript file curate-core.js:



wp.domReady( function() {
   
   wp.blocks.registerBlockStyle(
       'core/image', {
           name: 'black-border',
           label: 'Black Border',
       }
   );

} );

You can then add our block styles to your theme’s style.css file using the automatically added class name, is-style-black-border.



.is-style-black-border img {
   border: 15px ridge black;
}

Due to a bug, you need to add the style.css to the frontend. It doesn’t seem to be automatically loaded. You use wp_enqueue_style() and then use the hook wp_enqueue_scripts.

Then you’d add the following to your functions.php or plugin file:



function enqueue_theme_styles() {
   wp_enqueue_style(
       'my-theme-styles',
       get_stylesheet_uri(), // This gets your style.css
       array(),
       wp_get_theme()->get( 'Version' )
   );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles' );

You also need to add style.css to the block editor so your users can see how the block style looks when they are working on the post or page.



//add style.css to editor
function add_theme_editor_styles() {
   add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'add_theme_editor_styles' );

A black border style selected in the Styles panel and the black border showing on the image in the WordPress editor

Optional: removing unwanted core block styles

Now that you know how to add block styles to your theme or your plugin, you might also want to remove some additional block styles that come with the block editor out of the box.

There are two functions you’ll need to address:

The PHP function unregister_block_style()
The JavaScript function unregisterBlockStyle()

Block styles can only be unregistered in the same coding language used to register them. All core blocks are registered with JavaScript.

The example code below removes the additional block style for the image block called rounded.



wp.domReady( function() {
   wp.blocks.unregisterBlockStyle( 'core/image', [ 'rounded' ] );
} );

For more ways to modify the block editor, read 15 ways to curate the WordPress editing experience.

Summary: custom block styles at a glance

You now know the six ways to register block styles for the WordPress block editor. Here’s a quick recap of what we covered:

Block Style Added in Example Code	Language	Theme/Plugin	Parameter	File	Global Styles
Red	PHP+	Theme		`theme.json`	yes
Blue	JSON	Theme		`image-blue-border.json`	yes
Orange	PHP	Theme/Plugin	`style_data`		yes
Purple	PHP	Theme/Plugin	`style_handle`	.css	no
Double Frame	PHP	Theme/Plugin	`inline_style`		no
Black	JS	Theme/Plugin		`.js` + `.css` + `.php`	no

The easiest method is to add a JSON file to the /styles folder using the theme.json format. Another option uses minimal PHP in your functions.php file alongside your theme.json configuration. Both approaches add block styles to the Styles panel in the editor, where users can apply and customize them.

Plugin developers can use the style_data parameter to achieve similar results, including integration with Global Styles.

Other plugin-based methods—using inline_style, style_handle, or JavaScript—don’t support Global Styles editing, but still make the styles selectable in the editor.

Keep in mind that the first three methods (JSON file, theme.json with PHP, and style_data) require WordPress 6.6 or higher. To support older WordPress versions, you’ll need to use one of the other available approaches.

Resources to learn more

Want to learn even more about block styles and block variations? Here are some resources to check out:

YouTube

Builder Basics: Block Styles vs. Block Variations

Make.WordPress Dev Note

Section styles coming to WordPress 6.6

WordPress Developer Blog

Block Editor Handbook

Block Styles

Themes Handbook

Block Style Variations

Details: Category: Dev News

Using Database Comments to Track Columns With Sensitive Data

Learn how to use Laravel's database migrations to create comments on tables and track sensitive data in database applications.

The post Using Database Comments to Track Columns With Sensitive Data appeared first on Laravel News.

Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.

Details: Category: Dev News

Parked Domains Explained: How They Work and What They’re For

Whether you’re mapping out your next business idea or designing a brand-new website, it’s a good idea to buy your preferred domain and “park” it until you’re ready to go live.

A parked domain locks down your chosen name and protects it from competing players. Instead of waiting to build a full-fledged website, you can park a domain with a standalone page that previews what’s coming.

So, how does domain parking work exactly? And when is it a smart move?

We’ll explain parked domains, why you might need one, and provide a step-by-step guide for setting one up.

What is a parked domain?

A parked domain is a registered domain name that isn’t being used to host an active website. Instead, it usually shows a placeholder or landing page to signal that the domain is taken.

Think of domain parking as saving your seat in a crowded library.

You drape your coat over a chair, step away to find the books you need, and come back to your saved seat. The seat remains “taken” even though you’re not sitting there yet.

In the same way, parking a domain lets you claim a web address of your choice. You can hold this address and keep competitors away until your business website is ready for launch.

Add-on domain vs. parked domain

On some hosting platforms, an “add-on domain” refers to running multiple websites from the same hosting account. Each domain points to its own unique site, managed under a single dashboard. While WordPress.com doesn’t use the term “add-on domain,” you can still manage multiple websites under the same WordPress.com account—each with its own domain, content, and design. You can also manage all of your domains from our Hosting Dashboard.

Two domains on the WordPress.com Domains Hosting Dashboard

By contrast, a parked domain is a domain you’ve purchased but haven’t built a full site for yet. You can:

Hold it as a placeholder to reserve the name.
Set it to display a “Coming Soon” page.
Redirect it to one of your active WordPress.com sites.

Let’s say you run a developer-themed coffee blog called java-script-coffee-sip.com. To protect your brand (and catch creative spinoffs), you also register ssh-pls.com and upload-down-code.com. You park those domains and redirect them to your main blog—if someone types them in or clicks a link, they’ll still land on your primary site.

This way, you lock down those clever domains now and decide how to use them later, whether that means launching spin-off sites, redirecting traffic, or keeping them from falling into someone else’s hands.

Telltale signs of a parked domain

Looking at a website and wondering if it’s actually parked? Here’s what to look for:

A generic, templatized landing page: Parked domains display a cookie-cutter design without much customization. They also typically have placeholder content.
Lack of navigation: These sites don’t have menus or sitemaps to show that they’re functional. You’ll find a single landing page with nowhere else to go.
Broker or registrar branding: You’ll see logos or footer text from domain registrars. You may also see display banners like “This domain is for sale” and a domain broker’s contact information in case you’re interested in purchasing it. Here’s an example:

An example of a "make an offer" form on a parked domain

Page filled with ads and links: You might see an ad-heavy page showing links related to the domain’s keywords. This is a tactic for generating passive income through unused, parked domains.
Low or no website traffic: In the end, if you’re still unsure whether a domain is parked, try looking it up with a domain monitoring or SEO tool to check for traffic or activity. If it has minimal visitor activity, it may be parked.

Now that you know how to spot them, you may be wondering why someone would leave a domain sitting idle in the first place.

Let’s look at five common use cases for parked domains.

Five ways you can use parked domains to your advantage

Parked domains aren’t dead weight. Here’s how you can plan ahead and park a domain for future use.

Secure domains for business ideas

The biggest benefit of parking a domain is to secure a relevant web address when you’re just starting a business.

Let’s say your business idea is still a work-in-progress and you don’t have everything in place just yet—but you do have the perfect name for it. You may want to buy the domain name and park it until you iron out all the finer details.

This approach prevents your competitors (current or future) from claiming a web address you need.

Add domain privacy to your plan to safeguard your domain against spammers, identity theft, and other threats. All domains purchased from WordPress.com come with free domain privacy.

Create a coming-soon landing page

A parked domain is a great way to create a “coming soon” landing page and generate buzz before a launch. This will give visitors a glimpse of your brand and build some anticipation.

It can also be an effective way to collect emails from potential customers interested in your brand so you can notify them when you launch.

For example, some domains display a minimal page with a launch message, while others include a logo and preview content.

A coming soon webpage on a parked domain with a blue picture of hills and sky

Redirect from secondary to primary domains

Parked domains can also protect your brand.

What if your main site is example.com, but somebody else (potentially a competitor) picks up the domain example.net? This can create brand confusion and likely dilute your authority in the long run.

Because of this, you can buy and park a few variations of your domains, then set up redirects to funnel all traffic from these sites to your main website. The cost of parking and redirecting multiple domains is relatively low compared to the protection they offer.

Protect high-value domain names

Some domains are valuable simply because they’re short, memorable, and easy to type. Even if you don’t have immediate plans for them, parking these domains lets you reserve naming assets that could support future projects or brand extensions.

You might eventually use a high-value domain to launch a new business, spin off a campaign site, or build an affiliate project. And if your needs change, you’ll have the flexibility to explore other options, like transferring it to a partner or selling it to someone who can put it to good use.

Monetize through domain parking ads

If you’re not ready to launch a full site yet, you can use your parked domain to display a basic landing page with relevant, unobtrusive ads. This can help you recoup some of the registration costs while your plans are still in motion.

It’s not a high-earning tactic, but it can be a lightweight way to make practical use of a domain that would otherwise sit idle.

How to purchase and park a domain on WordPress.com

It’s easy to purchase and park domains with WordPress.com. Follow these steps to get started:

1. Purchase your domain

If you don’t already own a domain, purchase one through WordPress.com directly.

Find your preferred domain name and associated costs here. If the original name isn’t available, WordPress.com will also provide you with a few variants.

The Choose a domain name page on WordPress.com with mysupercoolblogname.com typed into the search bar

2. Connect your domain to your website

During checkout, decide whether to attach your domain to a new or existing site. You can choose either option to set up your landing page for parking this domain, or just buy a domain now and set up the site later.

The Choose how to use your domain page on WordPress.com with three options: just buy a domain, new site, and existing WordPress.com site

Once you complete the checkout process, you’ll get the domain name free for the first year if you purchase an annual WordPress.com hosting plan.

3. Create a parking landing page

When you’ve ticked off all the above steps, create a basic placeholder page based on your domain’s purpose.

If you’re parking this domain for an upcoming business, create a “coming soon” page or an email waitlist. If you want to sell the domain, add your contact details for interested buyers to reach you.

Alternatives to explore for a parked domain you want

Let’s consider another scenario: What if the domain you want is already parked?

It happens all the time—but it’s not the end of the road.

Here are a few alternatives you can try:

Contact the owner with an inquiry

The first order of business when you want to buy a parked domain is to contact the owner.

Most parked domains include the owner’s contact information if they’re willing to sell.

Send a transparent, professional inquiry showing interest in purchasing the domain. Avoid mentioning how much you can pay to keep some space for negotiations.

Make sure you explain how you plan to use the domain. Some owners care more about the future of their domains beyond just the sale price.

Make an offer through a broker

If direct contact with the owner fails, reach out to a domain broker to negotiate a deal on your behalf.

By working with a broker, an intermediary can use their hands-on experience to help negotiate a favorable deal. While brokers charge a percentage of the final sale price or a flat fee, their negotiation tactics might give you a significantly lower acquisition cost.

Look for variations of the domain

If all efforts fail and your first-choice domain is out of reach, you can consider some of these variations:

Extensions: Explore different extensions instead of the one you originally wanted—we have domains ending in everything from .com and .net to .dog and .christmas (yes, really).
Prefixes/suffixes: Add a relevant word before or after your core term to create a new variation.
Hyphens: Add hyphens between words to create a new domain. However, avoid adding too many hyphens, as they can be confusing for users to type and difficult to memorize.

Wait for the domain registration to expire

If you buy a domain, you have to renew the registration periodically. In case the current owner fails to renew, the domain becomes available for registration again—this is one way to acquire a parked domain.

Use a domain monitoring service to track your desired domain and get notified if it expires or becomes available for purchase, but remember that this approach requires patience and comes with no guarantees.

Turn idle domains into opportunities

The internet moves fast, so it’s worth securing your ideal domain now—even if your full vision is still in progress.

Ready to purchase a domain? Check out WordPress.com’s domain registry to find whether your preferred domain is available. If it is, you can buy it in just a few clicks.

And when you’re ready to launch, WordPress.com makes it easy to turn your parked domain into a fast, secure, and fully customizable website.

Purchase a domain Explore WordPress.com hosting

Parked domains FAQs

Wondering how it all works in practice? Let’s clear up a few common questions.

Is parking a domain worth it?

Parking a domain may be worth it to protect your brand identity and secure a specific domain for future projects. It’s an inexpensive way to maintain your digital presence while keeping competitors at bay.

How long can I park a domain?

You can park a domain for as long as you want by renewing your registration. Most registrars require an annual renewal, but you might also find multi-year options for longer-term parking.

For example, WordPress.com has different payment options for domains. Plus, your domain name is free for the first year when you subscribe to an annual WordPress.com hosting plan.

The WordPress.com checkout page for a domain with all of the payment options listed

Is it safe to use parked domains?

Yes, it’s perfectly safe to use parked domains as long as you maintain control and use a trusted parking or registrar service.

As a safety practice, use your registrar’s dashboard to lock the domain, preventing the threat of unwanted transfers.

What is the difference between a redirect and a parked domain?

A redirected domain automatically forwards visitors to another URL, usually your primary website. A parked domain, on the other hand, is a domain that doesn’t host a full website. It might display a placeholder page, a “coming soon” message, ads, or simply remain inactive.

Some parked domains can be set up to redirect, but not all redirects involve parked domains. You can think of domain parking as holding a domain for future use, whether or not you choose to forward it elsewhere.

Details: Category: Dev News

Managing Encrypted Environment Variables In Laravel With Veil

Veil is a Laravel package designed to enhance the management of encrypted environment variables in your Laravel or Laravel Zero applications.

The post Managing Encrypted Environment Variables In Laravel With Veil appeared first on Laravel News.

Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.

Details: Category: Dev News

What Meta Descriptions Do and How They Help Drive Traffic

Meta descriptions might not appear on the frontend of your site for your readers to see, but they play a significant role behind the scenes. These short blurbs can influence whether someone clicks through from search or scrolls right on past.

In this post, we’ll break down what meta descriptions are, why they matter, and how to write descriptions that actually get clicks.

Keep your title tag in mind Get aligned with search intent Keep voice search in mind Leverage emotional sentiment Include calls to action

Updating meta descriptions on WordPress websites

Jetpack Other plugins

Go optimize your meta descriptions

What are meta descriptions?

A meta description is a line of text in web pages that summarizes their contents. Have you ever seen the summaries underneath the blue links on search results pages? Those are meta descriptions. Here is an example direct from Google:

The Google search result for the Google about page with a title and meta description — Unsurprisingly, Google knows how to write a solid meta description.

Meta descriptions may also appear in link previews on social media posts, text messages, and chat apps. When written as HTML, they are wrapped in a <meta> tag within the <head> section of your page.



<meta name="description" content="INSERT YOUR META DESCRIPTION HERE" />

You can also see the meta description on any web page by right-clicking and selecting View Page Source. Here is an example from the entertainment website Polygon:

The page source code for the polygon.com website with the meta description tag underlined in orange

Meta descriptions are closely related to title tags, which appear as the actual blue links in search results. Together, they tell search engines and users what your site’s pages (from your homepage to individual blog posts and pages) are about.

How do meta descriptions impact SEO?

Unlike title tags, meta descriptions do not directly influence search engine rankings. However, they do affect how your pages appear in search results and tell users why they should click.

Reddit user Neither-Emu7933 summarized this concept well:

A description of how meta descriptions work from reddit user Neither-Emu7933

Think of your meta description as a brief pitch—it won’t directly boost your content rankings, but it can help it win the click. Paired with a strong title tag, it’s your best chance to stand out in a crowded search result.

What happens if pages are missing meta descriptions?

If a page is missing a meta description, the short answer is that nothing bad is likely to happen. But the long answer is a bit more nuanced. Meta descriptions can influence click-through rates, so leaving them out means missing an opportunity to shape how your content appears in search results.

If the meta description tag is missing, then Google will use other text from the page to generate its own snippet. Some people prefer to let Google handle meta descriptions instead of writing one manually. In fact, former Googler Matt Cutts once said he doesn’t include meta descriptions on all of his blog posts:

So should you leave meta descriptions blank? Google’s own AI says that it may be risky:

A search result for 'what happens if I don't add meta descriptions' and the Google AI summary

Leaving meta descriptions blank can result in inaccurate page descriptions and, therefore, less search traffic.

Do meta descriptions need to be unique?

Duplicative meta descriptions are confusing for search engines and unhelpful for users, so the meta descriptions across your website should all be unique.

If your site or blog has many posts and pages that are missing meta descriptions, writing unique meta descriptions for each one could take a long time. In this instance, we recommend following Matt Cutts’ timeless advice from the video we shared earlier in this post:

Include meta descriptions on your most important pages.
Make sure your meta descriptions are unique.
Leave the rest of your meta descriptions blank.

Once you’ve done that, make it a habit to include meta descriptions on new pages and posts. This is a compromise between time-consuming manual effort and setting yourself up for future success.

How long should meta descriptions be?

The traditional advice is that meta descriptions should be 150 characters or less. This will ensure search engines don’t cut them off. However, this isn’t the whole story.

a search result for Bing with the meta description cut off as indicated by ...

Google measures meta description length in pixels rather than characters. Depending on the specific letters, words, and numbers in your meta description, the total maximum length may be more or less than 150 characters.

Sometimes Google will overwrite the meta description you wrote and use text from the page itself to create a new meta description. Generally, Google will do this if your meta description is too short, or if it thinks it can create an alternative that’s more useful for the reader.

In these instances, the meta description that users see may be more than 300 characters. This makes it difficult to confidently say how long they should be.

So what should you do? As a best practice, stick with the 150-character guideline (but be aware that this isn’t a firm rule).

Using tools to preview your meta descriptions

It’s nice to actually see how meta descriptions will appear in search results before you publish a page. Fortunately, there are plenty of free tools you can use to preview them. Here are a few:

The Portent Title tag and Meta Description tester page — Free tools can help you preview title tags and meta descriptions before you publish them.

Some simple (and overlooked) tips for writing meta descriptions

Ready to get serious about writing meta tags? They aren’t difficult to write, but there are some tips and general best practices you can follow to make sure you get them right.

Keep your title tag in mind

Search engine users will see your meta descriptions underneath your title tags. Keep this in mind when writing them, and ensure they read well together and accurately represent your content.

Need help writing title tags too? Here are some tips for writing excellent title tags to boost your search traffic.

Get aligned with search intent

If you’ve never heard the term “search intent,” it means understanding what a user is trying to do when they search for a specific keyword. There are a few different types of search intent:

Navigational intent means the user is looking for a specific website or page.
Informational intent applies when someone seeks an answer to a question or wants to learn more about a topic.
Commercial intent involves researching products or services before making a decision.
Transactional intent indicates the user is ready to buy a product or service.

When writing meta descriptions, ask yourself what someone looking for that specific page is trying to do, and promise them that the page will provide precisely what they are looking for.

Keep voice search in mind

When crafting meta descriptions, remember voice search and visitors who use screen readers.

Try reading your meta description out loud to see how it sounds. If something sounds clunky or awkward, consider rewriting it to ensure that it’s accessible to all.

Leverage emotional sentiment

Writing a meta description is like writing any other copy or content on your site.

Since emotional language drives action, here are 801 power words that can help make your meta description copy more motivating.

Include calls to action

Meta descriptions are essentially ads for web pages. They should motivate the reader to click through to your site (instead of a different search result). If you’ve never written a call-to-action before, start with this guide from Barefoot Writer.

Updating meta descriptions on WordPress websites

All of the advice we’ve shared so far applies no matter which CMS or website builder you choose. But this is the WordPress.com blog; if you’re here, you probably want to know how to implement better meta descriptions on your own WordPress site.

Here are a few options for updating your meta descriptions:

Jetpack

Every WordPress.com website comes with Jetpack, which enables tons of awesome features, and sites on the Business plan and above can use Jetpack’s SEO features to edit title tags and meta descriptions.

If your site is hosted with a different provider, you can use Jetpack’s SEO tools too.

Other plugins

There are several popular WordPress SEO plugins that enable title tag and meta description editing (and a whole lot more). Here are three options:

WordPress.com users can use third-party plugins on the Business plan and above.

Go optimize your meta descriptions

If you take anything away from this article, it should be this: meta descriptions may be short, but they can influence how often your pages appear and get clicked in search results.

Now you know how to write ones that work, so give your pages the click-worthy summaries they deserve. Want to keep sharpening your SEO skills? Check out our guide to optimizing your WordPress.com site for search.

Details: Category: Dev News

Page 4 of 1455