Time Travelling CSS With :target

Category Image 091

Checkbox and radio button hacks are the (in)famous trick for creating games using just CSS. But it turns out that other elements based on user input can be hacked and gamified. There are very cool examples of developers getting creative with CSS games based on the :hover pseudo-class, and even other games based on the :valid pseudo-class.

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×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,478 legal 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:


<div class="b" id="--OOX----">
  <svg class="o s">
    <circle></circle>
  </svg>

  <a class="s" href="#OXOOX----">
    <div></div>
  </a>

  <svg class="o s">
    <circle class="c"></circle>
  </svg>

  <svg class="o s">
    <circle class="c"></circle>
  </svg>

  <div class="x"></div>

  <a class="s" href="#O-OOXX---">
    <div></div>
  </a>

  <a class="s" href="#O-OOX-X--">
    <div></div>
  </a>

  <a class="s" href="#O-OOX--X-">
    <div></div>
  </a>

  <a class="s" href="#O-OOX---X">
    <div></div>
  </a>
</div>

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.

Time Travelling CSS With :target originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Understanding Gutenberg Blocks, Patterns, and Templates

Category Image 091

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:

  1. Gutenberg Blocks: The smallest unit of content
  2. Patterns: Collections of blocks for reuse across your site
  3. Synced Patterns: Creating “master patterns” for site-wide updates
  4. Synced Pattern Overrides: Locking patterns while allowing specific edits
  5. 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.


Understanding Gutenberg Blocks, Patterns, and Templates originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Is Gutenberg Finally Winning Users Over? We Analyzed 340+ Opinions to Find Out

Category Image 091
opinions about gutenberg.pngOver 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.

Another Stab at Truncated Text

Category Image 091

Seems like we’re always talking about clipping text around here. All it takes is a little browsing to spot a bunch of things we’ve already explored.

It’s harder than it looks! And there’s oodles of consideration that go into it! Last time I visited this, I recreated a cool-looking implementation on MDN.

In there, I noted that VoiceOver respects the full text and announces it.

A truncated block of text with VoiceOver text overlay of the full content.

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:

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.

Button in a focus state with VoiceOver transcription saying 'You are currently on a button. This item is dimmed.'

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:

.visually-hidden:not(:focus):not(:active) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0); /* for IE only */
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

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.

Button in a focus state with VoiceOver transcription saying 'This button is disabled since assistive tech already announces the article content., dimmed, button'

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.

DevTools accessibility information on a button element with the aria-label filled it matches the name.

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.


Another Stab at Truncated Text originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

How to Properly Add Images in WordPress (Step by Step)

Category Image 091

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.

Add images in WordPress properly

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.

This can increase your website’s rankings and improve the accessibility of your website for people with disabilities.

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:

How to Add Images in the Block Editor (Gutenberg)

You can easily add images in the WordPress block editor by using the Image block.

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.

Add image block to the post

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.

Select image from the media library

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.

For details, you may want to see our beginner’s guide on how to add captions to images in WordPress.

Next, just click the ‘Select’ button to add the image to your page or post.

Fill in image details

Now that you have uploaded an image, you can further customize its size, dimensions, border, and style from the block panel on the right.

For details, check out our tutorial on how to add and align images in WordPress.

Images settings in the block panel

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

You have now properly added an image in the Gutenberg editor.

How to Add Images in the Classic Editor

If you are still using the old classic editor in WordPress, then you can use this method.

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.

Click the add media button

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.

Upload image file in the classic editor

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.

Configure attachment details in classic editor

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.

Click the Pencil icon to edit an image

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.

Edit image in the classic editor

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.

Add Image in the media library and click the Edit link

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.

Click 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.

basic editing features in WordPress

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.

Image block

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.

Add image from the media library

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.

This is where All in One SEO for WordPress (AIOSEO) comes in.

It is the best WordPress SEO plugin on the market that makes it super easy to optimize your content, including images, for search engines.

First, you need to install and activate the AIOSEO plugin. For more instructions, see our step-by-step guide on how to install a WordPress plugin.

Note: AIOSEO also has a free version. However, you will need the pro version of the plugin to unlock the Image SEO feature.

Upon activation, you will have to configure the setup wizard.

For more details, see our guide on how to set up All in One SEO for WordPress correctly.

AIOSEO setup wizard

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.

Activating the Image SEO Module in AIOSEO

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.

Add smart tags to configure title SEO

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’.

Configure strip punctuation and casing options

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.

SEO settings for alt tags

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.

Enable Captions toggle and configure its smart tags

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.

Enable the Description toggle and configure its smart tags

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.

Strip punctuation and casing settings

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.

AIOSEO settings for Filename

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.

For more detailed instructions, please see our beginner’s guide on how to optimize images for search engines.

Bonus: Allow Users to Upload Images in WordPress

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.

First, you will need to install and activate the WPForms plugin. For details, see our instructions on how to install a WordPress plugin.

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.

Select 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.

Add file upload field

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.

Configure field settings

For more detailed instructions, you may want to see our tutorial on how to allow users to upload images in WordPress.

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.

Locate and add the WPForms block

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.

We hope this article helped you learn how to properly add images in WordPress. You may also want to see our beginner’s guide on how to change the block height and width in WordPress, and our expert picks for the best WordPress themes for graphic designers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Properly Add Images in WordPress (Step by Step) first appeared on WPBeginner.

How to Create a “Sticky” Floating Footer Bar in WordPress

Category Image 091

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.

Create a "Sticky" Floating Footer Bar in WordPress

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.

WPForms floating footer bar preview

You can use the floating footer bar to:

  • Drive more clicks to other blog posts.
  • Generate leads and build your email list.
  • Bring attention to special coupons or discount offers/sales.
  • Promote your social media accounts.
  • Build brand recognition.
  • Provide access to important resources on your WordPress website.

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:

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.

The OptinMonster lead generation tool

Next, you must install and activate the free OptinMonster connector plugin on your website. For more instructions, see our beginner’s guide on how to install a WordPress plugin.

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.

Connect your existing account

Once you do that, a new window will open up on your screen.

Here, click the ‘Connect to WordPress’ button to move ahead.

Connect OptinMonster to WordPress

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.

Choose a premade template for a floating sticky footer bar

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.

Add a name for your floating sticky footer bar

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.

Add blocks to customize your floating footer bar

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.

Change button text in the footer bar

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.

Configure display rules to display the floating footer bar at all times

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.

Configure page targeting for floating footer bar

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.

Configure exit intent technology for footer bar

You can also configure the display rules according to the date, time, or scroll distance by selecting the ‘When’ option from the left column.

For an explanation of more display rule options, you can see our complete OptinMonster review.

Step 4: Publish Your Floating Footer Bar

Once you have defined the display conditions for your footer bar, switch to the ‘Publish’ tab from the top.

Here, simply click the ‘Publish’ button.

Publish floating footer bar

After that, don’t forget to click on ‘Save’ to make your changes live.

Now, you can visit your WordPress blog to see the sticky floating footer bar in action.

Sticky floating footer bar preview

Alternative: You can also use Thrive Ultimatum to show a countdown timer floating footer bar on your website. For more details, see our Thrive Themes Suite review.

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.

First, you need to install and activate the Firebox Popup Builder plugin. For detailed instructions, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Firebox » Campaigns page from the WordPress dashboard and click the ‘+ New Campaign’ button.

Click + 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.

Click the Insert link under a template

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.

For more details, you can see our tutorial on how to add social media icons in WordPress menus.

Add blocks in the floating footer bar from the block menu

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’.

Add a link for the button

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.

Configure floating footer bar design

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.

Choose a trigger point for footer bar

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.

Publish floating footer bar

Now visit your WordPress site to view the sticky floating footer bar in action.

This is what it looked like on our demo site.

Sticky floating footer bar preview

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.

Sticky floating navigation menu preview

To create a sticky floating navigation menu, simply install and activate the Sticky Menu & Sticky Header plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Settings » Sticky Menu page from the WordPress dashboard and type #main-navigation next to the ‘Sticky Element (required)’ option.

Type navigation menu as the sticky element

After that, click the ‘Save Changes’ button to store your settings. You have now successfully created a sticky floating navigation menu.

For detailed instructions, please see our tutorial on how to create a sticky floating navigation menu in WordPress.

We hope this article helped you learn how to easily create a floating sticky footer bar in WordPress. You may also want to see our beginner’s guide on how to add header and footer code in WordPress and our checklist of things to add to the footer on your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a “Sticky” Floating Footer Bar in WordPress first appeared on WPBeginner.

Padding vs Margin – What’s the Difference in WordPress?

Category Image 091

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.

Difference between padding and margin 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.

Padding preview

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.

Margin preview

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:

PaddingMargin
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.
Padding can create a buffer around a block.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.

Choose the page where you want to add padding from the left column

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.

Click the Edit icon for 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.

Choose the padding option from the Dimensions section

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.

Padding in full site editor

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.

Padding for different corners

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.

Choose page for margin from the left column

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.

Click the Edit icon for 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.

Add margin in the full site editor

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.

Use margin slider

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.

Add patterns to your layouts

You can also use the FSE to add a header, navigation menu, or custom CSS to your website.

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.

Choose a background color from the Color Picker

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.

For more details, you can see our tutorial on how to easily create a custom WordPress theme.

Edit theme template

We hope this article helped you learn the difference between padding and margin in WordPress. You may also be interested in our beginner’s guide on how to change block height and width in WordPress and our top picks for the best Gutenberg blocks plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Padding vs Margin – What’s the Difference in WordPress? first appeared on WPBeginner.

How to Change Block Height and Width in WordPress

Category Image 091

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.

How to 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.

Preview of an image

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.

Use alignment settings to resize an image

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.

Resize an image using block panel settings

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.

Resize Image block using anchors

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.

Choose the column block

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.

Add Block using column

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.

Column block preview

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.

Choose the Group block and select a 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.

Add a heading block to the Group 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.

Add multiple blocks in Group

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.

Configure the block settings of the Group block

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.

Group block preview

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.

Add 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.

Change the Cover block height

Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.

For more detailed instructions on how to use the Cover block, you may want to see our beginner’s guide on Cover Image vs. Featured Image in the WordPress block editor.

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.

First, you will need to install and activate the SeedProd plugin. For more details, you can read our guide on how to install a WordPress plugin.

Note: SeedProd also offers a free version, but we will be using the premium version for this tutorial.

Upon activation, you must go to the SeedProd » Settings page from your WordPress dashboard and enter the license key in the ‘License Key’ box.

You can find the license key on your account page on the SeedProd website.

Paste license key in the field

Next, you need to visit the SeedProd » Landing Pages screen from the admin sidebar to start creating a landing page.

From here, just click on the ‘Add New Landing Page’ button.

Click the Add New Landing Page button

You will now be taken to the ‘Choose a New Page Template’ page. SeedProd offers many pre-made templates that you can pick from.

After you have selected a template, you will be asked to provide a name and URL for your landing page.

Upon adding these details, simply click on the ‘Save and Start Editing the Page’ button to continue.

Enter your page details

This will launch SeedProd’s drag-and-drop page builder, where you can now start editing your page.

For more detailed instructions, please see our guide on how to create a landing page with WordPress.

For this tutorial, we will be adding and resizing an Image block and a Button block.

First, you will need to drag the Image block from the block panel on the left and drop it anywhere you like on the page.

Choose the image block in the SeedProd

Next, simply click on the Image block to open its block settings in the left column. From here, you can upload an image from your media library.

Next, you can change the block’s height and width using pixels or percentages.

Change the block size in SeedProd

You can also adjust the image size and position by switching to the ‘Advanced’ tab at the top of the settings panel.

Then, just click on the Spacing panel to expand its settings.

Visit the Spacing panel by switching to the Advanced tab

Here, simply add values to adjust the block’s margin and padding according to your needs.

You can adjust the margin and padding for the top, bottom, left, and right areas of the block.

Ajust the margin and padding of the block

With Seedprod, you can also add a Spacer block between two different blocks to put some space between them.

First, you will need to locate and add the ‘Spacer’ block from the left column. Then, click on it to open its settings.

Add the Spacer block

Now, you can control the height of the spacer using the ‘Height’ slider.

The spacer block can help you create a clutter-free website.

Use the height slider to adjust Spacer block

You can also change the width and height of other blocks in the same way, including the Video, Heading, and Button blocks.

Simply find the Button block in the left column and drag it onto your page.

Add the Button block to the website

Next, you will need to click on the Button to open up its block settings.

From here, switch to the ‘Advanced’ tab from the top. You can change the height of the block by dragging the ‘Vertical Padding’ slider.

Changing height of the button block

To change the width, drag the ‘Horizontal Padding’ slider in the left column.

Once you are done, don’t forget to click on the ‘Save’ button.

Change width of the button block

We hope this article helped you learn how to change block width and height in WordPress. You may also want to see our article on how to add and align images in the WordPress block editor and our top picks for the must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change Block Height and Width in WordPress first appeared on WPBeginner.

How to Customize the Background Color of WordPress Block Editor

Category Image 091

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.

Changing the background color of WordPress block editor

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.

For instance, most modern WordPress themes use the same background color for the block editor as the live website including Astra, OceanWP, GeneratePress, and more.

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.

Default block editor

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.

First, you need to install and activate the free WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

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.

Add new snippet

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.

Choose PHP Snippet option as the code type for changing editor background color

After that, you need to copy and paste the following code into the ‘Code Preview’ box.

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

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.

Paste the code snippet for changing the editor background color

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.

Choose the insertion method and location of the code snippet

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.

Save the code snippet for changing the background color

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.

Editor color preview

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on 85+ time saving WordPress shortcuts, or take a look at our top picks for the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize the Background Color of WordPress Block Editor first appeared on WPBeginner.

How to Use Icon Fonts in WordPress Post Editor (No Code)

Category Image 091

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.

Using icon fonts in the WordPress editor

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.

First, you need to install and activate the JVM Rich Text Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

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.

Icon font button 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.

Choose icons to insert

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.

Style icon fonts using block editor tools

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.

Icon fonts in 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.

Using icon fonts in buttons and lists

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.

First, you need to install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can edit a post or page in WordPress and use the following shortcode to add a font icon.

[icon name="home"]
Adding icon fonts using shortcode

The name parameter here is the name of the font used by Font Awesome. You can find the entire list on the Font Awesome cheatsheet page.

Once added, you can preview your post or page to see how the icon will look on the live site since it will not display as an icon in the block editor.

This is how it looked on our test site.

Font icon preview

You can use the shortcode inside a paragraph and inline with other text. You can also add it on its own using the ‘Shortcode’ block.

However, using the ‘Shortcode’ block will not give you the styling options you’ll get with other text blocks.

You can also add the shortcode inside columns to create a features row.

Shortcode in columns

It would be a bit trickier as you will not be able to see the actual images, and the column heights will keep changing within the editor.

Here is how it looked on our test website. The columns are the same height, even though they are not in the editor.

Icon fonts preview using Font Awesome

You’ll probably have to preview your work in a new browser tab many times to see how it will look to users.

Method 3. Using Icon Fonts with WordPress Page Builders

This method is great if you are creating a landing page or designing your website using a WordPress page builder like SeedProd.

SeedProd is the best WordPress page builder on the market. It allows you to easily create beautiful landing pages or design your complete website.

SeedProd WordPress Website Builder

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.

SeedProd license key

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.

Add new landing page

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.

Choose landing page template

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.

Provide page title and 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.

SeedProd page builder interface

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.

Add 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.

Icon block settings

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.

Icon box block

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.

Icon box inside columns

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.

Save and publish your landing page

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.

Icon fonts preview

We hope this article helped you learn how to use icon fonts in WordPress post editor without writing HTML code. You may also want to see our WordPress performance guide to optimize your website speed or the best landing page plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use Icon Fonts in WordPress Post Editor (No Code) first appeared on WPBeginner.

Classless CSS library Almond.css

Category Image 091

From Alvaro Montoro: almond.css

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.

(Saw via Louis Lazaris‘ article Top Front-End Tools Of 2022 on Smashing Mag. It is interesting how these libraries are always quite popular in the context of Louis’ newsletter.)

There are other CSS libraries in this category that come to mind, like: Water.css, MVP.css, new.css, and AttriCSS.

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:

:root {
  --font-family: system-ui;
  --font-weight-normal: 300;
  --font-weight-bold: 600;
  --line-height: 2;
  --heading-margin: 3rem 0 1rem 0;
  --primary: orangered;
}

The post Classless CSS library Almond.css appeared first on CodePen Blog.

Blaze Slider

Category Image 091

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.

Anyway, I’m usually a Flickity guy myself (basic demo), but Blaze Slider also looks great.

I like how it requires no framework at all, but if you’re using one, they have all the most common documented.

The post Blaze Slider appeared first on CodePen Blog.

Rive

Category Image 091

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:

More Real-World Uses for :has()

Category Image 091

The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down gives us more superpowers I’d never thought possible.

I say “more superpowers” because there have already been a ton of really amazing clever ideas published by a bunch of super smart people, like:

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.

Using this technique where Bramus uses :has() to apply styles based on the number of children, we can apply tble stripes when there are more than, say, three rows:

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.

Layout with left sidebar above a layout with no sidebar.

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.

On the other hand, the specificity of :where() is always zero, never adding to the specificity score.

/* 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?


More Real-World Uses for :has() originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

What is rel=”noopener” in WordPress? (Explained)

Category Image 091

Have you been wondering what rel="noopener" means in WordPress?

When you add a link that opens in a new tab, WordPress will automatically add the rel="noopener" attribute to the link.

In this article, we will explain what rel="noopener" means in WordPress and how it affects your website.

What Is rel="noopener" in WordPress? (Explained)

What Is rel=”noopener” in WordPress?

When you add links to your WordPress website, you can use HTML attributes to control what happens when you click the link.

For example, when you create a link, there is a toggle switch that allows you to open it in a new tab.

Opening a Link in a New Tab

The HTML code generated by WordPress for this link looks like this:

<a href="http://example.com" target="_blank" rel="noreferrer noopener">external link</a>

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.

But that’s just a myth.

It has no impact on your site’s SEO rankings or your overall WordPress performance.

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.

To learn more, see our article on how to add title and nofollow to links in WordPress.

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.

However, if you must remove it, then you will have to disable the Gutenberg block editor in WordPress and use the old classic editor.

That’s because if you remove rel="noopener" from the link manually, the block editor will automatically add it back in to keep your website safe.

Once the block editor is disabled, you will need to add a code snippet to your theme’s functions.php file or to the WPCode plugin (recommended). You can learn how to use the WPCode Free Plugin in our guide on how to easily add custom code in WordPress.

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;
}
Adding a Code Snippet Using WPCode

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.

AIOSEO Adds NoFollow and Title Attributes to the Insert Link Popup

We hope this article helped you learn about rel="noopener" in WordPress. You may also want to learn how to get a free email domain, or see our list of tips to speed up WordPress performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post What is rel=”noopener” in WordPress? (Explained) first appeared on WPBeginner.

:has is an unforgiving selector

Category Image 091

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:

article:has(h2, ul) { }

:has() was indeed a forgiving selector in a previous draft dated May 7, 2022. But that changed after an issue was reported that the forgiving nature conflicts with jQuery when :has() contains a complex selector (e.g. header h2 + p). The W3C landed on a resolution to make :has() an “unforgiving” selector just a few weeks ago.

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.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { }

/* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

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.


:has is an unforgiving selector originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.