Script to quickly create a Divi child theme

by | Sep 28, 2022 | WordPress

A best practice in WordPress is to never modify a third-party theme directly. Instead any modification you need to make should be done inside of a child theme.

The same applies when using Divi (affiliate link).

Here is a quick bash script that will simplify this process.

Note: The commands and theme images are from here.

I used the WordPress droplet from Digital Ocean (affiliate link) to test this script so you may need to adjust the script depending on where your site’s web root is located.

#!/bin/bash
cd /home/becauseiforgetthings/htdocs/becauseiforgetthings.com/wp-content/themes
mkdir divi-child
cd divi-child
cat <<EOT > style.css
/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
EOT
cat <<EOT > funcitons.php
<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
EOT
wget https://www.elegantthemes.com/blog/wp-content/uploads/2018/02/screenshot-copy.png
mv screenshot-copy.png screenshot.png
cd

Hide mobile menu on phone and tablet in Divi

by | Sep 25, 2022 | WordPress

I’ve had several Divi WordPress sites now where the mobile menu (hamburger) was unwanted. The mobile menu is great to hide a complicated navigation structure but for a simple site it can be overkill.

By default the Divi menu component will collapse the menu into a mobile hamburger menu by default and there is no way to disable this functionality in the Divi builder.

A little CSS will solve the problem.

I discovered the solution here but will also put it below in case that site ever disappears.

  1. Add a custom class to your Divi menu module: hide-mobile-menu
  2. Add the following CSS to your Divi site (style.css or Divi options)
.hide-mobile-menu.et_pb_menu .et_pb_menu__menu,
.hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
  display: flex !important;
}
.hide-mobile-menu .et_mobile_nav_menu {
  display: none;
}