Creating a Custom “Quote” Post Format with CSS

Does your theme provide for different types of post formats?  Many do–but often while the formats are supportedthe theme may not provide any special “mark up” or “styling” for them.   Here’s how we can use a little custom CSS (cascading style sheet) code to create a cool “quote” post format.

Note: support of custom cascading style sheets is only available for Premium, Business Plan or self-hosted blogs.  They’re very easy to do.  This post will show you how to change the cascading style sheet to style a “quote” type post format. 

The Post Formats Feature

Looking for the right theme that fits one’s vision for a blog can be very tedious. It seems like I always want this feature from one theme and that feature from another.  I really like some of the fancy elements of the magazine style blogs,  like Patch or even Penscratch.  Part of me wants to have a large page filled with lots of elements like a video feature,  photos, quotes, and “asides” — whatever they are.

Whatever they are, I WANT THEM.  Heh, that’s crazy talk!  But I have explained earlier that I love beautiful, well-designed sites.  I very much want to learn how to make them again.  But I am so not ready for the coding challenges in making my own theme from scratch. Not yet.

In developing a design, I’ve learned the hard way that less is more.   I’ve taken for my first challenge, creating my own design for the post format for “quotes.”

Post Formats: Some themes have them, some themes don’t

Post formats were introduced way back in WordPress 3.1 (around 2014)–and they are very underutilized even today. Here’s the list of themes that support post formats and what formats they support.

Theme developers create some themes that offer to “support” these formats, –that means inserting the necessary pHp coding.  Thankfully,  that saves us blog developers a bit of fuss and bother.  But most do very little (if anything) to provide any special styling for these new kinds of posts.

My current theme, Entrepreneur, provide support for many different post-formats.  But supporting them doesn’t mean “styling” them.   We’re going to learn how to do that.

I first discovered post formats because my current theme supports many of them.  When I start out a post,  I see the “Post Format”option in post settings (the first clue as to whether a blog’s theme supports a variety of formats other than “standard.”

Screen Shot 2018-02-28 at 9.02.37 PM

When I go to open up the options under the Post Format,  I get these options.  But if I choose them?  They don’t seem to work.    The pHp backend code is present–but there is nothing there in terms of style to make them “pop.”

Screen Shot 2018-02-28 at 8.05.12 AM

All of these post formats are available in Entrepreneur

This lack of styling is actually kind of a blessing.  I am not going to have to fight existing  style settings to get the effect I want!

To get this going, I needed a brush-up on my CSS coding skills.  The best place I’ve found for learning CSS — totally free–even if you have no knowledge, is CodeAcademy

I chose the CSS course and finished the whole thing in about three hours.  I’m not affiliated  with CodeAcademy or anything.  They’re just one of the best free places to learn HTML and CSS.


The CodeAcademy, like many sites on learning HTML and CSS, assumes you’re building website pages from scratch.  They run you through lessons on creating a style sheet and linking it to your webpage.   Linking the style sheet is handled entirely by the theme in Premium and Business plan sites.  If we have either of those plans, all we have to do is customize the style sheet (i.e., customize the CSS.)

Just follow the instructions to customize CSS in the theme using the “Customize Theme” process.

Simple Styling of a Quote Post Format

As an experiment, I made a “quote” post in The Entrepreneur.  It’s pretty drab.

Screen Shot 2018-02-28 at 9.11.45 PM

A “quote” post in The Entrepreneur — plain vanilla!


I tried to jazz it up by making the text purple.   In the post itself, I used a Header 2 tag to make the text larger.  It has little impact in this theme–because the entry formats –that is, how the excerpt of the “quote” post format, were not affected.  The results were. . . disappointing.  I tried other themes, but no, no.  I didn’t like any of them.

CSS to the Rescue

I struggled with the CSS for this, but I needed to have help with finding the right selectors from a Happiness Engineer.  She was able to find me the right selectors–already available in the theme–to modify.  This was the result of our collaboration.

Screen Shot 2018-03-03 at 6.37.11 PM.png

Breaking this down, in the code above, we are styling multiple ” class selectors” to the VERY  SAME parameters.

In this example, we have two “parent” classes, (.single-format-quote and .format quote) and their respective “child classes”  (which are called entry-content for BOTH of them).

Then we applied the same css to all of these classes, adding a light yellow background, Merriweather Sans –or other sans serif font, at 24px size.  And also italicized.

Screen Shot 2018-03-03 at 7.28.52 PM

Here’s the result of new css!

That’s just what I wanted.  In the next week, I’m going to be diving more into CSS to update the look of my blog without having to totally change themes.  

In my next post, we’re going to dive deep into CSS to look at more ways to tweak WordPress themes and get exactly what we’re looking for!   More tomorrow.





Categories: Blog Design, Learning CSS and HTML, Wordpress ThemesTags: ,

1 comment

Leave a Reply

%d bloggers like this: