What I’ve found, though, is that the :target pseudo-class seems relatively unexplored territory in this area of CSS hacking. It’s an underrated powerful CSS feature when you think about it: :target allows us to style anything based on the selected jump link, so we have a primitive version of client-side routing built into the browser! Let’s go mad scientist with it and see where that takes us.
Unbeatable AI in CSS
Did I type those words together? Are we going to hack CSS so hard that we hit the singularity? Try to beat the stylesheet below at Tic Tac Toe and decide for yourself.
The stylesheet will sometimes allow the game to end in a draw, so you at least have a smidge of hope.
No need to worry! CSS hasn’t gone Skynet on us yet. Like any CSS hack, the rule of thumb to determine whether a game is possible to implement with CSS is the number of possible game states. I learned that when I was able to create a 4×4 Sudoku solver but found a 9×9 version pretty darn near impossible. That’s because CSS hacks come down to hiding and showing game states based on selectors that respond to user input.
Tic Tac Toe has 5,478legal states reachable if X moves first and there’s a famous algorithm that can calculate the optimal move for any legal state. It stands to reason, then, that we can hack together the Tic Tac Toe game completely in CSS.
OK, but how?
In a way, we are not hacking CSS at all, but rather using CSS as the Lord Almighty intended: to hide, show, and animate stuff. The “intelligence” is how the HTML is generated. It’s like a “choose your own adventure” book of every possible state in the Tic Tac Toe multiverse with the empty squares linked to the optimal next move for the computer.
We generate this using a mutant version of the minimax algorithm implemented in Ruby. And did you know that since CodePen supports HAML (which supports Ruby blocks), we can use it secretly as a Ruby playground? Now you do.
Each state our HAML generates looks like this in HTML:
With a sprinkling of surprisingly straightforward CSS, we will display only the currently selected game state using :target selectors. We’ll also add a .c class to historical computer moves — that way, we only trigger the handwriting animation for the computer’s latest move. This gives the illusion that we are only playing on a single gameboard when we are, in reality, jumping between different sections of the document.
/* Game's parent container */
.b, body:has(:target) #--------- {
/* Game states */
.s {
display: none;
}
}
/* Game pieces with :target, elements with href */
:target, #--------- {
width: 300px;
height: 300px; /
left: calc(50vw - 150px);
top: calc(50vh - 150px);
background-image: url(/path/to/animated/grid.gif);
background-repeat: no-repeat;
background-size: 100% auto;
/* Display that game state and bring it to the forefront */
.s {
z-index: 1;
display: inline-block;
}
/* The player's move */
.x {
z-index: 1;
display: inline-block;
background-image: url("data:image/svg+xml [...]"); /** shortened for brevity **/
height: 100px;
width: 100px;
}
/* The browser's move */
circle {
animation-fill-mode: forwards;
animation-name: draw;
animation-duration: 1s;
/* Only animate the browser's latest turn */
&.c {
animation-play-state: paused;
animation-delay: -1s;
}
}
}
When a jump link is selected by clicking an empty square, the :target pseudo-class displays the updated game state(.s), styled so that the computer’s precalculated response makes an animated entrance (.c).
Note the special case when we start the game: We need to display the initial empty grid before the user selects any jump link. There is nothing to style with :target at the start, so we hide the initial state — with the:body:has(:target) #--------- selector — once a jump link is selected. Similarly, if you create your experiments using :target you’ll want to present an initial view before the user begins interacting with your page.
Wrapping up
I won’t go into “why” we’d want to implement this in CSS instead of what might be an “easier” path with JavaScript. It’s simply fun and educational to push the boundaries of CSS. We could, for example, pull this off with the classic checkbox hack — someone did, in fact.
Is there anything interesting about using :target instead? I think so because:
We can save games in CSS! Bookmark the URL and come back to it anytime in the state you left it.
There’s a potential to use the browser’s Back and Forward buttons as game controls. It’s possible to undo a move by going Back in time or replay a move by navigating Forward. Imagine combining :target with the checkbox hack to create games with a time-travel mechanic in the tradition of Braid.
Share your game states. There’s the potential of Wordle-like bragging rights. If you manage to pull off a win or a draw against the unbeatable CSS Tic Tac Toe algorithm, you could show your achievement off to the world by sharing the URL.
It’s completely semantic HTML. The checkbox hack requires you to hide checkboxes or radio buttons, so it will always be a bit of a hack and painful horse-trading when it comes to accessibility. This approach arguably isn’t a hack since all we are doing is using jump links and divs and their styling. This may even make it — dare I say —“easier” to provide a more accessible experience. That’s not to say this is accessible right out of the box, though.
Developers suffer in the great multitudes whom their sacred block-based websites cannot reach.
Johannes Gutenberg (probably)
Long time WordPresser, first time Gutenberger here. I’m a fan even though I’m still anchored to a classic/block hybrid setup. I believe Johanes himself would be, too, trading feather pens for blocks. He was a forward-thinking 15th-century inventor, after all.
My enthusiasm for Gutenberg-ness is curbed at the theming level. I’ll sling blocks all day long in the Block Editor, but please, oh please, let me keep my classic PHP templates and the Template Hierarchy that comes with it. The separation between theming and editing is one I cherish. It’s not that the Site Editor and its full-site editing capabilities scare me. It’s more that I fail to see the architectural connection between the Site and Block Editors. There’s a connection for sure, so the failure of not understanding it is more on me than WordPress.
The WP Minute published a guide that clearly — and succinctly — describes the relationships between WordPress blocks, patterns, and templates. There are plenty of other places that do the same, but this guide is organized nicely in that it starts with the blocks as the lowest-level common denominator, then builds on top of it to show how patterns are comprised of blocks used for content layout, synced patterns are the same but are one of many that are edited together, and templates are full page layouts cobbled from different patterns and a sprinkle of other “theme blocks” that are the equivalent of global components in a design system, say a main nav or a post loop.
The guide outlines it much better, of course:
Gutenberg Blocks: The smallest unit of content
Patterns: Collections of blocks for reuse across your site
Synced Patterns: Creating “master patterns” for site-wide updates
Synced Pattern Overrides: Locking patterns while allowing specific edits
Templates: The structural framework of your WordPress site
That “overrides” enhancement to the synced patterns feature is new to me. I’m familiar with synced patterns (with a giant nod to Ganesh Dahal) but must’ve missed that in the WordPress 6.6 release earlier this summer.
I’m not sure when or if I’ll ever go with a truly modern WordPress full-site editing setup wholesale, out-of-the-box. I don’t feel pressured to, and I believe WordPress doesn’t care one way or another. WordPress’s ultimate selling point has always been its flexibility (driven, of course, by the massive and supportive open-source community behind it). It’s still the “right” tool for many types of projects and likely will remain so as long as it maintains its support for classic, block, and hybrid architectures.
Over the past few months, I’ve been diving deep into what people really think about WordPress’ block editor – Gutenberg. I thought this was going to be a fun project. I analyzed over 340 opinions from platforms like Reddit, Twitter, YouTube, and WordPress.org. I also spoke with developers, colleagues, and other professionals in the WordPress community to get a well-rounded perspective.
In there, I noted that VoiceOver respects the full text and announces it.
I started wondering: What if I or someone else wanted to read the full text but didn’t have the assistive tech for it? It’s almost a selfish-sounding thing because of long-term muscle memory telling me I’m not the user. But I think that’s a valid request for a more inclusive experience. All folks should be able to get the full content, visually or announced.
I didn’t want to make the same demo, so I opted for something a little different that poses similar challenges, perhaps even more so. This is it:
I know, not the loveliest thing ever. But it’s an interesting case study because:
There’s an HTML <button> in there to trigger the auto-height transition.
This setup does what my MDN experiment doesn’t: give users without assistive tech a path to the full content. Right on, ship it! But wait…
Now VoiceOver (I’m sorry that’s all I’ve tested in) announces the button. I don’t want that. I don’t even need that because a screen reader already announces the full text. It’s not like someone who hears the text needs to expand the panel or anything. They should be able to skip it!
But should we really “hide” the button? So much conventional wisdom out there tells us that it’s terrible to hide and disable buttons. Any control that’s there for sighted readers should be present for hearing listeners as well.
If we were to simply drop disabled="true" on the button, that prevents the screen reader from pressing the button to activate something needlessly. But now we’ve created a situation where we’ve disabled something without so much as an explanation why. If I’m hearing that there’s a button on the page and it’s disabled (or dimmed), I want to know why because it sounds like I might be missing out on something even if I’m not. Plus, I don’t want to disable the button by default, especially for those who need it.
This is where “real world” Geoff would likely stop and question the pattern altogether. If something is getting this complicated, then there’s probably a straighter path I’m missing. But we’re all learners here, so I gave that other Geoff a shiny object and how he’s distracted for hours.
Let’s say we really do want to pursue this pattern and make it where the button remains in place but also gives assistive tech-ers some context. I know that the first rule of ARIA is “don’t use ARIA” but we’ve crossed that metaphorical line by deciding to use a <button>. We’re not jamming functionality into a <div> but are using a semantic element. Seems like the “right” place to reach for ARIA.
We could “hide” the button this way:
<!-- NOPE! -->
<button aria-hidden="true">Show Full Text</button>
Buuuut, slapping aria-hidden="true" on a focusable element is not considered a best practice. There’s an aria- approach that’s equivalent to the disabled attribute, only it doesn’t actually disable the button when we’re not using a screen reader.
<button aria-disabled="true">Show Full Text</button>
Cool, now it’s hidden! Ship it. Oh, wait again. Yes, we’ve aria-disabled the button as far as assistive tech is concerned, but it still doesn’t say why.
Still some work to do. I recently learned a bunch about ARIA after watching Sara Soueidan’s “The Other C in CSS” presentation. I’m not saying I “get” it all now, but I wanted to practice and saw this demo as a good learning exercise. I learned a couple different ways we can “describe” the button accessibly:
Using aria-label: If our element is interactive (which it is), we can use this to compose a custom description for the button, assuming the button’s accessible name is not enough (which it’s not).
Using aria-labelledby: It’s like aria-label but allows us to reference another element on the page that’s used for the button’s description.
Let’s focus on that second one for a moment. That might look something like this:
<button aria-disabled="true" aria-labelledby="notice">Show Full Text</button>
<span id="notice">This button is disabled since assistive tech already announces the article content.</span>
The element we’re referencing has to have an id. And since an ID can only be used once a page we’ve gotta make sure this is the only instance of it, so make it unique — more unique than my lazy example. Once it’s there, though, we want to hide it because sighted folks don’t need the additional context — it’s for certain people. We can use some sort of .visually-hidden utility class to hide the text inclusively so that screen readers still see and announce it:
Let’s make sure we’re referencing that in the CSS:
<button aria-disabled="true" aria-labelledby="notice">Show Full Text</button>
<span id="notice" class="visually-hidden">This button is disabled since assistive tech already announces the article content.</span>
This certainly does the trick! VoiceOver recognizes the button, calls it out, and reads the .visually-hidden notice as the button’s description.
I’m pretty sure I would ship this. That said, the markup feels heavy with hidden span. We had to intentionally create that span purely to describe the button. It’s not like that element was already on the page and we decided to recycle it. We can get away with aria-label instead without the extra baggage:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem asperiores reprehenderit, dicta illum culpa facere qui ab dolorem suscipit praesentium nostrum delectus repellendus quas unde error numquam maxime cupiditate quaerat?
<button aria-disabled="true" aria-label="This button is disabled since assistive tech already announces the article content.">Read More</button>
VoiceOver seemed to read things a little smoother this time around. For example, it read the aria-label content right away and announced the button and its state only once. Left to my own devices, I’d call this “baked” and, yes, finally ship it.
But not left to my own devices, this probably isn’t up to snuff. I inspected the button again in DevTools to see how the accessibility API translates it.
This looks off to me. I know that the button’s accessible name should come from the aria-label if one is available, but I also know two other ARIA attributes are designed specifically for describing elements:
aria-description: This is likely what we want! MDN describes it as “a string value that describes or annotates the current element.” Perfect for our purposes. But! MDN notes that this is still in the Editor’s Draft of the ARIA 1.3 specification. It shows up widely supported in Caniuse at the same time. It’s probably safe to use but I’m strangely conservative with features that haven’t been formally recommended and would be hesitant to ship this. I’m sure an actual accessibility practitioner would have a more informed opinion based on testing.
aria-describedby: We can leverage another element’s accessible description to describe the button just like we did with aria-labelledby. Cool for sure, but not what we need right here since I wouldn’t want to introduce another element only to hide it for its description.
But don’t just take it from me! I’m feeling my way through this — and only partially as far as testing. This also might be a completely dumb use case — hiding text is usually a bad thing, including little excerpts like this. I’m expecting we’ll get some tips from smarter folks in the comments.
Here’s that final demo once again. It’s editable, so feel free to poke around.
Searching for the best way to set up WordPress dynamic content? In this post, you'll learn a code-free way to easily add dynamic content directly to the native WordPress block editor (AKA Gutenberg).
Are you looking for the right way to add images to your WordPress website or blog?
By adding images in WordPress correctly, you can improve the visual appeal, accessibility, and SEO of your website. You can even allow users to upload their own images and use them on your site or in your competitions.
In this article, we will show you how to properly add images in WordPress.
The Importance of Correctly Uploading Images in WordPress
Sometimes, users directly copy an image from the source and paste it into their website content. Unfortunately, this can cause problems like slow pages, poor user experience, and poor SEO.
When you add images to your WordPress website, it’s important to do it properly. This means using the right file format, file name, and alt text.
We recommend naming your images with descriptive words separated by dashes. For example, you might use the file name ‘bali-vacation-photo.jpg’ for an image on your travel blog.
Properly adding images also means resizing your images so that they load quickly and look good on all devices. For example, some image formats like JPEG, are more compressed than others, which means that these images will take up less space on your server and will take less time to load.
By using these formats, along with an image compression plugin for the images on your WordPress blog, you can improve the user experience of your website.
Similarly, by using the Image block in WordPress and properly optimizing your images for SEO and alt text, you can make it easier for search engines to index your images.
That being said, let’s see how to properly add images in WordPress. We will cover several methods, and you can use the quick links below to jump to the different sections of our tutorial:
First, you need to open the existing or new page/post where you want to add an image.
Once you are there, click the ‘+’ button in the top left corner of the screen to open the block menu. From here, you must find and add the Image block to the post or page.
Once you have done that, click the ‘Media Library’ button to launch the ‘Select or Upload Media’ prompt on the screen.
From here, you can switch to the ‘Upload Files’ tab if you want to upload an image from your computer.
However, if you want to add an image from the media library, then you can also do that by switching to the ‘Media Library’ tab.
Upon adding an image, you will need to add alt text for it in the left column. This alt text is crucial for image SEO as it helps search engines understand the context of the image. It also allows people with screen readers to see this information about your images.
You can also add a title and caption describing the image in the right column. Captions are the visible text descriptions of your images, while the title will appear when a user hovers their mouse over the image.
First, you need to visit the page or post where you want to add the image from the WordPress dashboard. Once you are there, just click the ‘Add Media’ button to launch the media library.
After that, you can switch to the ‘Upload Files’ tab to upload an image from your computer.
Alternatively, for adding an image from the media library, just switch to the ‘Media Library’ tab.
Upon adding an image, you will need to add alt text and a title for it. You can also add a description and caption if you wish.
You can simply describe the image for all these options. This will help search engine index your image and increase your website’s visibility.
Next, go ahead and click the ‘Insert into Post’ button.
Now, the image will be added to your WordPress post or page.
From here, you can change its alignment by using the alignment icons above the image. You can also further edit an image by clicking on the pencil icon.
This will open the ‘Image details’ prompt on your screen, where you can change the size and add image title attributes, CSS classes, alignment, and more.
Once you are done, just click the ‘Update’ button to save the changes you made.
After that, simply click the ‘Publish’ or Update’ button to save your post.
How to Add Images in the Media Library
If you want, you can also directly add an image to the media library. Keep in mind that after adding an image to the media library, you will still need to open a post or page and insert the Image block.
To add an image from the media library, you must visit the Media » Add New page from the WordPress admin area.
Once you are there, click the ‘Select Files’ button to upload an image from your computer. Then, click the ‘Edit’ link next to the image.
This will take you to the ‘Edit Media’ page, where you can start by changing the title for the image. After that, you can add alt text, a caption, and a description by scrolling down.
Once you have done that, you can also click on the ‘Edit Image’ button.
This will direct you to another page, where you can crop, scale, rotate, or flip the image according to your liking. For detailed instructions, please see our beginner’s guide on how to do basic image editing in WordPress.
Once you are satisfied, just click the ‘Update’ button to save your changes.
This will take you back to the ‘Edit Media’ page, where you have to click on the ‘Update’ button again to store your settings.
You have now successfully added an image to the media library.
Next, visit the post where you want to add this image from the WordPress admin sidebar. Once you are there, click the ‘+’ button to add an Image block to the post.
Next, you need to select the ‘Media Library’ button.
This will launch the ‘Select or Upload Media’ prompt on your screen, where you will notice the image that you uploaded in the media library at the top.
On selecting the image, you will see that its title, alt text, caption, and description have already been added to it from the media library page.
Now, simply click the ‘Select’ button to upload the image to the block editor.
Finally, click the ‘Publish’ or ‘Update’ button to store your settings.
How to Optimize an Image for WordPress SEO
Once you have added an image to a post/page, it is also crucial to optimize it for search engines. Unfortunately, WordPress does not offer any built-in advanced SEO features for images.
Next, head over to the All in One SEO » Search Appearance page from the WordPress admin sidebar and switch to the ‘Image SEO’ tab.
After that, scroll down and click the ‘Activate Image SEO’ button to unlock the feature.
You will now be able to see the Image SEO settings. Here, you will notice different tabs for the title, alt text, caption, description, and filename.
Configure Automatic Image Titles
Once you switch to the ‘Title’ tab on the Image SEO page, you can start by creating a title format for your images using smart tags.
These smart tags will then automatically generate title attributes for your images. This is what a visitor will see when they hover their mouse over your images.
For example, if you want each image title attribute to use the image title and the site title, then you can add these smart tags in the ‘Title Format’ field.
After that, you can also enable the Strip Punctuation option if you want AIOSEO to automatically remove some characters when creating an image title from the filename.
For example, if you use dashes when saving an image file like ‘an-example-image’, then you can choose the ‘Dashes (-)’ option in the ‘Characters to Convert to Spaces’ section.
Once you do that, AIOSEO will automatically remove these dashes and turn them into spaces, making the image title ‘an example image’.
After that, scroll down to the ‘Casing’ section.
From here, you can choose a casing option for your title. We recommend picking sentence case or title case to make your titles more readable.
Configure Automatic Alt Tags
After configuring title settings, switch to the ‘Alt Tag’ tab from the top.
From here, you can use the smart tags next to the ‘Alt Tag Format’ option to automatically generate alt text for all your images.
After that, you can also enable the Strip Punctuation setting if you want characters like dashes (-) or underscores (_) to be converted into spaces.
Similarly, if there are characters like numbers or plus signs (+) that you don’t want AIOSEO to strip when creating the alt text, then you can check the boxes for these options in the ‘Characters to Exclude from Being Stripped’ section.
You can also select a casing for your alt text.
Configure Automatic Captions and Descriptions
To generate automatic captions for your images, switch to the ‘Captions’ tab.
From here, make sure that the ‘Autogenerate Caption on Upload’ option is enabled. You can then select the smart tags that will be used to generate captions for your images.
Next, you can also use the Strip Punctuation feature to exclude or include characters in the captions and choose a casing for them.
Once you are done, you need to switch to the ‘Description’ tab from the top.
From here, make sure that the ‘Autogenerate Description on Upload’ option is enabled. You must also select the smart tags you want to use for generating automatic image descriptions.
Next, you can also use the Strip Punctuation feature to include/exclude characters like underscores, apostrophes, or numbers in the description.
After that, simply select a casing for your image descriptions.
Configure Automatic Filenames
As we mentioned earlier, we recommend giving your image files SEO-friendly file names. You can do this before uploading your images, or AIOSEO can do it for you automatically.
Once you switch to the ‘Filename’ tab from the top, you will notice that AIOSEO has already configured the Strip Punctuation setting for you.
However, if there are any more characters that you want AIOSEO to delete from your image filenames when creating titles or alt text, then you can type those characters into the ‘Words to Strip’ box.
After that, you can also select a casing for your filenames.
Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.
You have now successfully optimized your images for SEO, and AIOSEO will automatically generate titles, alt text, captions, and descriptions for all your images.
You may also want to allow your users to upload their own images to your WordPress website. This can come in handy if you are hosting a contest or running a photography website that accepts user-generated images.
For this, you can use WPForms, which is the best contact form plugin on the market. It comes with a drag-and-drop builder that makes it super easy to create any kind of form you want, including an image submission form.
Upon activation, head over to the WPForms » Add New screen from the WordPress dashboard to launch the form builder.
From here, you need to type a name for your form and then click the ‘Use Snippet’ button under the ‘Simple Contact Form’ template.
This will load the form template in the form builder, where you will notice its preview on the right and the available fields in the left column.
From here, go ahead and drag and drop the File Upload field onto the form and click on it to further customize its settings.
From here, you can change the label and description of the field and even specify the extensions that are allowed.
For example, if you want to allow JPEG and PNG files only, then you must type these options into the ‘Allowed File Extensions’ field. Keep in mind to separate each extension with a comma.
After that, you can also configure the maximum image file size and number of uploads in the left column.
Once you are done, just click the ‘Save’ button to store your settings.
Next, open the page/post where you want to add the image upload form. Once there, click the ‘+’ button in the top left corner of the screen to open the block menu
From here, you need to add the WPForms block to the page/post.
Just choose the image file upload form that you created from the dropdown menu.
Finally, click the ‘Update’ or ‘Publish’ button to store your settings. Now, you can visit your WordPress site to view the form in action, and visitors will be able to submit their images using the form.
Are you looking for a way to create a sticky floating footer bar in WordPress?
A sticky floating footer bar stays visible on your website even when users scroll down on your page. It can help you promote discount offers or social media handles, which can reduce the bounce rate and get more conversions.
In this article, we will show you how to easily create a sticky floating footer bar in WordPress, step by step.
What Is a Floating Footer Bar in WordPress?
A sticky floating footer bar allows you to prominently display important content and news to users.
This bar remains visible to visitors at all times, so they are more likely to click on it and discover more useful content.
Having said that, let’s see how to easily create a sticky floating footer bar in WordPress. We will show you two methods in this tutorial, and you can use the links below to jump to the method of your choice:
Method 1: Create a Sticky Floating Footer Bar With OptinMonster (Recommended)
You can easily create a sticky floating footer bar with OptinMonster. It is the best lead generation and conversion optimization tool on the market that makes it super easy to convert your website visitors into subscribers.
OptinMonster comes with a drag-and-drop builder and premade templates that allow you to create a floating footer bar, slide-in popups, and banners without using any code.
We recommend this method because OptinMonster is super easy to use and offers more customization options than the free plugin method.
Step 1: Install OptinMonster on Your Website
First, you will need to sign up on the OptinMonster website by clicking on the ‘Get OptinMonster Now’ button.
Upon activation, the OptinMonster setup wizard will open up on your screen, where you have to click the ‘Connect Your Existing Account’ button. This will connect your WordPress site with your OptinMonster account.
Once you do that, a new window will open up on your screen.
Here, click the ‘Connect to WordPress’ button to move ahead.
Step 2: Create And Customize the Floating Sticky Footer Bar
Now that you have connected OptinMonster with your website, it’s time to create a sticky floating footer bar.
To do this, you need to visit the OptinMonster » Templates page from the WordPress admin sidebar and select ‘Floating Bar’ as the campaign type.
Once you do that, all the premade templates for the floating bar will load on the screen. From here, you can click the ‘Use Template’ button on the one you want to use.
This will open the ‘Create Campaign’ prompt on the screen, where you can add a name for the floating footer bar that you are about to create. It can be anything you like, as the name won’t be displayed to your visitors.
After that, just click the ‘Start Building’ button.
OptinMonster’s drag-and-drop builder will now be launched on your screen, where you can start customizing your floating footer bar. Here, you will notice a floating bar preview on the right with blocks in the left column.
For example, you can use a countdown timer block if your floating footer bar is promoting a discount offer. This will help create a sense of urgency among users and encourage them to take action.
You can also add a CTA, video, or social media block to the footer bar. For detailed instructions, you can see our tutorial on how to create an alert bar in WordPress.
You can also edit text on the footer bar by clicking on it. This will open the block settings in the left column, where you can adjust them according to your liking.
For example, if you want to change the discount offer in the template, then you can change the button text. After that, you can select the ‘Redirect to a URL’ option and add the page link that you want users to be directed to upon clicking on the button.
Step 3: Configure The Display Rules For Your Floating Footer Bar
Once you are satisfied with your footer bar’s customization, just switch to the ‘Display Rules’ tab from the top.
Here, you can configure when to display the bar on your page. If you want to display the floating footer bar at all times, then you must select the ‘time on page’ option from the left dropdown menu.
After that, choose the ‘is immediate’ option from the dropdown menu on the right.
However, to display the floating footer bar on a specific page, you must select the ‘Page Targeting’ option from the right dropdown menu.
After that, choose the ‘exactly matches’ option from the dropdown menu in the middle and then add a page URL. Once you do that, the floating footer bar will only displayed on the page you chose.
Additionally, you can select the ‘Exit Intent’ option to show the sticky floating footer bar when the user is about to leave your site. You can then configure the exit intent sensitivity and choose the devices where the footer bar will be displayed. This can be handy if you want to reduce your bounce rate.
You can even select the ‘Visitor’s Device’ option if you only want to display the floating footer bar to desktop visitors.
You can also configure the display rules according to the date, time, or scroll distance by selecting the ‘When’ option from the left column.
Method 2: Create a Sticky Floating Footer Bar With a Free Plugin
If you are looking for a free way to create a sticky floating footer bar, then this method is for you. However, keep in mind that you will have limited customization options compared to OptinMonster.
Upon activation, visit the Firebox » Campaigns page from the WordPress dashboard and click the ‘+ New Campaign’ button.
This will open the Firebox campaign library, where you can search for sticky floating bar premade templates.
Next, simply click the ‘Insert’ link under the floating footer bar that you like. Keep in mind that if you select a header bar, then you won’t be able to change its position. You must ensure the template you select is for a footer bar.
The block editor will now open up on your screen, where you can start by adding a name for your floating bar.
After that, you can edit the text in the footer by clicking on it and add new blocks by clicking the ‘+’ button. This will open the block menu, where you can add images, headings, paragraphs, videos, quotes, or list blocks.
For instance, if you want to add social media handles, then you can choose the Social Icons block. After that, you can add social media accounts and links using the block panel.
You can also change the text in the button block and add a link to the page where you want to direct users by clicking on the link icon in the block toolbar.
After that, type in the URL of your choice and press ‘Enter’.
Next, you can scroll down to the ‘Firebox Settings’ section.
Here, you can change the background color, text color, alignment, size, padding, and margin for the floating footer bar.
After that, switch to the ‘Behaviour’ tab from the left column and select ‘Page Load’ as the floating bar trigger point.
Then, use the ‘Delay’ slider to choose a delay timing for the floating bar. For example, if you drag the slider to 15 seconds, then the floating footer bar will be displayed once the user has spent 15 seconds on your site.
If you want the sticky floating footer bar to be displayed immediately, then you can keep the slider at 0.
Next, you can leave other settings as they are or configure them according to your liking.
Once you are done, don’t forget to click the ‘Publish’ button at the top.
Now visit your WordPress site to view the sticky floating footer bar in action.
This is what it looked like on our demo site.
Bonus: Create a Sticky Floating Navigation Menu in WordPress
Apart from adding a sticky footer bar, you might also like to create a sticky floating navigation menu on your WordPress site.
A navigation menu contains links to the most important pages on your WordPress blog and acts as an organizational structure for your website.
If you make this menu sticky, then it will remain visible on your page at all times, even as the user scrolls down on your screen. This can increase engagement and make your website easier to navigate.
Upon activation, visit the Settings » Sticky Menu page from the WordPress dashboard and type #main-navigation next to the ‘Sticky Element (required)’ option.
After that, click the ‘Save Changes’ button to store your settings. You have now successfully created a sticky floating navigation menu.
Do you want to know the difference between padding and margin in WordPress?
In WordPress, padding is the space between the content and the border within a block, while margin is the space between two separate blocks.
In this article, we will show you the difference between padding and margin and how to use them in WordPress.
What Is Padding in WordPress?
The padding feature on your WordPress website is used to create space inside a block.
For example, you can add space inside a Text block to make its layout more visually appealing and prevent text from appearing too close to the borders of the block.
You can also use padding to control how the content flows on your WordPress blog. For instance, if you add padding to the top and bottom of a Text block, you can make it easier for visitors to read the content.
What Is Margin in WordPress?
Margin is the space around the border of a WordPress block and its surrounding elements.
This can help you add space between two different blocks, creating a more spacious and clean layout for your site.
For example, you can add margins to the top and bottom of a Text block so that it remains visible even when the screen is resized.
Plus, you can also use margins to add space between Image and Text blocks to make your website visually appealing and more accessible for users.
What Is the Difference Between Padding and Margin in WordPress?
Here is a quick list of the differences between padding and margin in WordPress:
Padding
Margin
Padding means adding space between the content and the border of the block.
The margin feature adds space outside the border of the block.
Using padding does not affect the other blocks on your website.
Using a margin affects other blocks on your website.
Margins can create space between two different blocks.
How to Use Padding in WordPress
By default, the WordPress full site editor (FSE) comes with the padding feature.
However, keep in mind that if you are not using a block-based theme, then you won’t be able to add padding to your WordPress site unless you use custom CSS.
First, you need to visit the Appearance » Editor page from the WordPress admin sidebar to launch the full site editor.
Once you are there, just choose the page template where you want to add padding to your blocks from the ‘Templates’ sidebar on the left. This sidebar will display all the templates for different pages on your website.
After you have done that, the template that you chose will open up on the screen.
From here, click the ‘Edit’ button to start customizing your page template in the full site editor.
Next, choose the block where you want to add padding. Remember this means that you will be creating space between the content and the border of the block.
This will open the block’s settings in the block panel on the right side of the screen.
From here, you need to scroll down to the ‘Dimensions’ section and click on the three-dotted menu. This will open a prompt where you must select the ‘Padding’ option.
Next, simply use the slider to add padding to your block.
Keep in mind that this feature will add padding to all the sides of the block.
However, if you only want to add padding to the top or bottom of the block, then you can also do that by clicking the ‘Unlink Sides’ icon next to the ‘Padding’ option.
Then, you can use different sliders to add padding to the right, left, bottom, or top of the block.
Once you are done, just click the ‘Save’ button to store your settings.
How to Use Margin in WordPress
Just like padding, the margin feature comes built-in in the WordPress full site editor. However, this feature won’t be available if you are not using a block theme.
First, head over to the Appearance » Editor page from the WordPress dashboard.
Once you are there, choose the page template where you want to add margins from the column on the left.
This will open the page template that you chose on the screen.
From here, just select the ‘Edit’ button to start customizing your template in the full site editor.
Next, choose the block that you want to edit and scroll down to the ‘Dimensions’ section in the block panel on the right.
From here, simply use the sliders to set different margins for the top, bottom, left, and right corners of the block. Using this feature will create space around the block that you chose.
However, if you want to use a single slider to add equal margins around the block, then click the ‘Link Sides’ icon next to the ‘Margin’ option.
The block panel will now display a single ‘Margin Mixed’ slider on the screen that you can use to create equal margins around the block.
Once you are done, don’t forget to click the ‘Save’ button at the top to store your settings.
More Tips for Full Site Editing in WordPress
Other than adding padding and margins to your blocks, you can also use the full site editor to customize your entire WordPress theme.
For example, you can design all your page templates, add your own custom logo, choose brand colors, change the layout, adjust the font size, add background images, and more.
You can also add patterns and different blocks to your website to further customize it. For details, you may want to see our beginner’s guide on how to customize your WordPress theme.
Additionally, you can also use Global Styles to ensure consistency across your site. For more detailed instructions, you may want to see our guide on how to customize colors on your WordPress website.
However, if you don’t like using the full site editor and would prefer more control over your website’s appearance, then you can use SeedProd to build pages and even your entire theme.
It is the best landing page builder on the market that comes with a drag-and-drop builder that makes it super easy to create an amazing theme for your website.
Do you want to change block height and width in WordPress?
By default, WordPress makes it easy to create beautiful content layouts for your posts and pages using blocks. However, sometimes you may want to resize blocks to make them look better.
In this article, we will show you how to easily change block height and width in WordPress.
Why Change Block Height and Width in WordPress?
The block editor enables you to add content to your WordPress website using different blocks, including headings, paragraphs, images, videos, audio, and more.
However, sometimes you may want to change the width or height of a specific block to improve its appearance or the layout of the overall content.
Adjusting block sizes can also ensure that your content is responsive and displays properly on all devices, including phones, tablets, and laptops.
For example, you may have uploaded an image in the content editor, but it is too large and makes the page look unappealing.
Or, you might want to change the size of the heading block to align it better with the content.
By adjusting the width and height of the blocks, you can make your posts and pages look more aesthetically pleasing.
That being said, let’s see how you can easily change block height and width in WordPress.
Method 1: Change the Block Height and Width Using Block Settings
For this method, we will show you how to change a block’s height and width using the default settings offered by WordPress.
Currently, WordPress does not offer the same resizing options for all of the blocks. However, the block editor provides many ways to resize the height and width of different blocks.
Let’s start with the Image block in WordPress.
First, you can change the alignment of the Image block by clicking on the ‘Align’ button in the toolbar above the block.
Here, choosing the ‘Wide Width’ option will make the block the same width as the container.
Or, the ‘Full Width’ alignment option will make the block the entire width of the page.
You can also resize a block by going to the ‘Block Settings’ panel on the right and scrolling down to the ‘Settings’ section. From here, you can resize a block from the ‘Image Size’ dropdown menu.
You can also adjust the block’s width and height by typing the preferred pixel size into the ‘Width’ and ‘Height’ boxes in the ‘Image dimensions’ section.
Below that, you can also adjust the block’s size by percentage.
Another way to resize an Image block is by clicking on the image itself to bring up a blue border with circular anchors.
Then, simply drag these anchors to change the height and width of the image block.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
Method 2: Change the Block Height and Width Using the Columns Block
If the block you want to resize does not come with alignment buttons or resize settings, then this method is for you.
For this method, we will place our block inside the Columns block. It acts as a container where you can add blocks in each column. Then, you can resize those blocks by adjusting the height and width of the columns.
First, you will need to click on the ‘Add Block’ (+) button in the top left corner of the screen.
From here, simply locate and add the Columns block to the content editor. Then, you will be asked to choose a variation.
After that, the column layout will be displayed on the screen, and you can now add the block you want by clicking on the ‘Add Block (+)’ button inside a column.
Once the block has been added, you can resize it by using the ‘Column settings’ located in the right panel.
Once you are done, simply click the ‘Publish’ button to store your changes.
This is how the content looked on our demo website after resizing and aligning two paragraph blocks inside a two-column block.
Method 3: Change the Block Height and Width Using the Group Block
You can also adjust the width and height of blocks using the Group block. It allows you to group different blocks and style them together.
First, you will need to click on the ‘Add Block’ (+) button at the top. Next, you must locate and add the Group block to the content editor.
Once you do that, the Group block will display three different layout options that you can choose from. For this tutorial, we will use the ‘Group’ layout.
After that, the ‘Add Block’ button will be displayed on the screen. You can now add any block you want.
In this tutorial, we will be adding and resizing a Heading block, a Paragraph block, and an Image block.
To add multiple blocks to the Group, you must click on the ‘Select Group’ button from the block toolbar.
Once the Group is selected, simply click on the ‘Add Block’ button (+) at the bottom.
Clicking on the ‘Select Group’ button also opens up the block settings in the right column. From here, you can easily adjust the layout, justification, and orientation of all the blocks.
Changing the layout will also change the different block sizes. You can configure these settings until you are happy with the result.
Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.
This is how the Group block looked on our demo website.
Method 4: Change the Block Height Using the Cover Block
This resizing method is for you if you want to use the Cover block. It enables you to display text and other content on top of an image or video.
First, you will need to click on the ‘Add Block’ (+) button at the top and find the Cover block.
Once you have done that, you will be asked to choose a color or upload an image from the WordPress media library. This image or color will be used as the background for the Cover block.
Next, simply drag and drop any block you want into the Cover block.
After that, you need to click on the Cover block to open up its block settings in the right column.
From here, scroll down to the ‘Dimensions’ panel, where you can adjust the height of the Cover block using pixels.
Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.
Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd
You can easily create beautiful and aesthetically-pleasing pages using the SeedProd plugin.
It is the best WordPress page builder on the market that allows you to create landing pages using blocks. These blocks are also super easy to customize and resize according to your needs.
Do you want to change the background color of the WordPress block editor for admins?
Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.
In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.
Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.
Why Change the Background Color of the Block Editor in WordPress?
You may want to change the background color of the WordPress block editor for a number of reasons.
However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.
Another reason for changing the background color could be personal preference.
For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.
That being said, let’s see how you can easily change the WordPress editor background color.
How to Change the WordPress Editor Background Color
You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.
However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.
Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.
From here, you have to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.
Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.
After that, you need to copy and paste the following code into the ‘Code Preview’ box.
Next, you need to look for the following code in the PHP snippet you just pasted.
background-color: #bee0ec;
Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.
After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.
Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.
After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’
Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.
Now, go visit the block editor from the admin sidebar.
This is how the block editor looked on our site after adding the CSS code snippet.
Do you want to use icon fonts in the WordPress post editor?
Icon fonts allow you to easily use images and symbols in text. They are lightweight and won’t slow down your site, and they can be easily scaled to any size and styled like any other text font.
In this article, we’ll show you how to easily use icon fonts in the WordPress post editor without writing any HTML code.
We’ll show you multiple methods, each one using a slightly different approach than the other. You can choose one that works best for you.
Method 1. Adding Icon Fonts in WordPress Post Editor using JVM Rich Text Icons
This method is recommended to use on any kind of WordPress website. It is easy to use and works seamlessly with the block editor.
Upon activation, you can simply edit a WordPress post or page or create a new one. Inside the post editor, add a new paragraph block, and you’ll see a new Flag icon in the block toolbar.
Clicking on it will show a popup of icons to choose from. It uses the popular Font Awesome icon fonts by default.
You can use the search to look for an icon or simply scroll down to find the icon you want, and then click to add it.
One advantage of using icon fonts is that you can use CSS to style them.
However, since you are already using the block editor, you can simply use the built-in color tools to style the icons.
The plugin allows you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.
Here is an example of using icon fonts and block options to style three columns.
Another useful example of using icon fonts is with buttons.
This time we are using inline icon fonts alongside some text for the two buttons.
Feel free to use the block editor tools like text alignment, colors, spacing, and more to get the most out of the icon fonts.
Method 2. Add Icon Fonts in WordPress Post Editor with Font Awesome
This method requires you to add shortcodes in the post editor to display icon fonts. You can use this method if you don’t need to regularly use icon fonts in your WordPress posts and pages.
Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.
After entering your license key and clicking ‘Verify Key,’ you can start working on your landing page.
Simply go to the SeedProd » Landing Pages page and click on the ‘Add New Landing Page’ button.
After that, you will be asked to choose a template for your landing page.
SeedProd comes with a bunch of beautiful designs that you can use as a starting point, or you can start with a blank template and design the whole thing yourself.
For this tutorial, we will be using a pre-designed template. Simply click on a template to select it and continue.
Next, you will be asked to provide a title for your landing page and choose a URL.
After entering them, click on the ‘Save and Start Editing the Page’ button to continue.
SeedProd will now launch the page builder interface. It is a drag-and-drop design tool where you can simply point and click on any item to edit it.
You can also drag and drop blocks from the left column to add new elements to your design.
For the sake of this tutorial, we are going to add the Icon block.
After you add the block, you can simply click to edit its properties.
The left column will change to show the options for the Icon block. You can click into the ‘Icon’ section to the left and choose a different icon image or change the color and style.
Another way to use icons in SeedProd is by adding the ‘Icon Box’ block.
The difference between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text along with your chosen icon.
This is one of the most common ways to use icons when displaying product features, services, and other items.
You can place your icon box inside columns, choose colors, and adjust the icon size to your liking.
Additionally, you can also format the accompanying text using SeedProd’s formatting toolbar.
Once you are finished editing your page, don’t forget to click on the ‘Save’ button at the top right corner of the screen.
If you’re ready, you can click ‘Publish’ for the page to go live, or you can click on ‘Preview’ to make sure it looks like you want it to.
You can also click on ‘Save as Template’ so you can reuse this design with SeedProd on other parts of your website.
Here is how the icon fonts looked on our test website.
This is the April 2023 edition of “This Month in WordPress with CodeinWP.” In the biggest news of the month, WordPress 6.2 went live, bringing a number of improvements to the Site Editor experience. It was, however, a day late – learn why below!
This is one of those “classless” CSS libraries — CSS that you apply to semantic HTML to apply a nice look. You apply no classes or any other selectors — it totally removes that mental exercise. The only selectors it uses are HTML elements. A perfect sort of choice for things like “I just need to style this one-pager of HTML quick”, Markdown output, or dare I say, a demo Pen.
Almond.css takes a cool approach that I haven’t seen before: it allows you to customize everything from adjusting --custom-properties at the root level.
So you can use it “totally raw”, like this:
Or customize stuff likes fonts, spacing, and colors like this:
Gotta love a good slider component! There have been so many over the years. I made my own back in the day, using jQuery, called the AnythingSlider. I remember the Pei Wei website used it for a while and I knew I had made it haha.
I think we see so many of these because they are a microcosm of the web itself. It’s a semantic challenge, an accessibility challenge, a performance challenge, a developer ergonomics challenge, a UX challenge, a design challenge, and even a marketing challenge.
I’ve had the animation tool Rive on my list of bookmarks to check out for a while. I recently got around to making an account and giving it a shot.
I was immediately interested in what the final output/export is. Because, of course, I want to know how I can use it… to connect it to my own web work. I’m not sure what I expected. Maybe SVG output with a bunch of inline JavaScript to control it? It’s not that, though. Ultimately you get a .riv file.
Then you use one of their runtime libraries to ultimately display the animation. I opened one of their demos, exported the animation, and here I am using the JavaScript runtime and CodePen Asset Hosting to display the animation:
They have loads of interesting use cases and demos on their website. For the web, it ultimately ends up as a <canvas>. I don’t know much about canvas and accessibility, but I imagine you’re kind on your own there to do the best you can do.
Anywho — just a 10-second glance here. The big takeaway here is that their Get Started button is the GOAT:
This article is not a definitive guide to :has(). It’s also not here to regurgitate what’s already been said. It’s just me (hi 👋) jumping on the bandwagon for a moment to share some of the ways I’m most likely to use :has() in my day-to-day work… that is, once it is officially supported by Firefox which is imminent.
When that does happen, you can bet I’ll start using :has() all over the place. Here are some real-world examples of things I’ve built recently and thought to myself, “Gee, this’ll be so much nicer once :has() is fully supported.”
Avoid having to reach outside your JavaScript component
Have you ever built an interactive component that sometimes needs to affect styles somewhere else on the page? Take the following example, where <nav> is a mega menu, and opening it changes the colors of the <header> content above it.
I feel like I need to do this kind of thing all the time.
This particular example is a React component I made for a site. I had to “reach outside” the React part of the page with document.querySelector(...) and toggle a class on the <body>, <header>, or another component. That’s not the end of the world, but it sure feels a bit yuck. Even in a fully React site (a Next.js site, say), I’d have to choose between managing a menuIsOpen state way higher up the component tree, or do the same DOM element selection — which isn’t very React-y.
With :has(), the problem goes away:
header:has(.megamenu--open) {
/* style the header differently if it contains
an element with the class ".megamenu--open"
*/
}
No more fiddling with other parts of the DOM in my JavaScript components!
Better table striping UX
Adding alternate row “stripes” to your tables can be a nice UX improvement. They help your eyes keep track of which row you’re on as you scan the table.
But in my experience, this doesn’t work great on tables with just two or three rows. If you have, for example, a table with three rows in the <tbody> and you’re “striping” every “even” row, you could end up with just one stripe. That’s not really worth a pattern and might have users wondering what’s so special about that one highlighted row.
What to get fancier? You could also decide to only do this if the table has at least a certain number of columns, too:
table:has(:is(td, th):nth-child(3)) {
/* only do stuff if there are three or more columns */
}
Remove conditional class logic from templates
I often need to change a page layout depending on what’s on the page. Take the following Grid layout, where the placement of the main content changes grid areas depending on whether there’s a sidebar present.
That’s something that might depend on whether there are sibling pages set in the CMS. I’d normally do this with template logic to conditionally add BEM modifier classes to the layout wrapper to account for both layouts. That CSS might look something like this (responsive rules and other stuff omitted for brevity):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar {
grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
grid-template-areas: '. m m m m m m m m m . .';
}
CSS-wise, this is totally fine, of course. But it does make the template code a little messy. Depending on your templating language it can get pretty ugly to conditionally add a bunch of classes, especially if you have to do this with lots of child elements too.
Contrast that with a :has()-based approach:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) {
grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) {
grid-template-areas: '. m m m m m m m m m . .';
}
Honestly, that’s not a whole lot better CSS-wise. But removing the conditional modifier classes from the HTML template is a nice win if you ask me.
It’s easy to think of micro design decisions for :has() — like a card when it has an image in it — but I think it’ll be really useful for these macro layout changes too.
Better specificity management
If you read my last article, you’ll know I’m a stickler for specificity. If, like me, you don’t want your specificity scores blowing out when adding :has() and :not() throughout your styles, be sure to use :where().
That’s because the specificity of :has() is based on the most specific element in its argument list. So, if you have something like an ID in there, your selector is going to be tough to override in the cascade.
/* specificity score: 0,1,0.
Same as a .standard-page--with-sidebar
modifier class
*/
.standard-page:where(:has(.sidebar)) {
/* etc */
}
The future’s bright
These are just a few things I can’t wait to be able to use in production. The CSS-Tricks Almanac has a bunch of examples, too. What are you looking forward to doing with :has()? What sort of some real-world examples have you run into where :has() would have been the perfect solution?
Notice that some HTML attributes have been added to the link, rel="noopener" and rel="noreferrer". These attributes are added to address a security vulnerability.
The problem is that JavaScript code can be used to allow a new tab to get control of its referring window. If you link to an external website affected by the malicious code, then that website can use the window.opener property in JavaScript to change the original page (your website) to steal information and spread malicious code.
WordPress adds rel="noopener" to prevent the new tab from taking advantage of this JavaScript feature. Similarly, the rel="noreferrer" attribute prevents passing the referrer information onto the new tab.
How Does rel=”noopener” Affect Your WordPress SEO?
It doesn’t.
Even though the rel="noopener" attribute improves WordPress security, some users avoid using it because they think it will impact their WordPress SEO.
What’s the Difference Between “noopener” and “nofollow”?
It’s easy to confuse rel="noopener" with rel="nofollow". However, they are completely separate attributes.
The noopener attribute prevents your website from cross-site hacking and improves WordPress security.
On the other hand, the nofollow attribute prevents your website from passing on SEO link-juice to the linked website.
Search engines look for and consider the nofollow attribute when following a link on your website. However, they do not give any consideration to the noopener tag.
By default, WordPress does not allow you to add nofollow to your external links. If you want to add nofollow in WordPress, then you will need to use a plugin.
Does rel=”noreferrer” Affect Affiliate Links in WordPress?
The rel="noreferrer" does not affect affiliate links in WordPress. Some users believe that it does because rel="noreferrer" prevents the referrer information passing to the new tab.
However, most affiliate programs provide you with a unique URL that has your affiliate ID. This means your affiliate ID is passed along as a URL parameter for the other website to track.
Secondly, most affiliate marketers use a link cloaking plugin for their affiliate links.
With link cloaking, the affiliate link that your users click on is actually your website’s own URL, which then redirects users to the destination URL.
How Do You Disable rel=”noopener” in WordPress?
There is no need to remove rel="noopener" from links on your website. It is good for your website’s security and has no performance or SEO impact on your website.
Simply copy the following code into a new PHP snippet:
add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}
Make sure you change the ‘Active’ toggle on and then click the ‘Save Snippet’ button.
This will stop WordPress from adding rel="noopener" to new links. You will also need to manually edit any old links to remove the attribute.
Want even more control over which rel attributes get added to your links in WordPress? We recommend using the AIOSEO plugin because it lets you add title, nofollow, and other link attributes right inside the WordPress editor.
A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument is evaluated, even if one or more of the items is invalid.
/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }
See ::scoobydoo in there? That’s totally invalid. A forgiving selector list ignores that bogus selector and proceeds to evaluate the rest of the items as if it were written like this:
So, our previous example? The entire selector list is invalid because the bogus selector is invalid. But the other two forgiving selectors, :is() and :where(), are left unchanged.
There’s a bit of a workaround for this. Remember, :is() and :where()are forgiving, even if :has() is not. That means we can nest either of the those selectors in :has() to get more forgiving behavior:
article:has(:where(h2, ul, ::-scoobydoo)) { }
Which one you use might matter because the specificity of :is() is determined by the most specific item in its list. So, if you need to something less specific you’d do better reaching for :where() since it does not add to the specificity score.
We updated a few of our posts to reflect the latest info. I’m seeing plenty of others in the wild that need to be updated, so just a little PSA for anyone who needs to do the same.