Wordpress Themes - WP Forum at BFA - Making Ugly Plugins Pretty in Montezuma

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - Making Ugly Plugins Pretty in Montezuma (http://forum.bytesforall.com/showthread.php?t=19974)

Making Ugly Plugins Pretty in Montezuma

The Problem

Some plugins automatically make pages that don't fit into the MZ template system.

For this example, we will assume that the plugin makes a page at http://yourdomain.com/ugly-page that lays out as follows (even if it doesn't use the MZ grid):

Code:

header [col12]

_________________________________



content [col8]         | ugly

                       | sidebar 

                       | [col 4]

_________________________________



footer [col12]

and that you want to show your pretty sidebar. (If your plugin makes different ugliness, adjust the solutions accordingly.)

Two obvious solutions are to:

Live with what the plugin makes as is; or
Find a different plugin.

However, if you really want to use the plugin and still want some customization options, they are listed in the next few posts on this thread, from easiest to hardest.

All the solutions will make a new page at http://yourdomain.com/pretty-page.

Solution 1 - iFrame and the Montezuma Grid

Overview. This solution uses the grid layout that comes with MZ. It puts the ugly page into an iframe and adds what's missing from your ugly sidebar to a second sidebar.

Advantages:

Easiest to do.
Uses no JavaScript or custom PHP.

Disadvantages:

Ugly sidebar stays.
Header and footer only cover left 3/4 of page.
Pretty sidebar vertical alignment is only a guess.
Uses an iframe, which is indexed by Google, but not all search engines.

Make a new main template, with no header or footer.

HTML Code:

<div class = "row">

  <div class = "col9"><?php the_content(); ?></div>

  <div class = "col3"><?php dynamic_sidebar( 'pretty-sidebar' ); ?></div>

</div>

In your widgets, put what's missing from the ugly sidebar into pretty-sidebar. You'll have to put a top margin or padding into pretty-sidebar so it starts lower than the header. How high you set that will be somewhat of a guess.

From your dashboard, make a new page, "pretty-page". Assign your new template to this page. In the content area of that page, put the following:

HTML Code:

<iframe src = "http://yourdomain.com/ugly-page">

Solution 1a - CSS Sidebar Overlay
*Potentially Problematic

Another possibilty might be to use CSS positioning to overlay a pretty sidebar over the ugly one, but there is a problem with this approach. If you don't get the top margin correct, it could cover all of part of the right third of the header, and it may not work the same on all browsers. If you are certain of your alignment and can do this, go for it. Otherwise, try something else.

Solution 2 - JavaScript Sidebar Overwrite

Overview. This solution puts the ugly page into an iframe and uses JavaScript to overwrite the ugly sidebar with the pretty one.

Advantages:

Rather easy to do.
Uses no custom PHP.
Ugly sidebar gets overwritten.
Header and footer fill whole page.
Pretty sidebar is properly aligned vertically.

Disadvantages:

Ugly sidebar will load, then be changed to pretty sidebar after all images are loaded.
Pretty sidebar is copied from static html at some point in time, and will not be updated automatically. (Theoretically, you could use some custom JavaScript to make the pretty sidebar more dynamic, but if you're that good of a coder, you might as well go to a better solution.)
Uses and iframe, which is indexed by Google, but not all search engines.

This solution will work on about 99% of the browsers, those that have javascript enabled. Since the look of MZ already depends upon javascript, you don't need to worry about the 1% that don't have it, because none of your other pages look as nice to those users, either.

In order to get JavaScript to overwrite the ugly sidebar, you need to get the id of the outermost <div> tag you want to overwrite. Open the the ugly page in a browser, right click, inspect with firebug, and get the id name.

In order to get the code for the pretty sidebar, open a page that already contains your pretty sidebar in a browser, and copy the html source code for the pretty sidebar by using view-source.

Make a new main template, with no header or footer.

HTML Code:

<div class = "row col12">

  <?php the_content(); ?>

</div>

From your dashboard, make a new page, "pretty-page". Assign your new template to this page. In the content area of that page, put the following, (substituting the correct id and html code):

HTML Code:

<iframe src = "http://yourdomain.com/ugly-page" onLoad = "document.getElementById('ugly-sidebar-id').innerHTML = 'pretty-sidabar-html';">

Solution 3 - Edit the Plugin

Overview. This solution edits the plugin to remove the header, footer, and sidebar, and puts the content part of the plugin page into an iframe.

Somewhat easy to do (depending upon the plugin).
Uses no custom PHP.
Ugly sidebar gets removed.
Header and footer fill whole page.
Pretty sidebar is properly aligned vertically.

Disadvantages:

You need to read through somebody else's PHP code to find and block the output of the ugly sidebar.
You will need to edit the plugin again when plugin it gets updated.
Uses iframe, which is indexed by Google, but not all search engines.

Go to Dashboard > Plugins > Installed Plugins

Find the plugin and click edit. Find the file where it outputs the header, footer, and, ugly sidebar. Remove (or comment out) that code.

From your dashboard, make a new page, "pretty-page". Assign a template with the header, footer and pretty sidebar to this page. In the content area of that page, put the following:

HTML Code:

<iframe src = "http://yourdomain.com/ugly-page">

Solution 4 - PHP String Extraction

Overview. This solution uses two PHP plugins to extract the content from the ugly page and put it into a pretty page.

Ugly sidebar gets removed.
Header and footer fill whole page.
Pretty sidebar is properly aligned vertically.
Uses no iframe. All content indexed by all search engines.

Disadvantages:

Harder to do.
Requires two PHP plugins.

Install and activate the Code Snippets and the Insert PHP plugins. Refer to this thread for more about the PHP plugins used.

Make your ugly page, open it in a browser, and do a view source.

Find code at the end of the header, right before the content part of the page that you want to keep. Copy enough text from the end of that section that is unique and won't be anywhere else on the page. Don't copy anything that will change, like a date. For our example, we'll assume it's "End of header code."

Find code at the beginning of the sidebar, right after the content part of the page that you want to keep. Copy enough text from the beginning of that section that is unique and won't be anywhere else on the page. Don't copy anything that will change, like a date. For our example, we'll assume it's "Beginning of sidebar code."

These two lines of code should be the same for all pages made with the plugin. Check a few to be sure. (Bear in mind that future changes you make to your header or sidebar files might impact this function.) If you have access to these files, you could insert unique strings in them within comment tags such as:

HTML Code:

<!--EndOfHeader->

HTML Code:

<!--StartOfSidebar->

If you use such comment tags, include the tags in the snippet variables, so they don't get included in your extracted content.

Make and activate the following snippet (replacing "End of header code." and "Beginning of sidebar code." with the identifying codes you used):

PHP Code:


		
			
/**
 * Extracts content of a page automatically generated
 * by a plugin, removing unwanted parts.
 * @param string $ugly_page_url url of page to be parsed
 * @return string html code for extracted content
 */
function custom_extract_plugin_content($ugly_page_url)
{
$ugly_code = file_get_contents($ugly_page_url);
$header_ending_code = "End of header code.";
$sidebar_beginning_code = "Beginning of sidebar code.";

/* get starting and ending extraction points */
$start_point = strpos($ugly_code, $header_ending_code) + strlen($header_ending_code);
$end_point = strpos($ugly_code, $sidebar_beginning_code);

/* get length of string to be extracted */
$snip_length = $end_point - $start_point;

/* extract and return desired code */
$plugin_content = substr($ugly_code, $start_point, $snip_length);
return $plugin_content;
}

From your dashboard, make a new page, "pretty-page". Assign a template with the header, footer and pretty sidebar to this page. In the content area of that page, put the following:

HTML Code:

[insert_php] 

echo custom_extract_plugin_content("http://yourdomain.com/ugly-page");

[/insert_php]