Custom Frontend CSS

Add custom CSS to your website’s frontend without editing theme files. Your styles are stored in the database, so they survive theme updates and don’t require a child theme for simple customizations.

Use Cases#

• Make quick design tweaks without creating a child theme
• Override plugin CSS that doesn’t match your site’s design
• Fix mobile layout issues with responsive CSS
• Customize colors, fonts, and spacing across your site
• Hide elements or adjust layouts without editing PHP

How It Works#

1. Enable the module in Switchboard
2. Enter your custom CSS in the code editor
3. Save your changes
4. CSS is automatically added to every frontend page

Where to Find It#

Location: Your custom CSS is applied to all frontend pages. Configure it in the module settings.

Writing Custom CSS#

Enter your CSS exactly as you would in a stylesheet:

/* Change the site's primary color */
.site-title a {
    color: #4f46e5;
}

/* Increase paragraph spacing */
.entry-content p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

/* Hide the sidebar on mobile */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

Common CSS Examples#

Typography#

/* Custom font for headings */
h1, h2, h3, h4 {
    font-family: 'Georgia', serif;
}

/* Larger body text */
body {
    font-size: 18px;
    line-height: 1.7;
}

Colors#

/* Change link colors */
a {
    color: #4f46e5;
}

a:hover {
    color: #4338ca;
}

/* Button styling */
.wp-block-button__link {
    background-color: #10b981;
    border-radius: 8px;
}

Layout Adjustments#

/* Wider content area */
.entry-content {
    max-width: 800px;
}

/* Add padding to containers */
.site-content {
    padding: 40px 20px;
}

Hide Elements#

/* Hide post meta */
.entry-meta {
    display: none;
}

/* Hide specific widget */
.widget_recent_comments {
    display: none;
}

Mobile Responsive#

/* Stack columns on mobile */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-column {
        width: 100% !important;
    }
}

Finding CSS Selectors#

To style a specific element, you need its CSS selector. Here’s how to find it:

Using Browser Developer Tools#

1. Right-click on the element you want to style
2. Select “Inspect” or “Inspect Element”
3. Look at the highlighted HTML for class names
4. Use those classes in your CSS

Common WordPress Classes#

Using !important#

Sometimes theme or plugin CSS has high specificity. Use !important to override:

.element {
    color: red !important;
}

Use !important sparingly — it’s a last resort when normal specificity doesn’t work.

CSS Validation#

Your CSS is automatically sanitized for security:

• Script tags are removed
• JavaScript URLs are blocked
• Malicious properties are filtered

Standard CSS always works correctly.

FAQ#