On Themes, CSS and Frameworks

Styling WordPress themes used to be a breeze. Ah, the Olden Days! No, not true: in the Olden Days, CSS standards were buggy as a beehive. And when we got the CSS code right, the blog pages would go berserk in different browsers. It was horrible. Then, CSS version 3 changed things for awhile. Now there is CSS version 4, a kind of mutant with no less than four modules, and it’s a bit of a mess again. In doing research for this blog, I’ve spent days tracking down the changes and shifts in CSS standards and practices, because even simple CSS styles are just hell   rather difficult to implement in a WordPress theme.  This post explains some of the changes and shifts.

WordPress Themes are Largely CSS and some pHp magic.

Is pHp a new term for you? It’s just a scripting language that’s used to “pre-process” our content, keeping things speedy and making sure our CSS and connections to the WordPress (or other server’s) databases are in good working order. If you have a WordPress.com blog, even a business account, you don’t have access to this scripting language. This way you don’t do what I did with my self-hosted blog, and accidentally break your whole blog (It was terrible). WordPress developers are largely working with a combination of pHp and CSS to make our WordPress themes nice and pretty and bulletproof. 🙂

The thing is, the advanced code has led to commercialization opportunities in the form of new ways to create, package, distribute and sell themes–a great boon for professional web developers making coin on building themes — but those new-fangled advanced themes are generally available outside of the WordPress.com theme store.   Most of these advancements are for self-hosted blogs, who have to pay and pay and pay.  (Been there, done that. ) 

Here’s why we have to fight a bit in order to get our additional CSS to work properly.

In the standard WordPress Themes,  “Additional CSS” page is a “child” of the Parent Theme

When we work to create more interesting styles using CSS, we’re essentially having a little dance-fight between our “Additional CSS” and the CSS that’s already there on the main “parent” theme.  The fancier the theme, the more CSS there is to have to cooperate with.   One of the problems in creating additional code for themes is that we don’t know what classes and styles already exist.

Parent Vs Child 1.png

Your Mileage May Vary

Cutting and pasting code from other resources may work great and be easy. (Excuse me while I fall over laughing.  Since the introduction of CSS 4, nothing has been easy). My production rate of blog posts has completely fallen off due to the research needed to understand how to use custom CSS for theme-building coolness. It’s been frustrating trying to get some cool effects to work properly–and I’m STILL working on the problem. External code SHOULD work easily, but it doesn’t.  And I’ve had to spend days and days investigating why that is, and what we can do about it.

Themes may not just have one parent style sheet these days–they may have several. Back in the Olden Days, we were happy when our CSS style sheets worked at all.  The early versions of CSS (especially version 2) were very hit or miss in their functionality under various browsers. CSS version 3 created a much better CSS language and the browsers all pretty much caught up with the changes.  Now there is version 4, that is all “modularized”  — and it’s just a year old, from what I can tell.

In the last three years, the creation of themes has been made more complicated by special frameworks and boilerplate themes that enable WordPress theme developers to build code on top of  these boilerplate templates–which should make it easier, but doesn’t.  My research now is focused on getting a handle on the boilerplate of common WordPress themes to be able to manipulate them more effectively without having to go full on developer.

This explains why my current theme, The Entrepreneur,  HAS “hooks” for formatting quotes and links and other formats, but the actual styling of those post formats is completely blank.   They can then SAY they’ve got post formats, but really, all the post formats look just like the standard posts.   This also helps to explain two other phenomena:  the samey-same quality of themes overall.  Here’s a link to my format-post CSS struggle with the Entrepreneur theme. 

There must be some boilerplate theme underneath.   I’m investigating how to get a look at that.

The updates to CSS in CSS version 4 COULD explain why there are, beginning in 2017, a whole host of new commercial (paid-for) WordPress themes available outside of the WordPress.com environment. Probably the most well known is the Genesis framework from Studiopress. Genesis is complicated and requires an advanced level knowledge or a ton of toolkits–most likely both–to customize it.

More Research Coming At Ya

I’ve been trying to get my arms around this, but at this point, it’s a morass of commercialized dreck.  Here is one site from ColorLib that provides links to SEVENTEEN different tutorials and template thing-a-ma-bobs that begins to provide the hints to the crazy that’s going on behind the themes. It’s nothing more than seventeen attempts to sell you different frameworks, boilerplates, and tutorials for managing this — all of fairly indifferent quality.

This topic is requiring some serious digging.   Posts may be a bit less “every day” for a while.  In the end, I plan to have some tips and tricks for spicing up themes without having to take a year-long intensive course on web development.    More tomorrow–I promise.   Best, Lola.

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.