Note: Edwiser Bridge’s templates have been modified in the WordPress plugin version 2.1.0
If you have overridden the standard Edwiser Bridge templates previously, then please make sure that your templates are made compatible with the NEW Edwiser Bridge template. It may cause CSS breaks if not done. Please refer to this article for theme compatibility.
On installing Edwiser Bridge plugin, you may find that the alignment and display of the ‘course archive’ page and the ‘single course page’ is not the way you would like it to be. This happens because the HTML structure that is being used in Edwiser Bridge might differ from that being used in your theme. We recommend you to use Divi or Flatsome to avoid these glitches. However, we do have a guide for making your existing theme compatible with Edwiser Bridge templates.
The following steps can be followed to make Edwiser Bridge compatible with your theme:
Step 1:
Create a folder named ‘edwiserBridge’ in your theme folder (preferably inside the child theme). The path of the created folder will be ‘wp-content/themes/{themename}/child-theme/edwiserBridge’
Step 2:
Now go to ‘wp-content/plugins/edwiser-bridge/public/templates’, copy the following files and paste them in ‘wp-content/themes/{themename}/child-theme/edwiserBridge’ folder.
- archive-eb_course.php
- content-eb_course.php
- content-single-eb_course.php
- single-eb_course.php
Step 3:
Edwiser Bridge’s archive page template overriding.
Navigate to ‘wp-content/themes/{themename}/edwiserBridge/’ and open the ‘archive-eb_course.php’ file present in this folder. Here you will find the below structure.
<?php [INITIALISATIONS] <?php get_header(); ?> <div class="eb-archive-container"> <?php $template_loader->wpGetTemplate('global/wrapper-start.php', $wrapper_args); ?> [CONTENT] <?php $template_loader->wpGetTemplate('global/wrapper-end.php', $wrapper_args); ?> </div> <?php get_footer(); |
Replace the above structure, except the [INITIALISATIONS] and [CONTENT] part with the structure in your theme’s archive.php file. The archive.php file can be found on the following path. wp-content/themes/{themename}.
If the archive.php file is missing from the theme then you can use the theme’s index.php files structure. The index.php file can be found on the following path: wp-content/themes/{themename}.
For the template content, start
Remove the line (this line loads the default template wrapper elements).
$template_loader->wpGetTemplate('global/wrapper-start.php', $wrapper_args); |
And add the page content wrapper element here.
<section id="primary" class="content-area" style="overflow:auto; padding:15px;"> <main id="main" class="site-main" role="main"> |
For the template content end
Remove the line (this line loads the default template wrapper elements).
$template_loader->wpGetTemplate('global/wrapper-end.php', $wrapper_args); |
And add the page content closing wrapper element here.
</main> </section> |
Step 4:
Navigate to ‘wp-content/themes/{themename}/edwiserBridge/templates/’ and open the ‘single-eb_course.php’ file present in this folder. Here you will find the below structure.
<?php /** * The template for displaying all single Moodle™ courses. */ namespace app\wisdmlabs\edwiserBridge; [INITIALISATIONS] <?php get_header(); ?> <?php $template_loader->wpGetTemplate('global/wrapper-start.php', $wrapper_args); ?> [CONTENT] // Showing sidebar if you don't need sidebar you can remove below code. // Sidebar start do_action( 'eb_archive_before_sidebar', $wrapper_args ); get_sidebar(); // Use this Hook to close sidebar containers. do_action( 'eb_archive_after_sidebar', $wrapper_args ); // Sidebar end <?php $template_loader->wpGetTemplate('global/wrapper-end.php', $wrapper_args); ?> <?php get_footer(); |
Replace the above structure, except the [INITIALISATIONS] and [CONTENT] part with the structure in your theme’s single.php file. The single.php file can be found on the following path ‘wp-content/themes/{themename}’.
For the template content, start
Remove the line (this line loads the default template wrapper elements).
$template_loader->wpGetTemplate('global/wrapper-start.php', $wrapper_args); |
And add the page content wrapper element here.
<section id="primary" class="content-area" style="overflow:auto; padding:15px;"> <main id="main" class="site-main" role="main"> |
For the template content end
Remove the line (this line loads the default template wrapper elements).
$template_loader->wpGetTemplate('global/wrapper-end.php', $wrapper_args); |
And add the page content closing wrapper element here.
</main> </section> |
Once you have executed the above steps, the display of the ‘course archive page’ and ‘single course page’ should blend with the look of your theme.
So that’s about the steps you have to follow to make Edwiser Bridge Compatible with your theme.
Feel free to use the comments section for any queries you might have! Or you can also email us here: [email protected]
Join Us on Facebook
Check out our group on Facebook, ‘Moodle Tips & Tricks’ – the name says it all. We’d love it if you impart some of your Moodle™ wisdom and contribute to the treasure trove of tips and tricks!
27 thoughts on “How to make Edwiser Bridge Compatible with Your Theme [Developer Guide]”
Hello,
i hope all is well.
I need help please.
I followed your instruction for the best of my abilities to make Edwiser Bridge Compatible with my theme (Highend by by HB-Themes) without an success.
I wished I could upload the files i edited to give you the chance to take a look.
I could not tell that to leave in part of the theme code and what to replace exactly. I did not know what you meant by [CONTENT].
So i include the original theme file codes below to see if you can help me with the code changes.
Thank you for the help.
George
[email protected]
archive.php code —————————————————————————————
<div class="row main-row”>
1){
$search_counter = ($paged-1) * get_option(‘posts_per_page’);
} else {
$search_counter = 0;
}
} elseif ( get_query_var(‘page’) ) {
$paged = get_query_var(‘page’);
if ($paged > 1){
$search_counter = ($paged-1) * get_option(‘posts_per_page’);
} else {
$search_counter = 0;
}
} else {
$paged = 1;
$search_counter = 0;
}
while (have_posts()) : the_post();
$search_counter++;
$format = get_post_format( get_the_ID() );
$icon_to_use = ‘hb-moon-file-3’;
if ($format == ‘video’){
$icon_to_use = ‘hb-moon-play-2’;
} else if ($format == ‘status’ || $format == ‘standard’){
$icon_to_use = ‘hb-moon-pencil’;
} else if ($format == ‘gallery’ || $format == ‘image’){
$icon_to_use = ‘hb-moon-image-3’;
} else if ($format == ‘audio’){
$icon_to_use = ‘hb-moon-music-2’;
} else if ($format == ‘quote’){
$icon_to_use = ‘hb-moon-quotes-right’;
} else if ($format == ‘link’){
$icon_to_use = ‘hb-moon-link-5’;
}
$thumb = get_post_thumbnail_id();
$full_thumb = wp_get_attachment_image_src( get_post_thumbnail_id ( get_the_ID() ), ‘original’) ;
echo ”;
echo ”. $search_counter .”;
if ( $thumb ) {
$image = hb_resize( $thumb, ”, 80, 80, true );
echo ‘‘;
} else {
echo ‘‘;
}
$echo_title = get_the_title();
if ( $echo_title == “” ) $echo_title = __(‘No Title’ , ‘hbthemes’ );
echo ‘‘.$echo_title.’‘;
echo ”. get_the_time(‘M j, Y’) .”;
echo ”;
the_excerpt();
echo ”;
echo ”;
endwhile;
hb_pagination_standard();
else : ?>
single.php file code ————————————————————————————————————-
<div class="row main-row”>
<article id="post-” itemscope itemType=”http://schema.org/BlogPosting”>
<time datetime="” itemprop=”datePublished”>
|
<a href="” title=”” rel=”author”>
|
<a href="term_id ); ?>” title=”name ) ); ?>”>cat_name; ?> 0 ) echo ‘, ‘; ?>
|
<a href="#comments” class=”comments-link scroll-to-comments” title=””>
|
‘next’, ‘previouspagelink’ => ‘ ‘, ‘nextpagelink’=>’ ‘)); ?>
<?php
if ( hb_options('hb_blog_enable_tags' ) )
the_tags('Tags: ‘,”,”);
?>
<a href="#comments” class=”comments-link scroll-to-comments” title=””>
get_plugin_name(), EB()->get_version() );
$plugin_template_loader->wp_get_template_part( ‘content-single’, get_post_type() );
comments_template();
endwhile; ?>
end ————————————————————————————–
Thanks again…
Hey George,
I’ll follow-up with you regarding this via email.
Step 3: ‘wp-content/themes/{themename}/edwiserbridge/templates’ open the ‘archive-eb_course.php’ file present in this folder.
open archive.php in my template
which is exactly what needs to be replaced? The content?
Step 4: ‘wp-content/themes/{themename}/edwiserbridge/templates/’ and open the ‘single-eb_course.php’
I have not folder template only edwiserbridge in step 1
Thanks
Step 3:
Navigate to ‘wp-content/themes/{themename}/edwiserbridge/templates’ and open the ‘archive-eb_course.php’ file present in this folder. Here you will find the below structure.
Should be
Step 3:
Navigate to ‘wp-content/themes/{themename}/edwiserbridge’ and open the ‘archive-eb_course.php’ file present in this folder. Here you will find the below structure.
Please fix. Thanks.
Thanks Rasel. We’ve updated the article 🙂
Hello
I do not know which is the CONTENT part . It is a little confused, sorry.
This is my template archive:
<?php
if(is_category()) :
single_cat_title();
elseif(is_tag()) :
single_tag_title();
elseif(is_author()) :
printf( __('Author: %s', 'wp-profile' ), '’ . get_the_author() . ”);
elseif(is_day()) :
printf( __( ‘Day: %s’, ‘wp-profile’ ), ” . get_the_date() . ” );
elseif(is_month()) :
printf( __(‘Month: %s’, ‘wp-profile’ ), ” . get_the_date( _x( ‘F Y’, ‘monthly archives date format’, ‘wp-profile’ ) ) . ” );
elseif ( is_year() ) :
printf( __(‘Year: %s’, ‘wp-profile’ ), ” . get_the_date( _x( ‘Y’, ‘yearly archives date format’, ‘wp-profile’ ) ) . ”);
elseif ( is_tax(‘post_format’, ‘post-format-aside’)) :
_e( ‘Asides’, ‘wp-profile’ );
elseif (is_tax(‘post_format’, ‘post-format-gallery’)) :
_e( ‘Galleries’, ‘wp-profile’ );
elseif (is_tax(‘post_format’, ‘post-format-image’)) :
_e( ‘Images’, ‘wp-profile’ );
elseif (is_tax(‘post_format’, ‘post-format-video’)) :
_e( ‘Videos’, ‘wp-profile’ );
elseif ( is_tax(‘post_format’, ‘post-format-quote’)) :
_e(‘Quotes’, ‘wp-profile’);
elseif (is_tax(‘post_format’, ‘post-format-link’ )) :
_e( ‘Links’, ‘wp-profile’ );
elseif(is_tax(‘post_format’, ‘post-format-status’)) :
_e( ‘Statuses’, ‘wp-profile’);
elseif(is_tax( ‘post_format’, ‘post-format-audio’ )) :
_e( ‘Audios’, ‘wp-profile’ );
elseif(is_tax( ‘post_format’, ‘post-format-chat’ )) :
_e( ‘Chats’, ‘wp-profile’ );
else :
_e( ‘Archives’, ‘wp-profile’ );
endif;
?>
<?php
// Show an optional term description.
$term_description = term_description();
if(!empty( $term_description )) :
printf('%s’, $term_description);
endif;
?>
Aureliano
This was a bit more difficult with the Karma Theme but I have managed to get it to work. Thank you for the tutorial, it really helped
It looks like this article is out of date. In the file archive-eb_course.php, for example, I do not find anything like the structure indicated above. The same is true of single-eb_course.php. That being the case there would be no way to follow these instructions. I suppose that the structure of the code has changed enough that this article would need to be updated.
Could you provide some guidance regarding this? The plugin appears to be working great except that I need to be able to have better control over the formating of the pages it displays.
Thanks,
Cameron Bunch
I have just noticed something related to this issue. It looks like the wrapper-start.php and wrapper-end.php files are doing something like this with a case statement driven by the identities of the common standard themes. Wouold these files play into the solution?
Regards,
Cameron Bunch
Good morning, I hope you are well.
Could you please explain the following sentence by using an example or saying the same thing using other words, because I don’t understand it:
“Replace the above structure, except the [INITIALISATIONS] and [CONTENT] part with the structure in your theme’s archive.php file. The archive.php file can be found on the following path. wp-content/themes/{themename}”.
Thank you very much
Alexandra Smaranda
I’m integrating Moodle into WordPress. Thank you for these instructions.
Glad to be of help, Cuong.
Ok, I’m lost as to what this instruction means: “Replace the above structure, except the [INITIALISATIONS] and [CONTENT] part with the structure in your theme’s archive.php file. The archive.php file can be found on the following path. wp-content/themes/{themename}. ”
Can you please help me understand this better? Thanks.
I’m integrating Moodle into WordPress. How can I access and display Moodle courses on my website, Instead of Moodle site?
Hi Afzal,
Your course content will not be imported into the WordPress site. However, you can enroll yourself in the Moodle course from the WordPress site.
How I can get course custom fields from moodle and display in wordpress course page?
Hi Nahim,
One of my team members Vrushabh is in touch with you regarding this.
Regards,
Adarsh
Adarsh hi. I’m trying to apply my theme’s style to the Edwiser Bridge. And Im really confused. Because I can’t find [INITIALISATIONS] and [CONTENT] parts that I need to replace.
Also, is it possible to apply Woocommerce pages Styles to the Edwiser Bridge pages? If yes, would be great to know how to do that.
Thanks.
Can I use this way to customize the other template like user profile, my course or etc.?
Hello Praditha,
The steps mentioned in this document are specific to making Edwiser Bridge compatible with WordPress themes that are not compatible with it.
If you wish to customize other templates like user profile, my course, etc then you could certainly do that within the child theme.
Hi Raj
We are about to switch our website from WiX to WordPress in order to use Edwiser Bridge. Is there an article that would specify the most compatible themes/settings for the Edwiser Bridge? We are already using the Edwiser RemUI theme on our Moodle site. We want this to be as smooth as possible.
Thank you
Dana
Hi Dana,
The Most compatible theme for Edwiser Bridge plugin will be Flatsome and Divi theme for your WordPress site.
Thank you.
Can this whole process be added as an option in settings?
It seems that trying to do what the instructions say is not easy.
I am using the WP NEVE theme and the single course page doesn’t show the right widget bar.
I am afraid to experiment with Edweiser because I have a lot of customers and I do not want to annoy them if things go wrong.
Hi Jim
The process cannot be part of a setting because every theme has a different structures and containers. Therefore, the templates does not work out of the box with every other theme.
In our product, we have made sure Edwiser Bridge templates work well with Flatsome and Divi.
However, since you are using a different theme therefore I would suggest you follow the complete Developer guide to make Edwiser Bridge templates compatible with your theme.
I have this message on my Wordpress site:
If you have overridden the standard Edwiser Bridge templates previously then please make sure that your templates are made compatible with the NEW Edwiser Bridge template. It may cause CSS breaks if not done. Please refer to this article for theme compatibility
I have recently installed the Pro version and the Woo360 Child theme was active when Edwiser was installed. My question is, would it be easier to move to the Divi or Flatsome Theme to eliminate any potential problems?
Hi Gary!
This message is only a warning and it does not mean that you will face the issue. However, we do recommend Divi and Flatsome since our plugins are tested and work out of the box in these themes. If you are using any other theme then you can simply make the Edwiser Bridge templates compatible with your theme by referring to this article: https://edwiser.org/blog/how-to-make-edwiser-bridge-compatible-with-your-theme/.
Hello friends, its wonderful piece of writing
concerning cultureand completely explained, keep
it up all the time.