Adding layout features of coursepress to divi

Dear WPMU DEV community,

At the moment I am busy with creating an LMS-system in the DIVI-theme together with Coursepress and some other plugins. However, by using the shortcodes of Coursepress in the divi-builder does not give me a nice layout like it has with the default coursepress theme.

I would like to copy that layout specifically for the course listing pages and course detail pages. I work in a child-theme, so CSS and PHP adjustments are possible.

I tried to copy some parts of the CSS code of Coursepress, but then the whole website takes over the layout and that is not what I want.

Can someone please assist me in this? :slight_smile:

Thank you so much in advance.

  • Zyniker

    Would you mind providing a link to the site so that we can take a look at the code? I suspect you're running into some conflict's with Divi's own CSS and scripting. As much as I like Elegant Theme's products, their code can be a bit less than clean (particularly when it comes to CSS and questionable uses of the "!important" flag).

    (To be fair, it does seem like they are working on the sloppiness issue.)

  • Dimitris

    Hey there Simon,

    hope you're having a beautiful day and thanks for reaching us! :slight_smile:

    The whole CoursePress Pro theme can be found in /wp-content/plugins/coursepress/themes/coursepress folder. You can even copy this folder to /wp-content/themes/ and deal with it like a normal theme, even creating a child-theme for it!

    Most probably you'll need some more CSS rules in your case to combine CP with Divi theme though, so it will be a great help if:
    1. you could provide us with some support access to have a better look (details can be found here: https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/)
    2. you could describe to us all of the changes that have to be made (even a sketchup/mockup would be perfect).

    Warm regards,
    Dimitris :slight_smile:

  • Dimitris

    Hey there Simon,

    hope you're having a beautiful day! :slight_smile:

    The screenshot you shared with us is more or less the CoursePress default theme itself without major changes, or at least I couldn't spot them, feel free to correct me of course! :slight_smile:

    What I'd propose would be to use the default CoursePress theme as I mentioned in my previous reply, by copying /wp-content/plugins/coursepress/themes/coursepress/ folder to /wp-content/themes/ and create a child-theme for your modifications. You may not have the page builder that Divi provides, but you'll have a solid base at least for your course's pages and you can always use third-party plugins to make things easier in development like page builders, advanced widgets etc.
    Getting the other way round, making Divi to be more or less the same as CoursePress theme, would require more time on building templates and fine tuning CSS rules.

    Warm regards,
    Dimitris

  • Simon

    The problem is that i use a lot of features from the divi theme to build an slick website.
    This also includes styling other pages and plugins.

    It is mainly the arrangement of the items in the pictures I want to achieve. At the moment in my DIVI-theme the layout looks like this and I don't find it that appealing.

    Same goes for the course list (i can't get it to show the course icons and more in a structured / nice way.

    See attachements

    I am working in a child theme of DIVI and already did a lot of CSS styling to the website, including the buttons and more.. but i can't get the order of the layout correctly.

    many thanks in advance

  • Dimitris

    Hello Simon,

    I can understand that having done a lot of work on something make it difficult to let it go just like that, so let's try to make this work the way you need through Divi theme. :slight_smile:

    Apart from using shortcodes (that can be found in /wp-admin/admin.php?page=coursepress-pro_settings&tab=shortcodes) in pages, there's another approach that might help you out reproducing the CoursePress theme design, and that's template files as CoursePress registers a coursepress custom post type.
    So, you can create a archive-course.php file for course archives and a single-course.php file for single courses. You can see and reproduce these files from /wp-content/plugins/coursepress/themes/coursepress/ folder. You'll notice that these files are using some "sub-template" files using the get_template_part() function and some CoursePress specific functions (for example for courses navigation in single views) so this may require some more digging and testing. But, you can also notice the actual shortcodes being used in there too, so hopefully this could be a helpful step.

    Having said that, it would be perfect if you could provide us a simple sketch/mockup of your desired design and the specific difficulties that you find right now, and we can see then how to proceed. Just try to be as descriptive as possible and hopefully we'll be able to help you out! :slight_smile:

    Warm regards,
    Dimitris

  • Simon

    Hello Dimitris,

    That would be awesome. I tried to duplicate the theme by using the shortcodes, but then the pages need to be added or deleted manually + each shortcode must be mentioned and liked specifically. This means a lot of "additional" maintenance.

    I tried to add the 2 php-files to my child theme, but then the whole page breaks down. The rest of the website is intact, only the courses are broken.

    My desired design is almost literally the Coursepress layout for the courses (jpg 102, 3 comments above).

    The difficulty is that DIVI puts its own "post"-style over the page and rearranges the single course structure by itself, therefore, killing the page with the other php file.

    So in my eyes the main trick can be 3 ways...
    - either adjusting the page structure of the specific course in DIVI-php file
    - getting the single_course.php to work within the divi theme.
    - Using shortcodes to rearrange and enlarge the complexity and size of the website.

    I hope this is sufficient information so we can proceed.. I will dig a bit further as well :wink:

    Kind regards,

    Simon

  • Adam Czajczyk

    Hello Simon!

    I tried to add the 2 php-files to my child theme, but then the whole page breaks down. The rest of the website is intact, only the courses are broken.

    I think it would be helpful to turn on WP debugging by adding following line to the "wp-config.php" file of the site:

    define('WP_DEBUG',true);

    That would throw errors on screen and it should help you identify why the site breaks. As my colleague Dimitris explained, the files from CoursePress themes would be using some "sub-files" and/or specific CoursePress functions. Those sub-files would then have either to be moved to your theme folder as well and the functions may need to be copied to the "functions.php" file of your theme/child-theme. Debugging should show you which those are.

    So in my eyes the main trick can be 3 ways...
    - either adjusting the page structure of the specific course in DIVI-php file
    - getting the single_course.php to work within the divi theme.
    - Using shortcodes to rearrange and enlarge the complexity and size of the website.

    Hopefully above way should help you make "single-course.php" (it should be "single-course", not "single_course") to work. Give it a try please and let's see where it gets us :slight_smile:

    Best regards,
    Adam

  • Dimitris

    Hey there Simon,

    hope you're having a beautiful day today! :slight_smile:

    In order to make the single course template render with no errors, apart from copying
    /wp-content/plugins/coursepress/themes/coursepress/single-course.php
    to
    /wp-content/themes/YOUR-THEME-NAME/single-course.php
    (replace YOUR-THEME-NAME with appropriate folder of active child-theme)

    you should also copy
    /wp-content/plugins/coursepress/themes/coursepress/content-course-overview.php
    to
    /wp-content/themes/YOUR-THEME-NAME/content-course-overview.php
    as it's included with a get_template_part() function.

    There's also couple of functions that should be included in your child-theme also. One is the coursepress_post_nav() that you mentioned and another one is coursepress_categorized_blog() which is being called in the template part.
    If you copy next functions (these are simply a copy from CoursePress plugin) in the functions.php file of your child-theme, then the single course template is being rendered without errors.

    /**
     * Returns true if a blog has more than 1 category.
     */
    function coursepress_categorized_blog() {
      $all_the_cool_cats = get_categories( array(
        'hide_empty' => 1,
      ) );
    
      $all_the_cool_cats = count( $all_the_cool_cats );
    
      if ( '1' != $all_the_cool_cats ) {
        // This blog has more than 1 category so coursepress_categorized_blog should return true.
        return true;
      } else {
        // This blog has only 1 category so coursepress_categorized_blog should return false.
        return false;
      }
    }
    
    /**
     * Display navigation to next/previous post when applicable.
     *
     * @return void
     */
    function coursepress_post_nav() {
      // Don't print empty markup if there's nowhere to navigate.
      $previous	 = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
      $next		 = get_adjacent_post( false, '', false );
    
      if ( !$next && !$previous ) {
        return;
      }
      ?>
      <nav class="navigation post-navigation" role="navigation">
        <h1 class="screen-reader-text"><?php _e( 'Post navigation', 'cp' ); ?></h1>
        <div class="nav-links">
    
          <?php previous_post_link( '%link', _x( '<span class="meta-nav">?</span> %title', 'Previous post link', 'cp' ) ); ?>
          <?php next_post_link( '%link', _x( '%title <span class="meta-nav">?</span>', 'Next post link', 'cp' ) ); ?>
    
        </div><!-- .nav-links -->
      </nav><!-- .navigation -->
      <?php
    }

    Hope that helps,
    Dimitris

  • Dimitris

    Greetings Simon,

    I'm glad you made this work so far! :slight_smile:

    I guess these misbehaviours (left margin and gray background color) can be surpassed through CSS, as your theme is interfering.
    Or are there any other issues you're dealing with?

    If you find these CSS difficult, I can help you if you provide me with support access in your website.
    Detailed information can be found here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/.

    Whenever you grants us access, post back here with a single course link in order to have a better look. :wink:

    Kind regards,
    Dimitris

  • Simon

    Hello Dimitris,

    I changed the upper part of the PHP of the single-course.php to match the single-php start of the DIVI theme.. This puts the page in the right format, but places all the content in the footer :slight_frown:

    Thats why it is grey.. since it is the background of my page, which i need to be grey.

    This is how my php looks like now :stuck_out_tongue:

    <?php
    
    get_header();
    
    ?>
    
    <div id="main-content">
    	<div class="container">
    		<div id="content-area" class="clearfix">
    			<div id="left-area">
    
    			<?php while ( have_posts() ) : the_post(); ?>
    
    				<?php get_template_part( 'content-course-overview', 'single' ); ?>
    
    				<?php coursepress_post_nav(); ?>
    
    				<?php
    					// If comments are open or we have at least one comment, load up the comment template
    					/*if ( comments_open() || '0' != get_comments_number() ) :
    					comments_template();
    					endif;*/
    				?>
    
    		<?php endwhile; // end of the loop. ?>
    
    			</div> <!-- #left-area -->
    
    			<?php get_sidebar(); ?>
    		</div> <!-- #content-area -->
    	</div> <!-- .container -->
    </div> <!-- #main-content -->
    
    <?php get_footer(); ?>
  • Dimitris

    Hey there,

    in order to make the single-course.php consistent with your current theme, I examined the /help page and I altered the markup getting to something like this:

    <?php
    
    get_header();
    
    ?>
    <!--  markup based on current main theme (Divi) : start -->
    <div class="entry-content">
      <div class="et_pb_section  et_pb_section_0 et_pb_with_background et_section_regular">
        <div class=" et_pb_row et_pb_row_0 et_pb_row_fullwidth">
          <div class="et_pb_column et_pb_column_4_4  et_pb_column_0">
    <!--  markup based on current main theme (Divi) : end -->
    
    			<?php while ( have_posts() ) : the_post(); ?>
    
    				<?php get_template_part( 'content-course-overview', 'single' ); ?>
    
    				<?php coursepress_post_nav(); ?>
    
    				<?php
    					// If comments are open or we have at least one comment, load up the comment template
    					/*if ( comments_open() || '0' != get_comments_number() ) :
    					comments_template();
    					endif;*/
    				?>
    
    		<?php endwhile; // end of the loop. ?>
    
    			</div>
    		</div>
    	</div>
    </div>
    
    <?php get_footer(); ?>

    Feel free to use this template file instead and see how that goes! :slight_smile:

    Kind regards,
    Dimitris