Creating Custom Category Layouts using the Divi theme

Recently, I ran into an issue where I wanted to easily define layouts for a Divi theme for different categories. Note, I don’t use Divi for this blog, but in my day job, we have a lot of Divi-based sites.

For this particular site, I wanted to allow content creators to easily customize layouts for different categories or group of categories using Divi.

Well, it turns out someone has done the hard work and published this tutorial on how to easily customize a category page (using Divi). That article was based on another article called Use a Divi Built Layout for Category Page which took a more heavy-handed approach, but still worked.

After installing the category.php page in the theme, I was expecting it to work… but it didn’t.

So I went through some checks:

  1. File uploaded to Server. Yep!
  2. Double check uploaded to server. Yep!
  3. Is WordPress taking the right template? Yep! (Thanks to this simple plug-in)
  4. Is there an error in the code logic? Nope.

In short, I couldn’t figure out what the issue was, so I started searching for solutions online. Afterwards, I started echoing out variables and discovered that the code was looking for categorie.php (French). I thought was strange considering my “Template Reveal” plug-in was telling me I was on category.php. Well, as it turns out… I forgot that I lived in: Canada.

The problem was in the switch statement in this code:

$local =  get_locale();
switch ($local) {
  case 'en_US': case 'en_GB':
    $my_cat = 'category';
    break;
  case 'it_IT': case 'es_ES':
    $my_cat = 'categoria';
    break;
  case 'de_DE':
    $my_cat = 'kategorie';
    break;
  default:
    $my_cat = 'categorie';
}

It turns out that $local was defaulting to categorie so it wasn’t finding my category.php file. The developer did a good job of compensating for multiple languages, and even included two large English speaking countries, but living in Canada (or any other English speaking country), isn’t included. (The locale would be en_CA in English Canada).

Note: It’s common for English speaking Canadians to set language defaults to en_US for lots of things like keyboards, defaults, dates, etc… so I didn’t even think to check default locale for the website.

While I could have added en_CA to the list of checks for english, I figured a more inclusive way was just use the first two characters representing the language instead. I also prefer to have each case statement on its own line.

// Just grab the first 2 characters of the locale.
$locale =  substr( get_locale(), 0, 2 );

switch ( $locale ) {
  case 'en':
    $my_cat = 'category';
    break;
  case 'it': 
  case 'es':
    $my_cat = 'categoria';
    break;
  case 'de':
    $my_cat = 'kategorie';
    break;
  case 'fr': 
  default:
    $my_cat = 'categorie';
}

Because the original code was in French, I figured I’d keep the default French, but you could of course change things around to make any language the default.

Sometimes it’s a really simple thing missing that makes something not work as intended. You end up spending more time than is necessary looking for problems in how you implemented something, when you should simply check the simple things first. In this case,  this meant checking the locale.

Leave a Reply

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