How to customize Wordpress Theme before going live - wordpress

Yesterday I installed a new theme on Wordpress on my self-hosted website. I am aware of the feature that allows you to preview a theme and have used it to select a new Theme that I want to install.
Problem
I do not want to interrupt normal operations of my website, but this new theme requires a lot of customization before it is ready to go. How do I do this?
My Crappy Solution
Is the only way to go about it to run a virtual server on my desktop? This seems tedious, not to mention all the errors I usually get when switching to the "real" server when doing this.
A better way?
I've been searching on SO as well as the WordPress Forum for an answer as to how to do this, but have come up short. I would have thought this is a common question. Maybe I'm using the wrong search terms [themes, customization, before installing]???
Any help is greatly appreciated! Thanks!

Ok, since your question is a pretty good one and probably not a few people are going through the same process when they decide to update their site, I decided to give a try to the get_stylesheet and get_template filter hooks. It turns out that with a very small plugin, you can easily enforce a specific theme(well in this case any logged-in visitor, but you can change this to use any logic you want) according to a specific rule/s.
Here's the code that you need to put in a file in your plugins directory:
<?php
/*
Plugin Name: Switch Theme
Description: Switches the theme for logged-in visitors, while keeping the current theme for everyone else. !!!NOTE!!! Please back-up your database prior using this plugin - I can't guarantee that it will work with any theme, nor that it won't break your site's set-up - USE AT YOUR OWN RISK(I did a quick test and it seemed to be fine, but haven't done extensive testing).
You don't need to switch to the desired theme before that - you want to keep active the theme that you will display to your visitors - the one that you will see will be used programatically.
Before activating the plugin, change the line that says `private $admin_theme = '';` to `private $admin_theme = 'theme-directory-name';` where "theme-directory-name" is obviously the name of the directory in which the desired theme resides in.
*/
class MyThemeSwitcher {
private $admin_theme = '';
function MyThemeSwitcher() {
add_filter( 'stylesheet', array( &$this, 'get_stylesheet' ) );
add_filter( 'template', array( &$this, 'get_template' ) );
}
function get_stylesheet($stylesheet = '') {
if ( is_user_logged_in() && $this->admin_theme ) {
return $this->admin_theme;
}
return $stylesheet;
}
function get_template( $template ) {
if ( is_user_logged_in() && $this->admin_theme ) {
return $this->admin_theme;
}
return $template;
}
}
$theme_switcher = new MyThemeSwitcher();
So - first of all BACKUP YOUR DATABASE! I tested locally with Twenty Eleven being the default theme and a basic framework theme as my custom theme - the theme options and navigation menus were saved properly.
Then all you need to do is to update the file(change the line that says private $admin_theme = ''; to private $admin_theme = 'theme-slug'; where theme-slug is the name of the directory in which the theme you want to use is).
Also - you won't be able to change the Front page and Posts page options, without this affecting the live site, nor will you be able to change the any shared components that both themes use(Site name, Front Page, Posts page, Posts Per Page, etc options, content and so on).
So if you have no clue whether this solution is for you - well, it depends.
If both themes are not relatively complex, then most-likely you should be able to use this hack. If they are though maybe you should do a second installation of your website as others suggested - I think that a second installation in either a sub-domain or a sub-directory would be the best option for you(simply because moving a multisite database is more complex than moving a normal WP database).

I'd setup local apache server with a wordpress installed to customize and test a new theme. When you finished customizing it then you can upload the theme to your live site and activate it. If there are settings that you need to set in the dashboard then you probably will have to adjust them again. That's one way to test/customize a theme before putting it live.

You could create a network (make WordPress multisite with define('WP_ALLOW_MULTISITE', true);, see : http://codex.wordpress.org/Create_A_Network) and then create one sub-site, then turn it "off" with a Maintenance plugin so it is not accessible to users not logged in as admin, export your posts & data from main blog, import them in sub-blog with WordPress default importer, then apply your new theme to this sub-blog and work on it. When everything satisfies you, apply the theme to the main site and deactivate subsite.

Related

How can I successfully use browser-sync with wordpress locally?

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!

Hide Wordpress dashboard?

I'm new to wordpress and a bit confused with something. I'm trying to build a classified marketplace type of website for myself. I am NOT building this for a "client". I will probably be using a hack of several different plugins as my coding skills are not up to par. Eventually I will hopefully have lots of users who will be composed of buyers & sellers.
My question pertains to the WP dashboard. When buyers/sellers sign up for my site, will they be able to see the backend WP dashboard? I would prefer that they NOT be able to access a backend dashboard at all let alone a WP branded one. Is this possible? If so any clue as to how this might be accomplished?
thank you Brian
Normal users do not actually see the 'backend' WP dashboard. What they are seeing is a 'profile' type page meant for the original functionality of wordpres; being a blog.
If you do not want users to go to this page when they log-in, you can use a couple of hooks. Here is some code that redirects to the front page after logging-in and logging-out. This goes in your functions.php file.
add_action('login_form', 'ang_redirect_to_front_page');
add_action('wp_logout', 'go_home');
function ang_redirect_to_front_page() {
global $redirect_to;
if (!isset($_GET['redirect_to'])) {
$redirect_to = get_option('siteurl');
}
}
function go_home(){
wp_redirect( home_url() );
exit();
}
And, if your theme is still displaying the menu at the top of the screen that allows the users to go to this 'profile' area, you can go into your footer.php file and remove this:
<?php wp_footer();?>
However, if you do this, then you will not see it as the admin either.
WordPress is might not be the thing to use for that kind of website, even with a bunch of plugins. Read up on other content management systems just incase.
This link might answer your question:
http://buddypress.org/support/topic/how-to-prevent-non-admins-from-accessing-wp-admin-dashboard/
You can also add this to your theme's function.php file:
// DISABLE ADMIN BAR FOR ALL USERS
show_admin_bar( false );
If you are not too used to wordpress, use WOOCOMMERCE plugin. Its completely free and well documented

Custom Plugin for wordpress with hierarchy of SEF pages

Here's my issue. My company needs a vendor database added to our wordpress website. None of the existing plugins will even come close to what we need, and we already have a mysql database with all of our information, so we need to create a plugin or something to do what we need.
These urls need to be direct-accessible and have SEF urls. So, for example:
mysite.com/vendors/
mysite.com/vendors/pipe-manufacturers/
mysite.com/vendor/bobs-pipes/
And, the custom content needs to appear inside the wordpress template.
There are really 2 options:
1) Find a way to write our application outside of wordpress, but find a way to bootstrap wordpress to show the header, footer, and sidebar.
2) Run the app from inside wordpress.
So I went for option #2. I created a new template file named "vendor.php", and began working. I added this code to my functions.php of my theme:
add_filter( 'template_include', 'xyz_template_check' );
function xyz_template_check() {
global $template;
$rqst = $_SERVER['REQUEST_URI'];
$ra = split("/", $rqst);
if ($ra[1] == "vendors") {
$template_file = get_stylesheet_directory() . '/vendors.php';
return $template_file;
}
return $template;
}
So what the above code does, if it sees the word "vendors" as the first part of the url after the site name, it sends you to vendor.php. This works PERFECTLY....
except...
Wordpress believes that the page is not found. It returns a 404 header, and NOT FOUND into the page title and breadcrumb.
Adding a PAGE called "Vendor Database" with the permalink "/vendors/" fixes the main page. But there will be literally hundreds of vendors and different categories. I cant be creating a custom page for each one. This needs to be dynamic.
So, how do I make wordpress give a 200, and supply an acceptable page title, breadcrumb, etc.
Don't even get me started on the danged wp_title filter. This did NOT work as documented. Although, it just occurred to me that this might be an issue with Wordpress SEO (the wp_title filter issue).
Anyone got an idea on this?
Ok got this. The solution was to use the rewrite api, as mentioned above, to look for the pattern /vendors/, letting it know that it was a valid URL. Coupled with my existing template override, this is what I needed.

How can I switch WordPress to mobile theme (with link to full site)

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.

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