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).
Related
I'm creating a website in WordPress. I'm using dashicons for rating (manually) holidays.
It used to work, but after update the dashicons won't be visible for non-logged in users. Only, if you login, you can see the star ratings.
The star rating should be visible on the left top of each holiday deal.
Who knows a solution?
Website url is www.ikwilopvakantie.nl
Dashicons is the official icon font of the WordPress admin as of 3.8..
To load Dashicons for non logged in users:
Open directory {your-website-folder/wp-content/themes/}
Go into the folder of your active child theme ( if you don't have active child theme, open the folder of your active parent theme )
Find there functions.php file and add the provided code at the end of it (
make sure, there isn't ?> php closing tag at the end of file. if so, just remove it ):
function ww_load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'ww_load_dashicons');
Save changes. Dashicons will loads on your website for all users.
EDIT: there may be some plugin/code, which removed Dashicons from pages. Try to change your code with this one:
function ww_load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'ww_load_dashicons', 999);
Try this:
<span class="bx-next dashicons dashicons-arrow-right-alt2"></span>
'dashicons-arrow-right-alt2' is the class of the icon.
You can find them here: https://developer.wordpress.org/resource/dashicons/#arrow-up-alt
This has to go to your functions.php file:
function load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'load_dashicons');
For me the problem was simply that my browser blocker addons weren't allowing the source of dashicons.css
If you're using the plug-in "Asset CleanUp", you can navigate to "BULK CHANGES" and easily use "Remove site-wide rule" at the line, where the url for "dashicon" is listed.
Many of the icons on the official list were appearing blank for me when defined as a value of the menu-item property in the register_post_type function.
If you open wp-includes/css/dashicons.css you will see a complete list of icons available, many of which have different names, for example dashicons-quote is actually dashicons-editor-quote.
Using these values solved the problem for me. I also found this cheat sheet to be helpful if you don't want to go digging through your source files.
Solved for me— For some reason, dashicons was only not rendering when I wasn't accessing the https:// version of the site.
I'm trying to get browser-sync to work with my multipress wordpress install, for simpler mobile / responsive development.
Currently I'm having problems in that, my normal development takes place at local.example.com, and browser-sync is proxying this (via 123.456.78.9:3202, as per browser sync).
So far browser-sync loads the site, but none of my scripts or CSS are loading (although images load fine). They jsut fail with no response in the network panel.
I'm using NGINX for hosting the site, as opposed to apache.
Does anyone have any wordpress browser-sync experience? Am I missing something with the browser-sync set up? And tips for this would be super welcome. I'd love to get this as a solid part of my work flow.
The problem is to do with how wordpress handles URLs, in that it normally uses full URLs for including content and links etc.
The proxy is trying to access these on another domain and that's why it's failing.
Update
A much simple, cleaner and maintainable strategy, that also helps with development environments is to use the Root Relative URLs plugin. Adds hooks and configs similar to below, but also updates your content and editors to apply the same structure, so it's a bit more robust
Original Answer
You can add a simple hook (source: wordpress relative urls) to filter wordpress generated urls and remove the base domain so you get relative links to styles and posts etc:
$relative_url_filters = array(
'script_loader_src', //js
'style_loader_src', //css
'post_link', // Normal post link
'post_type_link', // Custom post type link
'page_link', // Page link
'attachment_link', // Attachment link
'get_shortlink', // Shortlink
'post_type_archive_link', // Post type archive link
'get_pagenum_link', // Paginated link
'get_comments_pagenum_link', // Paginated comment link
'term_link', // Term link, including category, tag
'search_link', // Search link
'day_link', // Date archive link
'month_link',
'year_link'
);
foreach ( $relative_url_filters as $relative_url_filters ) {
add_filter( $relative_url_filters, 'wp_make_link_relative' );
}
Which should clean up most of your issues and get browser-sync working nicely.
I'm still having some issues where I have more complex inclusions for images, but more or less it's working and we're already seeing how cool it is!
I'm building a website in WordPress which has a separate mobile theme (this obviously uses the same database as the main site). The mobile theme is a child of the main theme, to maximize code reuse.
I downloaded a mobile detection script that works pretty well, but I can't figure out how to switch to the mobile theme only for the current user, with an option to link to the full website.
I don't want to create a multisite for this - it seems like an overkill (and there's the duplicate content issue).
I tried two ways:
themeswitch: Redirect to http://example.com/?theme=mobile_theme - not working
a weird solution I found somewhere on the web:
add_filter( 'template', 'wpse_49223_change_theme' );
add_filter( 'option_template', 'wpse_49223_change_theme' );
add_filter( 'option_stylesheet', 'wpse_49223_change_theme' );
function wpse_49223_change_theme($theme)
{
include 'script/Mobile_Detect.php';
$detect = new Mobile_Detect();
if ( $detect->isMobile() )
$theme = 'pinnacle_mobile';
return $theme;
}
This is not working either.
Does anyone have a working solution to this?
Not sure if applicable for your site. But one common solution to this is media queries.
http://cssmediaqueries.com/
Basically its if "mobile device" show this css else show "normal css"
Another idea is to redirect to *mobile.yourdomain.com* when a mobile user connects. And having your mobile wordpress theme on that domain.
The solution was indeed to use the Theme Switch plug-in.
There are two things of importance here:
Set "Who can switch themes" to "everybody"
redirect to http://website.com/?theme=Mobile+Theme
Note that the theme parameter has to be the actual theme name, not the directory name. It's case sensitive and uses + instead of spaces.
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/
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.