Help to implement text only version of site WordPress
- SOLVED
Hi
On one of our projects, we need the user to be able to click a "Text only" button to have all the screen media stylesheets unload from the site, and to show the site to the users as just text (for accessibility). We also need to store a cookie on the user's machine so they can navigate the site in text only version until they choose to return to reload the full screen styles.
Need help to implement this.
Thanks
Marcus
Answers (5)
Arnav Joy answers:
Hello Markus ,
I would like to work in your project , but I need more information about what you want , let me know please.
Hariprasad Vijayan answers:
Hello,
You can try like this,
First track the user clicked text only version button or not. If yes, set cookie
add_action('init', function() {
if($_GET['disable_styles'] && $_GET['disable_styles']=='true') // Checking the user clicked text only version button or link
{
if (!isset($_COOKIE['disable_styles'])) {
setcookie('disable_styles', 'true', strtotime('+7 day')); // Setting cookie
}
}
if($_GET['disable_styles'] && $_GET['disable_styles']=='false') // Checking the user clicked text only version button or link
{
if (isset($_COOKIE['disable_styles'])) {
setcookie('disable_styles', 'false', strtotime('-7 day')); // cookie
}
}
});
Then remove the styles based on cookie value. The code would be like this
function remove_styles () {
if (isset($_COOKIE['disable_styles']) && $_COOKIE['disable_styles'] == 'true') {
wp_deregister_style('my-style-1');
wp_deregister_style('my-style-2');
}
}
add_action('wp_enqueue_scripts', 'remove_styles', 0);
Hope this will help.
John Cotton answers:
jQuery('link[rel=stylesheet]').remove();
would remove all stylesheets, although it would give you no way back to the styled version other than reloading the page.
So the following is the core of what you want.
<button id="remove_styles">Click for text-only view</button>
<script>
jQuery('#remove_styles').click( function() {
jQuery('link[rel=stylesheet]').remove();
});
</script>
Sébastien | French WordpressDesigner answers:
Here I write a tuto for you :)
Just one minute.
Step by step.
First :
In-between the <head> tags of your site, add your default CSS like that.
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url') ?>/style.css" title="default" />
Second :
Create a second stylesheet. An alternate stylesheet. This stylesheet is just an empty file. Or this stylesheet can be a minimal CSS like that :
a {color:red}
img {display:none;}
This stylesheet is the stylesheet for the "only text version" of your site.
Save this stylesheet as onlytext.css
Third :
Add this alternate stylesheet in-between the <head> tags of your site like that :
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/onlytext.css" title="alternate" />
Fourth :
Copy this script and save it in your theme folder as styleswitcher.js
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
Fifth :
Link this script in-between the <head> tags of your site like that for example :
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/styleswitcher.js"></script>
Sixth :
Now you can add the "switcher" : two links, at the top of each page for example, like that :
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Full version</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Only text version</a>
Finished !
zebra webdesigns answers:
Its been a late answer. But the exact solution and full working code
1. Add the cookie jquery plugin. you can either add it directly or through wordpress enqueue method.
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script>
2. add the click button
you can add your own style for the button
<div id="disable_css" >Disable/enable CSS</div>
3. add the following script for controlling cookie and setting the effect. You can also set the expire date.
<script>
function unload_css(){
jQuery('link[rel=stylesheet]').remove();
jQuery.cookie('the_cookie', 'diable_css', { expires: 7 });
}
jQuery( document ).ready(function() {
jQuery('#disable_css').click(function(){
if(!jQuery.cookie('the_cookie')){
unload_css();
}
else{
jQuery.removeCookie('the_cookie');
location.reload();
}
});
if(jQuery.cookie('the_cookie')){
unload_css();
}
});
</script>
I have enabled the same in my own site.
You can check it and confirm that this works
[[LINK href="http://www.zebrawebdesigns.com/"]]http://www.zebrawebdesigns.com/[[/LINK]]
If you need I can convert this as plugin
zebra webdesigns comments:
Hello marcus
Here is the plugin
[[LINK href="www.zebrawebdesigns.com/wp-content/uploads/disablecss.zip"]]www.zebrawebdesigns.com/wp-content/uploads/disablecss.zip[[/LINK]]
all you need to do is call the shortcode
you can give the custom name for the button and also pass the expiry date.
when the css is disabled the external stylesheet will gone. So I have made the option as inline style. so that you can also pass your own style in the shortcode for the button.
[disablecss name="disable" expiry="20" css="position:absolute;z-index:999;cursor: pointer;background:red;top:50px;right:10px;"]
if you are using the shortcode inside your template, use the following code.
<?php echo do_shortcode( '[disablecss name="disable" expiry="20" css="position:absolute;z-index:999;cursor: pointer;background:red;top:50px;right:10px;"]' ); ?>
Let me know if you need any clarification.
have a great day
zebra webdesigns comments:
Sorry the url was not properly inserted. Here is the correct plugin URL
http://www.zebrawebdesigns.com/wp-content/uploads/disablecss.zip
[[LINK href="http://www.zebrawebdesigns.com/wp-content/uploads/disablecss.zip"]]http://www.zebrawebdesigns.com/wp-content/uploads/disablecss.zip[[/LINK]]