Posts tagged: CSS
How to Disable Gutenberg Styles on the Frontend
By default the Gutenberg Block Editor loads its default CSS/stylesheet on the front-end of your WordPress site. This is fine for most cases, but there may be situations where you want to disable the Gutenberg styles for whatever reason. For example, my free WordPress plugin, Disable Gutenberg, enables users to disable the Gutenberg Block Editor and restore the Classic Editor. Included in the plugin settings is an option called “Enable Frontend” that lets users enable or disable the Gutenberg CSS/styles as desired. This quick DigWP tutorial explains programmatically how to disable Gutenberg styles on the front-end.
How to Include Styles in WordPress Child Themes
This DigWP tutorial explains the “new” way to include parent stylesheets in Child Themes. I put the word “new” in quotes because the technique actually has been around for years, but there are many developers and designers who still use the old @import way of adding parent styles. This tutorial is for people who may be unfamiliar with using WordPress’ enqueue functionality for Child Themes.
Here you’ll find copy-n-paste techniques, examples, caveats, and numerous resources. Basically everything you need to know about including styles in your Child Themes. Let’s dig in..
WordPress Default CSS Styles
WordPress gives us full control over the presentation of our websites. We specify which classes and attributes to use in our template files, and then apply CSS using our theme’s custom stylesheet. Behind the scenes, WordPress generates its own classes and IDs, and applies them to specific HTML elements in theme files and database content. Having these default hooks available makes it super-easy to custom-style your theme’s blockquotes, post images, widget items, and much more.
6 Ways to Display WordPress Post Content in Multiple Columns
Most blogs display their post content in single columns, like what we do here at Digging Into WordPress. But you know it’s also possible to display post content in multiple columns. Multiple-column layouts are perfect for newspaper and magazine-style themes. This DigWP article presents six ways of getting the job done using a variety of techniques, tricks, and tips.
BLANK WordPress Theme
There are many like it, but this one is mine.
I have a “blank” WordPress theme for myself, because I make a lot of WordPress themes. Starting from Kubrick, or any other pre-made theme, would be absurd. There is to much stuff there that would to be stripped out or fought against to be useful.
So, I have my own starter theme. It’s been in a folder called BLANK-theme on my computer for a while, so I’m going to call it BLANK. And now I’m making it available for you. Read on to find out the scoop on it and you can decide if it would be of any use to you.
Custom CSS Per Post
I’ve long been a fan of “art directing” posts. That is, to apply unique CSS styling to an individual page of content when the situation calls for it. In the past, I’ve used the Art Direction plugin and I even created a screencast on using it.
As it turns out, there is a major problem with the art direction plugin. Using it with any caching plugin will result in a crazy epic meltdown of your site. Without too much gory detail, in trying to cache my blog CSS-Tricks, I tried all the major caching plugins (DB Cache, WP Super Cache, W3 Total Cache) and ultimately it would trash my WordPress database and serve up white pages. Very not good.
Include the Category ID via post_class
The default output for WordPress’ post_class template tag includes class names for just about every type of page view imaginable:
Clean Up Empty Elements with CSS 3
By default, WordPress wraps HTML comments with paragraph tags:
<p><!-- --></p>WordPress also employs various template tags that may, in certain situations, result in empty HTML elements such as paragraphs tags:
Advanced WordPress Targeting with body_class_plus()
Since WordPress 2.8, we can target specific types of page views with CSS using the new body_class() tag. Designed for use within the <body></body> element, body_class() outputs various class attributes according to the current type of page view. This makes it easy to apply page-specific styling such as current-page navigation highlighting and other nifty CSS tricks.
Free HTML5 WordPress Theme
In an effort to inspire more WordPress theme designers to embrace HTML5, I am releasing the “H5” Theme Template. The H5 Theme Template is a bare-bones WordPress theme built entirely with HTML5 and styled with some basic CSS 3.0.
As you may know, HTML5 provides greater flexibility and interoperability than previous markup languages, and enables us to build well-structured themes that are more flexible, interactive, and semantically precise. So using it to build awesome WordPress themes is a no-brainer.
Unique Body ID’s for your Pages
There are many reasons you might want to get a unique ID for your <body></body> tag. Let’s say you want your header elements to be a different color on your About page, you could apply a bit of CSS via your theme’s stylesheet (i.e., style.css). For example, you could target the About page with some styles something like this:
