Origin Story
Over the years I’ve seen a number of people embedding WordPress within the LMS using iframes. There are lots of reasons to do this but it’s not something that WordPress is really meant to do. You end up with an odd feeling as it’s a website within a website and many things feel out of place (headers, footers, sidebars). I said something on Twitter one time that I might make a theme that would behave better in those kinds of scenarios. I was able to find that tweet using Twitter’s semi-hidden advanced search. Note that Sept. 9, 2018 date. It’s been a while but here’s a super simple theme that tries to play well in the land of iframe embeds.
What is the best #WordPress theme that allows a seamless #LMS integration? #webdev #EdTech #bcpse
— Erin Beattie (she/her) (@ehbeattie) September 9, 2018
Show Only What You Want
As is my pattern, I figured I could hide most of the extra things through javascript and use the URL’s query string parameters1 as the way to decide what was shown.
I haven’t built out all the various parameters but for this theme, I added some javascript to look at the URL for a ‘show’ parameter. So https://baseurl.com/some-page/?show=article will show only the
Now if we embed that URL in an iframe, we’ll see the clean version. That opens up an amazing amount of flexibility.
Here’s the brute force javascript that does that. It has three parts. Part one gets the value from the URL. Part two gets all the pieces of the page via the IDs. Part three adds a class named hidden to the various components. In a future iteration, we could get much fancier and add/remove elements from an array but I figured this would be easier to understand for people looking to learn this stuff.2
//GET THE URL VALUE - PART ONE const urlParams = new URLSearchParams(window.location.search); const show = urlParams.get('show'); //GET THE PAGE COMPONENTS - PART TWO const headerNav = document.getElementById('wrapper-navbar'); const rightSidebar = document.getElementById('right-sidebar'); const footer = document.getElementById('wrapper-footer'); const adminBar = document.getElementById('wpadminbar'); const privacy = document.getElementById('private'); const primary = document.getElementById('primary'); //HIDE CERTAIN PIECES DEPENDING ON THE URL VALUE - PART THREE if (show === 'article') { headerNav.classList.add('hidden'); rightSidebar.classList.add('hidden'); footer.classList.add('hidden'); adminBar.classList.add('hidden'); privacy.classList.add('hidden'); primary.removeAttribute("class"); primary.classList.add('col-md-12 content-area') }
iFrame Sizing
This is where things get more complex. I was hoping to avoid people having to hand-set any iframe values (height, width etc.). I’ve looked at this before and it’s messy. This time around I found a GitHub page that offered a variety of ways to solve the cross-domain iframe height problem.
The Dual Javascript Path
The method I went with the first time relied on two javascripts. This works great if your LMS doesn’t strip script tags. Our Blackboard install doesn’t strip these tags. So an embed code set something like what you see below does a great job.
<iframe frameborder='0' scrolling='no' width='100%'src='http://192.168.33.10/wordpress/minimal/for-a-title/?show=article'></iframe> <script async src='https://rampages.us/extras/js/set-iframe-height-parent-min.js'></script>
That method gets us something nice and clean like the screenshot below in anything that doesn’t strip out script tags.
When I moved to our Canvas test install I found the filtering there to be much more aggressive. No script tags and a variety of other things I messed with in the iframe itself were stripped- including the scrolling parameter. I tried something slightly different in this case. I knew I could get the height of the element via javascript. I could add that into the iframe element and build the embed code on the fly. If I set it as the min-height via the style element it sort of works but things get messy again on mobile views etc. I’m still think about this but given Jeff was working on a twelve minute plugin that would use the Canvas API to allow WordPress to publish directly to Canvas I may not spend a huge amount of time on this.
let main = document.getElementById('primary'); let iframeHeight = main.clientHeight;
That works and results in an iframe code like you see below. I just let the LMS editor clean it up as it desires rather than creating two different patterns.
<iframe frameborder='0' scrolling='no' width='100%' style='min-height:632px;' src='http://192.168.33.10/wordpress/minimal/for-a-title/?show=article'></iframe><script async src='https://rampages.us/extras/js/set-iframe-height-parent-min.js'></script>
Next Steps?
This was about an hour’s worth of work when I wanted a break from a variety of other projects I’d been working on. I am still kind of interested in how this might work (mainly the iframe portion) but future effort will likely depend on some sort of additional interest from someone. If I don’t see that then I’ll likely put this in my back pocket3 I’m confident a number of the concepts will come back around in the future.
Aside
You may note that my Blackboard HTML editor looks like an old school terminal. This was actually done in response to a faculty member with failing vision who asked if something like that was possible. I did it for a demo and it amused me so I left it on. It uses Stylebot and the following CSS>
#htmlSource { background-color: #000; color: green; font-size: 1.5em; } .contentList { background-color: #424242; }
Seems like there should be something like browsers do for readability mode, there are a few Chrome extensions. This plugin might do some of the work, but not really the kind of layout https://wordpress.org/plugins/wp-distraction-free-view/
Was wondering if there was a decent theme switcher still working; I used one that happened a url parameter to present a different theme, but not sure its around.
I agree with the browser mode. This particular usage would be when you want a normal website for the public but also want to entwine it with an LMS where headers/sidebars etc. might not be useful or would cause confusion.
I have not seen a theme switch in a while. That’d be kind of fun to make.