Child theme for Serene

Not long ago, I came across a beautiful WordPress theme called Serene. It’s designed for large screens, but it’s also responsive, so it looks good on small screens, too. I decided to switch out my current theme, Twenty Thirteen, in favor of Serene. There are many things I like about Serene. But in my opinion,…

Not long ago, I came across a beautiful WordPress theme called Serene. It’s designed for large screens, but it’s also responsive, so it looks good on small screens, too. I decided to switch out my current theme, Twenty Thirteen, in favor of Serene.

There are many things I like about Serene. But in my opinion, there are some things missing. So I set out to create a child theme for Serene, in order to add those things.

A new post format

Serene has an awesome implementation of the gallery post format: it displays the first gallery in the header above the post content. I thought that was awesome, but thought it would be nice if there was a similar treatment for a single image. So I added the image post format.

Breakpoints are dumb

Serene is responsive, but it doesn’t play too nicely with narrower screens. Instead of a fluid width for everything below a certain threshold, it still enforces specific widths based on breakpoints, making the single column of content extremely narrow on some devices (for example, my phone). I have remedied that.

Small tweaks

I’ve also made some changes that I prefer, such as the treatment of the excerpt in different post formats and some style tweaks here and there.

3 responses

  1. Dear Paul,

    Could you help me with my serene child theme ? I have an issue with the icon of the magnifying glass. You can see it on my website : http://www.mes-sommets.fr.

    Did you had this issue as well ?

    Also, could you share some of your tricks on your serene-child theme ? :)

    Thank you very much for your time.

    Best regards,

    Benjamin

  2. Benjamin,

    It looks like the font used for the icon, ElegantIcons, is not being included in your theme. Make sure the stylesheet elegant-font.css is being included; you should find it inside Serene’s css directory.

  3. Paul,

    You were right but it was not enough. I had enqueue several stylesheet without changing the name. So elegant-font.css was loaded with the wrong URL.

    BTW, I really like what you have done to the theme, you manage to deal with the big picture (that can confuse the user) in a very nice way :)

    ciao ciao

Leave a Reply to Paul Cancel reply

Your email address will not be published. Required fields are marked *

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

Related