Categories
WordPress

Simone 2.0: Custom backgrounds, sidebar position, RTL support, and more

After much ado Simone 2.0 is now live in the WordPress Theme Directory. The theme is cresting 50,000 downloads already and for the new version I decided to bake in some of the most requested new features.

Custom Background

Using the Customizer to change the background color in the Simone WordPress theme
Set a custom background color or background image in the Customizer

One of the standard WordPress theme features that were not available in the original version of Simone was custom background color and custom background image. This was a deliberate choice on my part because the way I designed the theme changing the background color and/or adding a background image made little sense. However after seeing several sites running Simone with custom backgrounds (usually added through child themes) I realized this omission may have been unnecessary.

Therefore, as of version 2.0 you can now set a custom background color and/or custom background image through the Customizer.

The custom background function only kicks in on index and archive pages and appears behind the white content boxes. For single posts and pages the background remains solid white throughout.

Sidebar Position

Setting the sidebar position in the Simone WordPress theme
Set sidebar position and content display in archives in the new Theme Options panel in Customizer

In 2.0 the Customizer has a new section called Theme Options. From here the site admin can change the position of the sidebar and the index content length. By default the sidebar appears hard right and will stick to the right hand side on larger screens. Since its launch users have requested the ability to switch the sidebar position to the left. As of this new release the site admin now has this option. The behavior is the same as previously: The sidebar sticks to the left-hand side regardless of screen width.

Index Content Length

Speaking of index and archive pages several requests were made to provide an option to select the length of content displayed on index and archive pages. The theme was originally designed to display the first post of the index and any archive page with a full-size featured image and the full content (unless truncated with the <more> tag) and the rest of the posts with a smaller image and the post excerpt.

In 2.0 a new option has been added to the Customizer under Theme Options to change the index and archive displays of all posts from excerpts to full content. This setting effects all archives as well as search results.

RTL Support

One of the goals I had when releasing Simone was to make it available and usable for as many people as possible. Part of this effort was to make the theme fully translatable through standard internationalization methods. Since its release 13 language translations have been added to the theme by community members. However, out of the box the theme only supported LTR languages.

As of 2.0 Simone now fully supports RTL languages and ships with translation files for Farsi. When an RTL language is activated all components of the theme are mirrored: The main and social menus are reversed and repositioned, the search bar is moved to the left, and all content is reversed. I am currently working on getting translations for other RTL languages which will be released in future updates.

Simpler Child Themes

If you are a reader of this site you know there is some controversy brewing over the recommended method for calling in styles from parent themes in child themes. This issue prompted me to change the way stylesheets are loaded in Simone to make it easier for the user to build child themes. With the help of Ulrich Pogson the stylesheets in Simone are now enqueued in such a way that a child theme automatically inherits the correct styles.

For child theme authors this means you no longer have to use an @include or the new wp_enqueue_style() code to pull in the original stylesheet. All you have to do is create a style.css file and add the standard child theme header and the parent theme styles are loaded in the background. The child theme styles will automatically override both the main stylesheet and the layout stylesheets for right sidebar, left sidebar, and no sidebar.

To deactivate the parent theme stylesheets all together or individually you can do so by adding wp_dequeue_style() functions in the child theme functions.php file as in this example:

 <?php
 add_action( 'wp_enqueue_scripts', 'dequeue_parent_theme_styles', 11 );
 function dequeue_parent_theme_styles() {
   wp_dequeue_style( 'simone-parent-style' );
   wp_dequeue_style( 'simone-layout' );
 }

Simone is for You!

Simone is quickly becoming a popular theme in the WordPress Theme Directory, in no small part thanks to the support it’s gotten from the accessibility community. Now it’s your turn to take the theme for a spin, check out the new features, and show me what you can do with it. And if you have ideas for improvements or future additions, let me know either in the comments below or by submitting an issue on Github. As you can see from this release I listen to the users and update the theme to fit your needs. Simone was built to be used and I want you to be able to use it for what you want. So go get started!

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

16 replies on “Simone 2.0: Custom backgrounds, sidebar position, RTL support, and more”

Hello, Morten.

I’m a developer and I began to use your theme on my website. Today I’ve upgrated it to this new version. It’s working fine.

I’ll follow you on github and try to contribute whenever I can. Thank you for this wonderful theme.

Hi Morten,
My name is mahmoud salah
I am from egypt
I can help you in translating you theme to the arabic (RTL) language
just send me the data that you want to translate at my mail

Morten
Thanks for the continuous improvements to the theme.

I need to change the fonts used to match other corporate uses. Can I dequeue the parent theme fonts and enqueue the new fonts in the child theme? Or is another method recommended?

Absolutely love Simone and I switched to it early on after launching my official blog on December 1st of this year. I’m finding an issue with pictures. Any text tends to wrap around the pictures, whether the pics are individual or in a gallery, and creates a disorganized look.

For an example, you can go to the Writing section of my blog (/writing) and see how the images and text are just bunched up together. Even after double spacing, the blog automatically spaces the images and text this way.

Any ideas how to fix this?

@Eric: The theme is designed to float images left or right depending on settings, and when the space allows for it the images will float outside the grid. This assumes that the images you add are fairly large and that they are added individually, not in groups. In your case most of the images are small and added in groups causing the odd alignment issues you are experiencing. Looking at the way you’ve added the images I would suggest either combining the images that appear next to one another in a single image or displaying them in a more structured way (brand image first, then author image further down). You are working outside the “normal” parameters of the layout of the page and that usually causes some issues.

Your course for building Simone taught me a lot about web development and how to build WordPress themes from the starter theme Underscores. I even uploaded my own Undersores-based theme on WordPress.org.

I’m also the author of the following article, which mentions you as one of the must-follow people in the WordPress community:
http://themelead.com/must-follow-people-wordpress-community/

My own website also uses Simone as a base and I have built a custom child theme based on Simone to serve my purposes.

If you require a link from my website, let me know. I’m still not certain whether I should place one.

Yavor Spassov from http://myowndesigns.info

could you expand on:

With the help of Ulrich Pogson the stylesheets in Simone are now enqueued in such a way that a child theme automatically inherits the correct styles.

Did you use it as he detailed in the related post or have you modified it better to suit simone?

hi mor10 in your course you showed me creating this simone theme. i followed step by step that course. but i found in the search next to social menu that search toggle jump up about 2rem after slide down, and this happened to just in Firefox not chrome. so what does exactly you updated for this case (i saw in this website not happened) .
one more in onepage style on your another course why grunion contact form doesn’t work for call-to-action page while when i go to the actual page itself work.
thank u mor10.

I just started using the Simone theme myself and could not believe it when I was able to create a child template from Simone without enqueuing within a functions.php.

“For child theme authors this means you no longer have to use an @include or the new wp_enqueue_style() code to pull in the original stylesheet. All you have to do is create a style.css file and add the standard child theme header and the parent theme styles are loaded in the background. The child theme styles will automatically override both the main stylesheet and the layout stylesheets for right sidebar, left sidebar, and no sidebar.”

No overrides are working for me.

The header in the style.css is standard child-theme.

I tried wp_dequeue_style() for the parent styles, and then put all the styles from the parent style into the child one – no styles.

My styles header for the child look like:

/*
Theme Name: Simone Child
Theme URI: http://mysite.com
Description: Simone Child Theme
Author: John
Author URI: http://mysite.com
Template: simone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

What am I doing wrong?

Thanks,

-John

Hi Morten.

I am preparing my site/blog, and I really like your theme. I think that it would be better if it could display two sidebars (both left and right) at the same time. Can you give me suggestion how can I achieve this? Thanks in advance, Ivan

I have built a theme based on Simone through your Lynda.com course: Building WordPress Themes from Scratch. I have two questions:

(1) Is there any chance you might update the course or provide guidance as how to incorporate the new additions to Simone 2.0. I’m not sure how to approach this since I have already revised Simone to my own needs.

(2) I would like to know if you can provide a tutorial or instructions as to how to revise the Functions.php enqueue scripts that point to css style pages within a child theme. I too am faced with the problem of creating a child theme that contains not only the styles.css file, but layouts as well. I see that you have addressed this issue, but would like to know if you will present a solution.

Many thanks for your excellent work!

Comments are closed.