Two Column Template for Coursepress Pro Theme

I would like to have two columns on the main content area of most, but not all, of my unit pages. See the attached wireframes for an example. Sometimes I want the column on the left, sometimes on the right (though if I can only have one, I'd like it on the left as shown in the attachment). Can you help?

  • Kasia Swiderska

    Hello Beck,

    First you need create child theme from the CoursePress theme so you can modify it to add your sidebar.
    Copy the coursepress theme from the plugins/coursepress/themes folder into your wp-content/themes folder, then you can create from it child theme as shown here https://codex.wordpress.org/Child_Themes

    Next step is to add additional sidebar for course - this code will go to functions.php of your new child theme

    add_action( 'widgets_init', 'theme_slug_widgets_init' );
    function theme_slug_widgets_init() {
        register_sidebar( array(
            'name' => __( 'Course sidebar', 'coursepress' ),
            'id' => 'new-sidebar',
            'description' => __( 'Widget will show in courses.', 'coursepress' ),
            'before_widget' => '<li id="%1$s" class="widget %2$s">',
    	'after_widget'  => '</li>',
    	'before_title'  => '<h2 class="widgettitle">',
    	'after_title'   => '</h2>',
        ) );
    }

    Now there is new sidebar. So next you have to add it to the course single page. Copy single-unit.php from parent theme to your child theme and before the

    <?php get_sidebar('footer'); ?>

    add

    <?php get_sidebar('new-sidebar'); ?>

    In the same file look for

    <div id="primary" class="content-area">

    and change it to

    <div id="primary" class="content-area course-single-unit">

    Then create file in your child theme sidebar-new-sidebar.php - put in that file:

    <?php
    /**
     * The Sidebar containing the main widget areas.
     *
     * @package CoursePress
     */
    ?>
    	<div id="secondary" class="widget-area" role="complementary">
    		<?php do_action( 'before_sidebar' ); ?>
    <?php dynamic_sidebar( 'new-sidebar' ); ?>
    	</div><!-- #secondary -->

    At this point you should have working sidebar with widgets in the unit page. Next step is to add styles in your child theme style.css

    #primary.course-single-unit {
    width: 70%;
    float: left;
    }

    for make sidebar on the left you need to change in above code left to right.

    It is possible to change them dynamically from left to right but not for whole course but depending of the unit. CoursePress doesnt add to body clasess course name but only units name. SO then you can manipulate CSS like this:

    .unit-sacascas #primary.course-single-unit {
    width: 70%;
    float: right;
    }

    Let me know if you still need any further assistance here

    kind regards,
    Kasia

  • Beck Tench

    Hi Kasia,

    This is very helpful. I've done every step now and am getting the following error.

    Parse error: syntax error, unexpected ''before_widget'' (T_CONSTANT_ENCAPSED_STRING) in /home/wyncoteadmin/public_html/coursepress/wp-content/plugins/coursepress/themes/coursepress-child/functions.php on line 37

    Here's the code of functions.php in case it's helpful:

    <?php
    
    // From Beck:
    // enqueuing the parent and child theme stylesheets
    // via instructions here: https://codex.wordpress.org/Child_Themes
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    }
    
    // From Beck:
    /* Commenting out this second part b/c I think it throws an error
    // ensuring that the child theme stylesheet loads after it
    // via instructions here: https://codex.wordpress.org/Child_Themes
    function my_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', 'my_theme_enqueue_styles' );
    */
    
    // From Beck:
    // adding additional sidebar for course
    // via instructions from WPMU Staff Kasia Swiderska
    
    add_action( 'widgets_init', 'theme_slug_widgets_init' ); function theme_slug_widgets_init() {
    register_sidebar( array(
    'name' => __( 'Course sidebar', 'coursepress' ),
    'id' => 'new-sidebar',
    'description' => __( 'Widget will show in courses.', 'coursepress' 'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' =>'</li>',
    'before_title' =>'<h2class="widgettitle">', 'after_title' =>'</h2>',
    ) ); }
    
    ?>
  • Ash

    Hello there

    Please replace the following part (at the very bottom)

    add_action( 'widgets_init', 'theme_slug_widgets_init' ); function theme_slug_widgets_init() {
    register_sidebar( array(
    'name' => __( 'Course sidebar', 'coursepress' ),
    'id' => 'new-sidebar',
    'description' => __( 'Widget will show in courses.', 'coursepress' 'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' =>'</li>',
    'before_title' =>'<h2class="widgettitle">', 'after_title' =>'</h2>',
    ) ); }

    with the following:

    add_action( 'widgets_init', 'theme_slug_widgets_init' ); function theme_slug_widgets_init() {
    register_sidebar( array(
    'name' => __( 'Course sidebar', 'coursepress' ),
    'id' => 'new-sidebar',
    'description' => __( 'Widget will show in courses.', 'coursepress' ),
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' =>'</li>',
    'before_title' =>'<h2class="widgettitle">', 'after_title' =>'</h2>',
    ) ); }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Nithin

    Hi Beck Tench,

    Hope you are doing good today. :slight_smile:

    If you want the sidebar in your unit page, you'll have to copy archive-unit.php from the parent theme, and add the sidebar as directed above.
    <?php get_sidebar('new-sidebar'); ?>

    You could use the available CoursePress widgets in your sidebar, but if I'm not mistaken, if you are looking to display content in sidebar which is specific to each unit page, I'm afraid it would require custom coding.

    I hope this helps. Please let us know if still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.