Wordpress Divi Child Theme

From Tech Wiki
Jump to navigation Jump to search

To create a Child Theme in Wordpress For Divi to edit the footer text follow the below:

SSH into Web Server as Root User

Then run the following commands:

cd /var/www/vhosts/example.com/htdocs/wp-content/themes
mkdir Divi-Child
chown -R examplecomuser:examplecomuser Divi-Child
cd Divi-Child

e

Create a file called syle.css with the following command:

vi style.css

The copy and paste the following text into the syle.css file:

/*
Theme Name: Divi Child Theme
Template: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 2.7.1
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* YOUR CSS EDITS GO BELOW THIS LINE AND AND CSS RULES YOU MAKE HERE WILL OVERIDE THE MASTER DIVI THEME CSS RULES */

Then create a file called functions.php with the following command:

vi functions.php

Then copy and paste the following text into the functions.php file:

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
<?php
add_action('wp_footer', 'add_googleanalytics');
function add_googleanalytics() { ?>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-76137983-1', 'auto');
  ga('send', 'pageview');

</script>
<?php } ?>

Then create a file called footer.php with the following command:

vi footer.php

Then copy and paste the following text into the footer.php file changing the section of text id=“footer-info”>© 2016 Adam Birds | Professional Portfolio as you please:

<?php if ( 'on' == et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

	<span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>

			<footer id="main-footer">
				<?php get_sidebar( 'footer' ); ?>


		<?php
			if ( has_nav_menu( 'footer-menu' ) ) : ?>

				<div id="et-footer-nav">
					<div class="container">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'footer-menu',
								'depth'          => '1',
								'menu_class'     => 'bottom-nav',
								'container'      => '',
								'fallback_cb'    => '',
							) );
						?>
					</div>
				</div> <!-- #et-footer-nav -->

			<?php endif; ?>

				<div id="footer-bottom">
					<div class="container clearfix">
				<?php
					if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
						get_template_part( 'includes/social_icons', 'footer' );
					}
				?>

						<p id=“footer-info”>© 2016 Adam Birds | Professional Portfolio</p>
					</div>	<!-- .container -->
				</div>
			</footer> <!-- #main-footer -->
		</div> <!-- #et-main-area -->

<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

	</div> <!-- #page-container -->

	<?php wp_footer(); ?>
</body>
</html>

Then run the following commands:

chown -R examplecomuser:examplecomuser *
service mariadb restart
service php-fpm restart
service nginx restart

Then navigate to /wp-admin/themes.php of your website and click Activate on your Child Theme.