Tech Stuff

A Couple Of Divi Tricks (updated)

A few small things that came up in reworking a portfolio site set up in Divi.

Setting Up A Child Theme

Remember, kids, the old way of using @import to create a child theme in WordPress is no more. Here’s how.

First, make a new folder to hold your theme. This is the same as the same-old procedure. Ours is going to be called “Son Of Divi.”

Inside it, create two files: style.css and functions.php. “style.css” just has this:

/*
Theme Name: Son Of Divi
Theme URI: http://mysite.com/son-of-divi/
Description: Divi Child Theme
Author: Elegant Themes
Author URI: http://elegantthemes.com
Template: Divi
Version: 1.0.0
Text Domain: Son-Of-Divi
*/
/* Start your custom CSS below this comment
============================================ */

Right — no @import directive.

Instead, “functions.php” is where the parent theme styles get pulled in.

<?php

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

Portfolio Thumb Sizes

For some reason the portfolio block refused to show square thumbnails. No matter what I did it cropped them in seemingly irrational ways, and nothing I could do in CSS solved it. So finally I discovered that some settings in the PHP code needed to be changed. Back to the functions.php code:

add_filter( 'et_pb_portfolio_image_height', 'portfolio_size_h' );
add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' );
function portfolio_size_h($height) {
return '225';
}
function portfolio_size_w($width) {
return '255';
}

Then after rebuilding the thumbnails (using one of the standard plugins for that purpose) they appeared as we wanted them.

Modifying the Header

These are pretty easy, and can be included in the Divi::Theme Options panel, at the bottom where you find custom css entries. First, move the phone and email contact information to the right:

#et-info {
float: right;
}

Then enlarge the area and increase the font size:

#top-header, #top-header .container, #top-header #et-info, #top-header .et-social-icon a {
font-size: 14px;
line-height: 2em;
}

Replicating the Contact Info in the Footer

This requires grabbing the CSS that draws the icons in the top bar and duplicating it. However the top bar is based on #id, and since we can’t use the same #id twice we’ll have to go with a .class:

.et-info-phone::before {
content: "?";
margin-right: 2px;
position: relative;
top: 2px;
}
.et-info-phone::before {
font-family: "ETmodules" !important;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
margin-right: 4px;
}
.et-info-email::before {
font-family: "ETmodules" !important;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin-right: 4px;
text-transform: none;
}
.et-info-email::before {
content: "?";
margin-right: 2px;
position: relative;
top: 2px;
}
.et-info-email {
color: #fff;
float: none;
margin-right: 13px;
}

What you might not beseeing here is the right glyph for the phone and email icons. That’s because, I guess, this editor I’m using doesn’t support them well.  So if they don’t, use Firebug to study the CSS for the top entries and copy-and-paste the glyphs from there.

Then you can add a text widget to the footer (or anywhere really) like this:

<span class="et-info-phone">973-555-5555</span>

<a href=”mailto:appleaday@mac.com”><span class=”et-info-email”>appleaday@mac.com</span></a>

Form Code

I needed to change the font color for the CAPTCHA, which was too grey to show over a midtone background. Ultra-trivial:

.et_pb_contact_captcha_question {
color: #000;
}

Forward-and-Back Through The Portfolio

See below for an update.

Like posts, portfolio items feature handy forward-and-back links to the previous/next entries. Unless you use the Divi builder. Which of course you are because that’s why you went with Divi in the first place.

Similar...  Yikes Indeed

It’s not an option or even a module you can add, so you’re going to have to modify the page template itself. So create a new file, “single-project.php”, in your child theme folder. Copy and paste in the code from the parent theme file of the same name. Thanks to Karen B at ET Support for this. Change:

&lt;?php if ( ! $is_page_builder_used ) : ?&gt;
&lt;?php if ( 'et_full_width_page' !== $page_layout ) et_pb_portfolio_meta_box(); ?&gt;
&lt;div class="nav-single clearfix"&gt;
&lt;span class="nav-previous"&gt;&lt;?php previous_post_link( '%link', '&lt;span class="meta-nav"&gt;' . _x( '?', 'Previous post link', 'Divi' ) . '&lt;&lt;/span&gt; %title' ); ?&gt;&lt;/span&gt;
&lt;span class="nav-next"&gt;&lt;?php next_post_link( '%link', '%title &lt;span class="meta-nav"&gt;' . _x( '?', 'Next post link', 'Divi' ) . '&lt;/span&gt;' ); ?&gt;&lt;/span&gt;
&lt;/div&gt;&lt;!-- .nav-single --&gt;
&lt;?php endif; ?&gt;

With this:

&lt;div class="nav-single clearfix"&gt;
&lt;span class="nav-previous"&gt;&lt;?php previous_post_link( '%link', '&lt;span class="meta-nav"&gt;' . _x( '?', 'Previous post link', 'Divi' ) . '&lt;/span&gt; %title' ); ?&gt;&lt;/span&gt;
&lt;span class="nav-next"&gt;&lt;?php next_post_link( '%link', '%title &lt;span class="meta-nav"&gt;' . _x( '?', 'Next post link', 'Divi' ) . '&lt;/span&gt;' ); ?&gt;&lt;/span&gt;
&lt;/div&gt;&lt;!-- .nav-single --&gt;

Basically you’re just removing the outer loop. This will add the links right above your footer. The bad news is they’re so tiny and faint as the be almost unfindable. So back to your custom CSS screen. Here’s we’re going to match them up with the color we’re using for our top bar (in our case, lime green with white text).

.nav-single.clearfix {
background: #67d600 none repeat scroll 0 0;
height: 3em;
padding-top: 0.4em;
}
.nav-next {
float: right;
margin-right: 20%;
}
.nav-previous {
float: left;
margin-left: 20%;
}
.nav-previous &gt; a, .nav-next &gt; a {
color: #fff;
font-size: 1.3em;
line-height: 1.5em;
}

Another Way

Thanks to Stack Exchange, You can do this with shortcodes. Throw away your child theme’s single-project.php file (maybe don’t throw it away and keep it as a backup) and add this to your functions.php:

add_shortcode( 'prev', 'prev_shortcode' );
add_shortcode( 'next', 'next_shortcode' );
function prev_shortcode($atts) {
    global $post;
    ob_start();
echo '&lt;span class="nav-next">';
    previous_post_link( '%link', _x( ' %title&rarr;' . '&lt;span class="meta-nav">', 'Previous post link', 'Divi' ) . '&lt;/span>' );
echo '&lt;/span>';              
    $result = ob_get_contents();
    ob_end_clean();
    return $result;
}
function next_shortcode($atts) {
    global $post;
    ob_start();
echo '&lt;span class="nav-previous">';
    next_post_link( '%link', _x( '&larr;' . '%title &lt;span class="meta-nav">', 'Next post link', 'Divi' ) . '&lt;/span>' );  
echo '&lt;/span>';          
    $result = ob_get_contents();
    ob_end_clean();
    return $result;
}

And change your CSS to match:

.nav-single.clearfix {
  height: 3em;
  padding-top: 0.4em;
  border-top: 0;
}
.nav-next {
  float: right;
  margin-right: 0;
}
.nav-previous {
  float: left;
  margin-left: 0;
}
.nav-previous > a, .nav-next > a {
  color: #67d600 ;
  font-size: 1.3em;
  line-height: 1.5em;
}

We’re no longer working with the green background with white text; we’ll just put green text on the white background.

Now you’re armed with two new shortcodes, which you can pop into one of Divi’s “Code” modules. I created this and saved it to the library so it can go into every project.

next-previous-library-module

And this is what’s inside:

So there’s a couple of little things you can do with a little elbow grease and the Google. We’ve changed the header around, organized the portfolio module better, replicated the contact information bar in a footer widget, added next/previous links to our portfolio items. Hope this helps someone.

3 thoughts on “A Couple Of Divi Tricks (updated)”

  1. Portfolio Thumb Sizes: You saved me on this. I stumbled on your post after hours of searching and attempting to fix this on my own, you really saved my project. Thank you!!!!

  2. Hi I don’t have a child theme of Divi, and all my style in WordPress,
    The problem is that my WordPress call from subfolder abc.com/demo as a domain and when I change the domain abs.com/demo to abc.com then my all Divi theme configuration revert.

Leave a Reply

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