How to have a text-only view of a WordPress website in addition to the fully themed view? - wordpress

I have a client who is interested in having a text-only view of their website available to visitors with accessibility needs. This would be in addition to the usual, fully themed view.
I like what the Kennedy Center did for text-only view, www.kennedy-center.org/text. I like how it appears to the user as a subdirectory, but I am trying to figure out how to accomplish that in WordPress. Two themes? Subdirectory? Session cookie? Intercepting the URL and loading different stylesheets?
Any suggestions or any built-in capability that anyone can suggest?
Thanks...
...Allen

A very fast way to go is to set a cookie and a GET variable.
Basic example:
In function.php:
if (isset($_GET['text'])) {
setcookie("is_text", 'true', time()+60*60*24*365*10,"/");
}
In header.php:
if (isset($_COOKIE['is_text'])||isset($_GET['text'])) {
// text CSS stylesheet
} else {
// standard CSS stylesheet
}
So you can switch the view in every page just by adding ?text to your url.

Try to use Theme Switcher plugin.
See here for the demo: http://www.nkuttler.de/wordpress-plugin/theme-switch-and-preview-plugin/

Related

Full Screen iframe in Wordpress

I am working SEO on wordpress, my goal is to rent out a page by using iframe to put my clients webpage all over mine, but in wordpress if I use iframe the toolbar and widgets remain there. Is there way of hiding everything and just leaving another web page on top of mine? Thank you for your time.
Please note that using an iframe might not contribute much in terms of SEO. Have a read through this article. What might be relevant:
iFrames are merely referencing the content, instead of duplicating it. When robots crawl the site and register the iframe tag, they will attribute the original source with any SEO credit instead of the page using the embedded content – i.e. the page with the iFrame.
That said:
To hide the admin toolbar, either disable it in your profile, via /wp-admin/profile.php. Or do this programmatically (in functions.php) with something like:
if (!is_admin) {
add_filter('show_admin_bar', '__return_false');
}
To remove widgets, try following the tutorial on justintadlock.com, in functions.php add something like:
add_filter( 'sidebars_widgets', 'disable_all_widgets' );
function disable_all_widgets( $sidebars_widgets ) {
$sidebars_widgets = array( false );
return $sidebars_widgets;
}

Wordpress + angularJS route + SEO

I'm currently on a project where I want to have :
Wordpress for easy content managment.
AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
And care about the SEO.
In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).
I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.
So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).
But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.
Any ideas will be welcome ! :)
Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)
Example:
mysite.com/my-test-page
Wordpress
In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.
One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.
Then return the page data as JSON, return json_encode($pageArray);
AngularJS
Route: Do a simple GET:
.when('/:page_slug', {
templateUrl: 'views/page.html',
controller: 'PageController',
resolve: {
page : function($route) {
return $http.get(wp_ajax_url,
{
'action': 'the_ajax_hook',
'data': $route.current.params.page_slug
}
);
}
}
})
SEO
Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.
http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html
Apart from that you can use other services to make your site SEO-friendly today:
getseojs.com
brombone.com
prerender.io

Wordpress: Simple solution to have mobile devices load a different homepage

I have done quite a bit of googling and have not found a simple solution for a method or a plugin to simply load a different static homepage for mobile devices. Is there a way to do this or a plugin that will do this (without revamping the whole site for mobile devices, as the mobile site style is good, but the specific static homepage is the only thing that I need changed). Wordpress CMS is the platform.
Thanks in advance!
Update:
So I installed the plugin suggested below, copied over an exact copy of the theme I am using but named it with 'mobile' in front just for reference, other than that everything is exactly the same. I read via google that I could add the following code into the functions.php theme file but it just shows up blank when I add the specific code. Code:
//Set Homepage
$mobilehome = get_page_by_title( 'mobilehome' );
update_option( 'page_on_front', $mobilehome->ID );
update_option( 'show_on_front', 'page' );
// Set the blog page
$blog = get_page_by_title( 'Blog' );
update_option( 'page_for_posts', $blog->ID );
Update 2, solved.
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I think that this is as simple as it could get:
Try this plugin - UserAgent Theme Switcher
It will use the user-agent to detect which browser you are on, in this case it could be something like mobile safari or android, etc... then serve the theme based on that.
This could be a hit or miss because you might want or not to change the theme. A more advanced way to do this would be to use a jQuery plugin that checks for the user agent and lets you "do stuff" after you detect it, in this case it could serve as another page or change some CSS.
It's easy and no need to code everything. Install "Redirection" plugin from wordpress repository.
Go to the settings page.
Enter the "Source URL" with your default desktop's homepage
On the "Match" option, select "URL and user agent" & on the "Action" option select "Redirect to URL". Click "Add Redirection".
New configuration option will be appeared. Give any title you want. The "Source URL" must be blank (means that is your base homepage). On the "User Agent" option, choose whether iPhone or Android. On the "Matched" option, set the redirection you want for the mobile homepage.
Done!
You surely can differentiate the homepage on desktop and mobile device based on the redirection you have set before with that plugin. However, you cannot have same url name (ex: www.abcde.com for desktop & www.abcde.com/mobilehomepage for mobile device).

Drupal - Replace the home page

Hi
Anyway to stop people browsing the Drupal home page and redirect to my specific html page?
Thanks you
For Drupal 7 you need to use page--front.tpl.php
If your theme doesn't have a page.tpl.php that you can copy, then copy it from your base theme if you are using one or:
modules/system/page.tpl.php
This should be placed in your custom theme folder in (assuming this is not a multisite):
sites/all/themes/my_theme
I tend to structure my themes as follows:
my_theme.info
templates/html.tpl.php
templates/page/page--front.tpl.php
templates/node/node.tpl.php
templates/block/block.tpl.php
css/style.css
But it doesn't really matter where it is, it will be picked up after a cache clear.
If you have specific HTML page that it is on the server and doesn't generated from Drupal, the most easy way is to use Drupal goto.
How to do it? open your template.php and search for page_preprocess function it should look like that:
YOURTHEME_preprocess(&$variables, $hook) {
if( drupal_is_front_page()) {
drupal_goto('yoursite.com/yourpage.html')
}
}
change YOURTHEME to your theme name and clear the cache.
The real Question why should you use static HTML file for your homepage? I would create some article or view for homepage and change it as I like with theming... It is much easier than any other alternative.

Drupal administration theme doesn't apply to Blocks pages (admin/build/block)

A site I'm creating for a customer in D6 has various images overlaying parts of the main content area. It looks very pretty and they have to be there for the general effect.
The problem is, if you use this theme in the administration pages, the images get in the way of everything.
My solution was to create a custom admin theme, based on the default one, which has these image areas disabled in the output template files - page.tpl.php
The problem is that when you try and edit the blocks page, it uses the default theme and half the blocks admin settings are unclickable behind the images. I KNOW this is by design in Drupal, but it's annoying the hell out of me and is edging towards "bug" rather than "feature" in my mind. It also appears that there is no way of getting around it.
You can edit /modules/blocks/block.admin.inc to force Drupal to show the blocks page in the chosen admin theme. BUT whichever changes you then make will not be transferred to the default theme, as Drupal treats each theme separately and each theme can have different block layouts. :x
function block_admin_display($theme = NULL) {
global $custom_theme;
// If non-default theme configuration has been selected, set the custom theme.
// $custom_theme = isset($theme) ? $theme : variable_get('theme_default', 'garland');
// Display admin theme
$custom_theme = variable_get('admin_theme', '0');
// Fetch and sort blocks
$blocks = _block_rehash();
usort($blocks, '_block_compare');
return drupal_get_form('block_admin_display_form', $blocks, $theme);
}
Can anyone help? the only thing I can think of is to push the $content area well below the areas where the image appear and use blocks only for content display.
Thanks!
in template.php you can put
function YOURTHEME_preprocess_page(&$vars) {
if (implode('/', arg()) == 'admin/build/block'){
$vars['body_classes'] = $vars['body_classes'].' administer_block';
}
}
and you'll have a nice body class which you can use to hide those images using CSS.
If anyone's still having a problem with this, a bit similar to barraponto's solution above, if you are using the admin menu module, it adds a class (.admin-menu) to the body, which you can use to hide any overlaying divs etc that are getting in the way.
you can apply admin theme wherever you want using hook_init() in your custom module:
function yourmodule_init()
{
if ( some condition here like arg(0) == 'foobar'
or node_load(arg(1))->type == 'something' )
{
$GLOBALS['custom_theme'] = variable_get('admin_theme', '0');
drupal_add_css(drupal_get_path('module', 'system') .'/admin.css', 'module');
drupal_add_js(drupal_get_path('theme', 'myadmintheme').'/jscripts/adminjs.js');
}
}
EDIT: then (probably) you have to use form_alter against the block editing form to restore the target theme. in this way you don't have to hack the core.
Thanks for bringing up this topic! I was having the same problem, and it's annoying. Here's how to remedy it without a single line of code:
1) Switch the main theme to your administration theme.
2) Configure Blocks. This always affects the currently selected main theme.
3) Switch the main theme back to what it's supposed to be. Your admin theme will still reflect your changes.
could just use the block-admin..... tpl file from block module and theme it in your custom theme. I have done this way as admin theme module never overrides block admin even when you use custom path bit.
If you don't need your new theme while performing administration tasks, you can use a different theme while doing so.
Goto "Site Configuration" -> "Administration Theme". Here you can pick the theme to be used while doing admin. So your new theme is only used while users are viewing your site. And you can do admin tasks without the interference of all your images.

Resources