Best CSS Snippets for WordPress: 16 Useful and Practical Examples 

Your WordPress theme decides how most of your site looks.

That’s handy, until you want one small change it has no setting for. Maybe your links are hard to spot, your header scrolls away, or your sale badge clashes with your brand.

The usual advice is to edit your theme’s style.css file. But unless you’re using a child theme, that change can disappear the next time the theme updates. And it’s easy to break something if you’ve never opened the file.

In this guide, you’ll find 16 CSS snippets we’ve tested on a real WordPress site, each with copy-and-paste code.

We’ll also show you WPCode’s free Live Preview, so you can see most of these changes on your site before any visitor does.

Use the table of contents below to navigate this article.

How to Add a CSS Snippet in WordPress

You add all 16 snippets the same way, so we’ll walk through it once.

We’ll use the first snippet, nicer link underlines, as the example. Every site has links, and you can watch them change as you type.

You need one thing first: the free WPCode plugin from WordPress.org. Install and activate it like any other plugin.

You don’t need to write any CSS.

You’ll copy the code from this article and paste it in. Some snippets have a line you can change, like a color or a size, and we’ll point it out each time.

Create the snippet

Once you install WPCode, in your WordPress dashboard, go to Code Snippets » + Add Snippet. This opens the WPCode snippet library first, not a blank editor.

At the top of the library, you’ll see a card called Add Your Custom Code (New Snippet). Hover over it and click + Add Custom Snippet.

Next, WPCode asks what kind of code you’re adding. Pick CSS Snippet.

It adds the <style> tags for you, so paste the code exactly as it is.

Give your snippet a name you’ll recognize later, like “Link underlines.”

Then paste the code into the Code Preview box.

/* Nicer link underlines in your posts and pages */
.entry-content a:not(.wp-element-button):not(.button),
.wp-block-post-content a:not(.wp-element-button):not(.button) {
	text-decoration-color: #0065FF; /* change this: your brand color */
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.entry-content a:not(.wp-element-button):not(.button):hover,
.wp-block-post-content a:not(.wp-element-button):not(.button):hover {
	text-decoration-thickness: 3px;
}

Scroll down to the Insertion box. Leave it on Auto Insert, and make sure the Location is Site Wide Header.

That’s already the default for a new CSS snippet. Only #15, which styles your dashboard, uses a different location, and we’ll show you that one when we get there.

Preview it live

Before you switch the snippet on, you can see what it does to your site.

First, click Save Snippet at the top right. Live Preview needs the snippet saved once, so WPCode knows what to show.

Then click the Live Preview button next to it. (It arrived in WPCode 2.3.2, and it’s free.)

WPCode opens a split screen. Your CSS is on the left, and your homepage is on the right. Change a value on the left, like the color, and the links on the right update as you type.

If your homepage doesn’t show any post content, click through to one of your posts inside the preview. Live Preview keeps your CSS on every page you open there.

At the top of the editor, three small icons switch the preview between desktop, tablet, and mobile sizes. That’s handy for snippets that should look right on phones.

Happy with it? Click Save & Exit. Changed your mind? Discard & Exit removes what you typed in the preview.

Switch it on and check it

At the top right of the screen, click the toggle so it changes from Inactive to Active. Then click Update.

The snippet is now live on your site.

To check it, open one of your posts in a private browser window. The links in the post should have your new underline color and sit a little lower than before.

If you ever want it gone, switch the same toggle back to Inactive and click Update.

You’ll find every snippet you’ve added under Code Snippets in your dashboard, where you can switch each one on or off, or move it to the Trash.

What if you paste the code wrong? It won’t take your site down.

A browser skips CSS it doesn’t understand, so a typo usually just means nothing changes.

A rule that targets too much can change more than you meant, though. That’s what Live Preview is for. Check the result there first, and if something looks off after you switch it on, switch the snippet off.

And because the snippet lives in WPCode, not in your theme, it stays put when your theme updates.

The 16 Snippets at a Glance

Now that you know how to add a CSS snippet, here’s every snippet in one table.

Easy means paste it and switch it on. The “change this” lines are optional, for your own colors. Intermediate means you may need to change one line to match your theme, and we show you how.

Want to change your site’s font instead? That one has its own guide: how to change your font in WordPress with a CSS snippet.

Reading and Links

These three make your text easier to read and use on any screen.

1. Nicer Link Underlines (Free)

You’ve already added this one if you followed the walkthrough.

Most themes underline links with a thin line that sits right on the letters. It works, but it’s easy to miss, and it cuts through letters like g and y.

This snippet gives your links a thicker underline in your brand color, with a little space below the text.

It only touches links inside your posts and pages.

Menus stay as they are, and so do WordPress buttons and most theme buttons.

If a button in your theme picks up the underline, right-click it and choose Inspect. This opens your browser’s developer tools and shows the button’s class name.

Add another :not() for that class.

Check out this guide to learn how to inspect elements with Developer Tools in your browser.

The full code is in the walkthrough above.

2. Custom Text-Selection Color (Free)

When a visitor drags across text to copy it, the browser highlights it in blue or grey.

This snippet uses your brand color instead. It’s a small touch that shows up every time a visitor copies a quote or an address.

/* Brand color when visitors highlight text */
::selection {
	background-color: #0065FF; /* change this: highlight color */
	color: #ffffff; /* text color while highlighted */
}

Keep the background dark enough that white text stays easy to read.

3. Stop Long Links Breaking the Layout on Phones (Free)

Does your page scroll sideways on a phone?

A long link pasted into a post is a common cause.

Browsers often won’t break it onto a new line, so it pushes past the edge of the screen. Links with dashes usually wrap fine. Tracking links full of ?utm_source= and & often don’t.

On our test site, one tracking link stretched the page to 931 pixels wide on a phone. With this snippet, the page went back to fitting the screen.

/* Let long links and words wrap instead of pushing past the screen */
.entry-content,
.wp-block-post-content,
.comment-content {
	overflow-wrap: break-word;
}

It only breaks a word when the word is too long to fit. Normal words wrap the way they always have.

Buttons and Navigation

These four make your buttons and menus easier to use, including for visitors who browse with a keyboard.

4. Button Hover Lift (Free)

A button that reacts when you point at it feels clickable.

This snippet lifts your buttons by 2 pixels on hover and adds a soft shadow under them. It works on WordPress’s Button block and on most theme buttons.

If yours don’t lift, your theme names its buttons differently. Use Inspect to find the class and add it to each list.

/* Lift buttons slightly when visitors hover over them */
.wp-block-button__link,
.wp-element-button,
.button {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* No movement for visitors who turn on "reduce motion" */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-element-button,
	.button {
		transition: none;
	}

	.wp-block-button__link:hover,
	.wp-element-button:hover,
	.button:hover {
		transform: none;
	}
}

Some people get dizzy from movement on screens, and they can turn on a “reduce motion” setting on their device. The last part of the snippet respects it, so their buttons stay still.

5. Highlight the Current Menu Item (Free)

Visitors should be able to tell which page they’re on just by looking at your menu.

Many themes don’t mark the current page at all. This snippet draws a line under it.

/* Underline the menu item for the page the visitor is on */
.current-menu-item > a,
.current_page_item > a,
.wp-block-navigation-item a[aria-current="page"] {
	box-shadow: inset 0 -3px 0 currentColor;
}

It works with the Navigation block in block themes and with classic theme menus.

We draw the line with a shadow instead of a normal underline for a reason. On Astra, our classic test theme, the theme’s own menu styles removed a normal underline. The shadow version showed up on both themes.

6. Visible Keyboard Focus Outline (Free)

Some visitors move around your site with the Tab key instead of a mouse.

A focus outline is the ring that shows them where they are. Without it, they’re tabbing around blind.

This snippet gives every link, button, and form field a clear blue ring when it’s reached with the keyboard.

/* Clear focus ring for visitors using a keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #0065FF !important; /* change this: ring color */
	outline-offset: 2px !important;
}

Browsers decide when to show it. On links and buttons, that’s usually only for keyboard users. Form fields often show it when clicked or tapped too, which helps everyone.

You may wonder about the !important in the code above.

Some themes and plugins remove focus outlines, and !important makes sure yours still shows. On our test site, only the version with !important displayed the ring.

7. Smooth Scrolling for Jump Links (Free)

When someone clicks a link to a section further down the page, like a table of contents entry, the page jumps there instantly. It can feel like you’ve landed on a different page.

This snippet makes the page glide there instead.

/* Glide to sections instead of jumping */
html {
	scroll-behavior: smooth;
}

/* Jump straight there for visitors who turn on "reduce motion" */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

This used to take JavaScript, often a jQuery script loaded on every page. It took over every jump link, so it could clash with tabs, accordions, or table of contents plugins.

Today, CSS does it in one line, and your browser handles the scrolling.

Want a button that takes readers back to the top, too? See how to add a scroll to top button in WordPress.

Pair it with snippet #9 if your header is sticky, so the heading doesn’t land underneath it.

Layout

Next, how your pages behave as people scroll, print, and move around them.

8. Sticky Header With a Shadow (Free)

A sticky header stays at the top of the screen while visitors scroll. Your menu and search are always one click away.

This snippet makes your header stick and adds a soft shadow, so it stands apart from the page below it.

/* Keep the header at the top while visitors scroll */
.wp-site-blocks > header,
#masthead,
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #ffffff; /* change this: your header background */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Make room for the admin bar when you're logged in */
body.admin-bar .wp-site-blocks > header,
body.admin-bar #masthead,
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header,
	body.admin-bar #masthead,
	body.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header,
	body.admin-bar #masthead,
	body.admin-bar .site-header {
		top: 0;
	}
}

The three names at the top of the code are your header. .wp-site-blocks > header covers block themes like Twenty Twenty-Five. #masthead and .site-header cover Astra and most classic themes. We tested both.

The admin bar part only matters when you’re logged in.

It keeps your header from sliding under the black bar at the top. On phones, the bar scrolls away with the page, so the header goes back to the very top.

Block themes do have a built-in sticky option, but only on a Group block at the top level of a template.

To use it, you’d wrap your header in a Group in the Site Editor. Classic themes don’t have this block setting, though some add their own sticky header option.

For most sites, the snippet is the simpler route.

9. Keep Headings Visible Under a Sticky Header (Free)

Once your header is sticky, you may experience a new problem.

Click a table of contents link, and the heading you jumped to hides behind the header. Your reader lands just below the title they wanted.

This snippet leaves room above the heading, so it stops below your header.

/* Stop jump links landing behind a sticky header */
:where(h2, h3, h4)[id] {
	scroll-margin-top: 130px; /* change this: your header height + about 20px */
}

/* Extra room for the admin bar when you're logged in */
body.admin-bar :where(h2, h3, h4)[id] {
	scroll-margin-top: 162px; /* change this: the number above + 32 */
}

It works on headings that have an ID, which is what a jump link points to.

Table of contents plugins add IDs for you. You can also add one yourself in the heading block’s Advanced » HTML anchor setting.

The number depends on your header’s height.

Our first try used 96px, and on Twenty Twenty-Five the heading still hid behind the 108px header. 130px worked. Astra’s header was taller, at 161px, so it needed about 180px.

10. Print-Friendly Posts (Free)

Readers print recipes, guides, and instructions.

When they do, they usually get your menu, your footer, and your comments too. That’s pages of paper they didn’t want.

This snippet hides those parts when someone prints. It also prints the web address after each link, since nobody can click a link on paper.

/* Clean printouts: just the post, with link addresses */
@media print {
	.wp-site-blocks > header,
	.wp-site-blocks > footer,
	#masthead,
	#colophon,
	.site-header,
	.site-footer,
	nav,
	.wp-block-post-navigation-link,
	.post-navigation,
	.wp-block-comments,
	#comments,
	#secondary,
	.sidebar,
	#wpadminbar {
		display: none !important;
	}

	.entry-content a[href^="http"]::after,
	.wp-block-post-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
}

Nothing changes on screen. The snippet only does something when the page is printed.

We checked it on both test themes. The header, footer, and menus disappeared, and the post title stayed.

11. Branded Scrollbar Color (Free)

Want your scrollbar to match your brand?

This snippet colors the scrollbar’s bar and the track it slides in.

/* Scrollbar in your brand colors */
html {
	scrollbar-color: #0065FF #f1f1f1; /* change this: bar color, then track color */
}

It works in current versions of Chrome, Edge, and Firefox, and in Safari 26.2 or later. Older Safari versions just keep the normal scrollbar, so nothing breaks.

Forms

Your forms should look like part of your site, not something bolted on.

12. Restyle the Contact Form 7 Submit Button (Free)

Contact Form 7 doesn’t come with style settings. Its Submit button looks like whatever your theme decides, and that may not match the rest of your site.

This snippet gives it your brand color and a darker hover color.

/* Brand-colored Contact Form 7 submit button */
.wpcf7-submit {
	background-color: #0065FF; /* change this: button color */
	border: 2px solid #0065FF; /* same color as the line above */
	color: #ffffff;
	padding: 12px 28px;
	border-radius: 6px;
	cursor: pointer;
}

.wpcf7-submit:hover {
	background-color: #11293E; /* change this: hover color */
	border-color: #11293E;
}

Using WPForms? You don’t need this one.

WPForms has its own button color settings, free, under Settings » Themes in the form builder. See WPForms’ guide to styling your forms.

13. Readable Placeholder Text (Free)

Placeholder text is the hint inside an empty form field, like “[email protected].”

Many themes make it a very light grey. It’s hard to read, especially on a phone outside.

This snippet makes it darker in every form on your site.

/* Darker, easier-to-read placeholder text in form fields */
input::placeholder,
textarea::placeholder {
	color: #4b5563; /* change this: placeholder color */
	opacity: 1;
}

The opacity: 1 line matters. Firefox fades placeholder text by default, so without it, the color looks lighter than you set.

You may find longer versions of this snippet elsewhere, with extra lines for very old browsers. You don’t need them anymore.

Store and Dashboard

The last three are for store owners and for you and your team behind the scenes.

14. WooCommerce Sale Badge Color (Free)

The “Sale!” badge on your products is one of the first things shoppers see.

Its default color often clashes with your brand. This snippet gives it your color and a rounded pill shape.

/* Sale badge in your brand color */
.onsale,
.wc-block-components-product-sale-badge,
.ast-onsale-card { /* change this: your theme's badge name (this one is Astra's) */
	background-color: #E11D48 !important; /* change this: badge color */
	border-color: #E11D48 !important;
	color: #ffffff !important;
	border-radius: 999px !important;
	font-weight: 700;
	text-transform: uppercase;
}

.onsale covers classic WooCommerce pages. .wc-block-components-product-sale-badge covers the newer product blocks.

Some themes rename the badge. On Astra, our classic test theme, it’s .ast-onsale-card, which is why it’s in the list.

15. Color-Code Drafts and Pending Posts (Free)

Your Posts » All Posts screen shows published posts, drafts, and posts waiting for review in one long list, and they all look the same.

This snippet gives each status its own background color, so you can spot unfinished work at a glance.

/* Color rows on the All Posts screen by status */
.wp-list-table tr.status-draft {
	background-color: #FEF9C3 !important; /* drafts: yellow */
}

.wp-list-table tr.status-pending {
	background-color: #DBEAFE !important; /* pending review: blue */
}

.wp-list-table tr.status-future {
	background-color: #DCFCE7 !important; /* scheduled: green */
}

.wp-list-table tr.status-private {
	background-color: #F3F4F6 !important; /* private: grey */
}

This snippet is not added site-wide, only in your Admin area.

In your WPCode editor, go to the Insertion box.

Then, open the Location dropdown and choose Admin header, under Admin Area. That loads the CSS in your dashboard instead of on your site. Your visitors never see it.

Live Preview doesn’t work with the Admin header location. So save it, switch it on, and check the result on your Posts screen.

16. Move the Admin Bar to the Bottom (Free)

When you’re logged in, the black WordPress admin bar sits across the top of your site. It covers part of your header and pushes everything down.

This snippet moves it to the bottom of the screen. You still have it; it just stays out of the way.

/* Move the admin bar to the bottom of the screen */
html {
	margin-top: 0 !important;
}

#wpadminbar {
	position: fixed !important;
	top: auto !important;
	bottom: 0;
}

body.admin-bar {
	padding-bottom: 46px;
}

@media (min-width: 783px) {
	body.admin-bar {
		padding-bottom: 32px;
	}
}

/* Open the admin bar's menus upward */
#wpadminbar .menupop .ab-sub-wrapper {
	top: auto;
	bottom: 100%;
}

We tested it on a computer and on a phone-sized screen. In both, the bar stayed at the bottom with no gap at the top of the page.

Only logged-in users see the admin bar, so your visitors won’t notice any change. Live Preview hides the admin bar too, so check this one on your live site.

If you also use the sticky header from snippet #8, change its top: 32px and top: 46px lines to top: 0. The admin bar isn’t at the top anymore, so the header doesn’t need to make room for it.

Would you rather hide the admin bar completely? Here’s how to disable the admin bar in WordPress.

5 CSS Snippets You Can Skip in 2026

You’ll still find these five in other lists of CSS snippets.

Many of those lists were written before WordPress or modern themes could do the same job. Check the built-in option first, so you don’t add a snippet for something your site already does.

One more you won’t find here: a custom login logo. That needs PHP, not just CSS, and we cover it in how to replace the WordPress logo on the login page.

Hide a Block on Mobile

Since WordPress 7.0, you can hide most blocks on mobile, tablet, or desktop right from the block toolbar. No CSS or extra class needed. See the WordPress 7.0 block visibility announcement.

Make YouTube Videos Resize on Phones

If your theme supports responsive embeds (every block theme does, and most modern classic themes too), WordPress’s Embed block already keeps videos at the right shape on every screen size.

Paste the YouTube link into an Embed block, and it resizes on its own.

Headings That Scale With the Screen

Many block themes already shrink headings smoothly on smaller screens. Twenty Twenty-Five does this out of the box, so a snippet adds nothing there.

Full-Width Sections

Block themes have a Full width option on Group, Cover, and Image blocks. Pick it in the block toolbar instead of writing CSS to stretch a section.

Drop Caps

The Paragraph block has a Drop cap setting in its Typography panel. One click, no snippet.

Which Snippet Should You Add First?

Of the 16 worth keeping, here’s where we’d start, depending on what you want to fix.

Running a blog? Start with nicer link underlines from the walkthrough. Then add smooth scrolling, since long posts have the most jump links. You can skip a heading-size snippet, since block themes like Twenty Twenty-Five already scale headings.

Running a store? Start with the sale badge. Add the sticky header next, so your cart stays in reach.

Want your site to work for more people? Start with the keyboard focus outline. Then add readable placeholder text to your forms.

Using Contact Form 7? Start with the submit button. Using WPForms instead? Its free Themes settings already cover the button, so skip straight to placeholder text.

Running a site with a team? Start with the colored drafts on your Posts screen. Then move the admin bar to the bottom for everyone who’s logged in.

Publishing recipes or how-to guides? Start with print-friendly posts. Your readers will use less paper.

FAQs: CSS Snippets

Why isn’t my CSS snippet showing up?

Often, it’s your cache. Your caching plugin may still be showing an old copy of the page. Clear your cache (most caching plugins add a Clear Cache or Purge button to the top admin bar) and check again in a private browser window. Still nothing? Make sure the snippet is set to Active. Then check whether your theme uses a different class name for the thing you’re styling. Right-click it and choose Inspect to see. Our doc on finding code that isn’t showing on your site walks through the other causes.

How do I find the right CSS class for something on my site?

Right-click the part of the page you want to change and choose Inspect. Your browser opens a panel showing the code behind it, including its class names. Our guide on finding the right CSS selector walks through it with pictures.

Will my CSS snippets survive a theme update or a theme change?

Yes. The snippets live in WPCode, not in your theme, so updating your theme doesn’t touch them. If you switch themes, they keep running too. You may need to update a class name if the new theme uses different ones. Fonts work the same way. See how to add Google Fonts in WordPress.

Should I use Additional CSS or a CSS snippet?

WordPress’s built-in Additional CSS (in the Customizer, or under Styles in block themes) works, but it’s one big box tied to your current theme. With WPCode, each fix is its own snippet with its own name, and you can switch one off without touching the rest. You also get Live Preview. We compare the options in our guide on how to add custom CSS to your WordPress site.

What’s the difference between CSS and SCSS?

SCSS is CSS with extras, like variables you can reuse and rules you can nest. WPCode turns it into normal CSS for you. SCSS snippets come with every paid WPCode plan, starting with Basic. Every snippet in this article is plain CSS, which is free. To see what else the paid plans add, read our WPCode review.

Add Your First CSS Snippet Today

You now have 16 tested CSS snippets, and one way to add all of them.

Pick the one that bothers you most from the table above. Paste it into a new CSS Snippet, open Live Preview, and tweak it until it looks right.

Then switch it on.

Ready to fix your site’s look without touching a theme file?
Get WPCode for free →

Want to write your styles in SCSS and get more tools for managing your code?
See WPCode pricing →

Additional Resources

These guides help you do more with code snippets on your site.

• JavaScript Snippets for WordPress: 13 tested snippets that add behavior, like click-to-call and reading progress bars.
• WPCode Library: browse ready-made snippets you can add in one click.
• How to Add Header and Footer Code in WordPress: where to put other code, like tracking scripts, without touching your theme.
• See What a Restore Will Change Before You Click: Before you restore a snippet, you can now know which settings will change along with it.