Divi Builder with Custom Theme – Javascript error (What is required, What to consider)

I’m trying to use Divi Builder with a custom, simple theme i made. It worked at first, but I noticed that when it comes to advanced CSS, the Divi plugin does not generate the necessary inline-CSS, like it does with other themes. (Tested with Twenty Sixteen).
Confronted with this problem, I compared, and finally added various divi-framework scripts I found referenced in Twenty Sixteen, which lead me to my next problem: A javascript error I’m not able to resolve.

Sadly, I haven’t found anything helpful on the internet concerning this topic.
I mean, what to consider when using Divi Builder with a custom theme in general..

Read More

So the basic, simplified structure of the theme is this:

<?php get_header(); ?>
<?php get_sidebar(); ?>

<body class="et_divi_builder">
 <main>

    <div id="content" class="mainelement">
        <div class="inner">
            <?php
            if (have_posts()) {
                while (have_posts()) {

                    the_post();
                    the_content();

                }
            }
            ?>
        </div>
    </div>

</main>

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>

<!-- DIVI BUILDER FRAMEWORK SCRIPTS -->
<script src="http://domain.com/wp-content/plugins/divi-builder/framework/scripts/frontend-builder-global-functions.js?ver=1.1.1" type="text/javascript"></script>
<script src="http://domain.com/wp-content/plugins/divi-builder/framework/scripts/jquery.fitvids.js?ver=1.1.1" type="text/javascript"></script>
<script src="http://domain.com/wp-content/plugins/divi-builder/framework/scripts/waypoints.min.js?ver=1.1.1" type="text/javascript"></script>
<script src="http://domain.com/wp-content/plugins/divi-builder/framework/scripts/jquery.magnific-popup.js?ver=1.1.1" type="text/javascript"></script>
<script src="http://domain.com/wp-content/plugins/divi-builder/framework/scripts/frontend-builder-scripts.js?ver=1.1.1" type="text/javascript"></script>

<?php get_footer(); ?>
</body>

Firebug gives me this: “ReferenceError: et_pb_custom is not defined”
Saying it’s this line

“$et_container = ! et_pb_custom.is_builder_plugin_used ? $( ‘.container’ ) : $( ‘.et_pb_row’ ),”

in frontend-builder-scripts.js?ver=1.1.1

(Still not generating the CSS).

Am I missing something (obvious)?
Does anyone have experience with this?

I’d love to hear some comments, anything helpful.
Thank you!

Related posts