Choose Your Theme
Warren Shea

Archive for the ‘Tutorials’ Category

Tutorial: Setting up WordPress permalinks without index.php on IIS server

Sunday, May 27th, 2012 at 8:32 pm

There are lots of tutorials regarding how to set up permalinks on a WordPress site but generally, they’re tutorials for how to achieve this on an Apache web server under Linux.
This is one (http://heartdrops.org/tutorials/wp-removing-index-php-in-urls/) I really liked because it’s written for the common user. Simple steps, what you need, easily understandable. Unfortunately, it didn’t work for me (cuz it’s not for Windows hosting).

My solution is not unique, it comes from: http://wordpress.org/support/topic/permalinks-not-working-on-windows-server. Unfortunately, it was difficult to find so I was working on this problem for more than a few hours. (#$&^(%^#!)

Purpose of this tutorial
To achieve the following structure in WordPress URLs
http://www.worldofwarren.com/tutorials/setting-up-wordpress-permalinks/
or
http://www.worldofwarren.com/setting-up-wordpress-permalinks/

instead of, by default,
http://www.worldofwarren.com/index.php/tutorials/setting-up-wordpress-permalinks/
or
http://www.worldofwarren.com/index.php/setting-up-wordpress-permalinks/

What you need to know/have
PHP knowledge
A text editor
Access to your site’s 404, 404.2, and 404.3 errorpages

Procedure

  1. Create a simple new document file called wp-404-handler.php and place it in the root directory of your site.
  2. Place the following code inside wp-404-handler.php
    <?php
    // This is the default file for the site. Usually index.php
    $default = ‘index.php';

    // The name of this file.
    // Set this value for the URL in Custom Error Properties of your website in IIS.
    // Goto: IIS Manager > Websites > [Site Name] > Properties > Custom Errors >
    // 404 & 404;2 & 404;3 > URL (Requires a ‘/’ prefix in IIS).
    $thisfile = ‘404-handler.php';

    $_SERVER[‘ORIG_PATH_TRANSLATED’] = str_replace($thisfile, $default, $_SERVER[‘ORIG_PATH_TRANSLATED’]);
    $_SERVER[‘SCRIPT_FILENAME’] = str_replace($thisfile, $default, $_SERVER[‘SCRIPT_FILENAME’]);
    $_SERVER[‘ORIG_PATH_INFO’] = str_replace($thisfile, $default, $_SERVER[‘ORIG_PATH_INFO’]);
    $_SERVER[‘SCRIPT_NAME’] = str_replace($thisfile, $default, $_SERVER[‘SCRIPT_NAME’]);
    $_SERVER[‘PHP_SELF’] = str_replace($thisfile, $default, $_SERVER[‘PHP_SELF’]);
    $_SERVER[‘PATH_INFO’] = false;

    $qs =& $_SERVER[‘QUERY_STRING’];
    $ru =& $_SERVER[‘REQUEST_URI’];
    $pos = strrpos($qs, ‘://’);
    $pos = strpos($qs, ‘/’, $pos + 4);
    $_SERVER[‘URL’] = $ru = substr($qs, $pos);
    $qs = trim(stristr($ru, ‘?’), ‘?’);

    // Required for WordPress 2.8+
    $_SERVER[‘HTTP_X_ORIGINAL_URL’] = $ru;

    // Fix GET vars
    foreach ( $_GET as $var => $val ) {
      if ( substr($var, 0, 3) == ‘404’) {
        if ( strstr($var, ‘?’) ) {
          $newvar = substr($var, strpos($var, ‘?’) + 1);
          $_GET[$newvar] = $val;
        }
      unset($_GET[$var]);
      }
      break;
    }
    include($default);

    ?>

  3. Configure the 404, 404,2 and 404.3 error pages to point to the URL: /wp-404-handler.php
    (in this case, http://www.worldofwarren.com/wp-404-handler.php)
  4. Finally, in your WordPress permalinks section, add the follow to the Custom Structure.
    /%category%/%postname%/
    (though /%postname%/ might be more common).
  5. My ramblings
    It seems a bit odd WordPress would think users would want index.php in their URLs. They look hideous.

Site Updates: warrenshea.com & IE8

Thursday, April 26th, 2012 at 2:02 pm

warrenshea.com uses HTML5, which isn’t supported by IE8. Which is unfortunate because IE8 is used pretty frequently.

I didn’t wanna do another stylesheet/javascript and update both…so I used one of my favorite things: my proxy.php file

This is my default.php for warrenshea.com. Unfortunately, I did have to do a big IF statement but that’s okay because this code never changes. So what it does is check it it’s IE8 (ie. doesn’t support HTML5), and then changes some of the tags: <header> to <div id=”header”>. I’ll likely change the IF statement to something better later…but that’s not the point of this post.

<?php
$srvr_http_user_agent = $_SERVER[‘HTTP_USER_AGENT’];
if ((stristr($srvr_http_user_agent,”MSIE 6.0″) == true) ||
  (stristr($srvr_http_user_agent,”MSIE 7.0″) == true) ||
  (stristr($srvr_http_user_agent,”MSIE 8.0″) == true)) {?>
<!doctype html>
<html>
  <head>
    <link rel=”stylesheet” href=”common/proxy.php?url=stylesheet.css&type=css”>
  </head>
  <body>
    <div id=”header”>
      <div id=”nav”>
        <ul id=”nav-text”></ul>
        <ul id=”nav-background”></ul>
      </div>
      .
      .
    <script src=”common/proxy.php?url=scripts.js&type=js”></script>
  </body>
</html><?php } else { ?><!doctype html>
<html lang=”en-us”>
  <head>
    <link rel=”stylesheet” href=”common/stylesheet.css”>
  </head>
  <body>
    <header>
      <nav>
        <ul id=”nav-text”></ul>
        <ul id=”nav-background”></ul>
      </nav>
    .
    .
    <script src=”common/scripts.js”></script>
  </body>
</html><?php } ?>

Doing this gets rid of some HTML5 tags but the CSS and JavaScript/jQuery still reference the HTML5 tags. So I like to use my proxy.php, which loads a URL, and gives me the option to manipulate it.
FYI – For XML, I use it for my twitter XML (I used to have it done through JavaScript but I found that it hindered load time).

<?php header(“Expires:Mon, 31 Dec 2010 05:00:00 GMT”); ?>
<?php
$page_contents = file_get_contents($_GET[“url”]);
if ($_GET[“type”] == “css”) {
  header(“Content-type: text/css”);
  $page_contents = str_replace(“header”,”#header”,$page_contents);
  $page_contents = str_replace(“##header”,”#header”,$page_contents);
  $page_contents = str_replace(“footer”,”#footer”,$page_contents);
  $page_contents = str_replace(“##footer”,”#footer”,$page_contents);
  $page_contents = str_replace(“content-#footer”,”content-footer”,$page_contents);
  $page_contents = str_replace(“nav”,”#nav”,$page_contents);
  $page_contents = str_replace(“##nav-text”,”#nav-text”,$page_contents);
  $page_contents = str_replace(“##nav-background”,”#nav-background”,$page_contents);  
} else if ($_GET[“type”] == “js”) {
  header(“Content-type: application/javascript”);
  $page_contents = str_replace(‘$(“header”)’,’$(“#header”)’,$page_contents);
  $page_contents = str_replace(‘$(“nav”)’,’$(“#nav”)’,$page_contents);
  $page_contents = str_replace(‘$(“footer”)’,’$(“#footer”)’,$page_contents);
} else if ($_GET[“type”] = “xml”) {
  header(“Content-type: text/xml”);
}
echo $page_contents;
?>

Yes, it’s very hacky and likely not efficient but it does the job.
It changes:
http://warrenshea.com/common/stylesheet.css (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=stylesheet.css&type=css (HTML5 bad)
and
http://warrenshea.com/common/scripts.js (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=scripts.js&type=js (HTML5 bad)
but I only have to edit one file and it’ll make the non-HTML5 version automatically. Sweet.

Anyways, I thought this was worth sharing. Someone might find this technique useful.

Tutorial: This ain’t yo mom’s absolute pathing…sup?!

Monday, April 9th, 2012 at 4:39 pm

I should probably have a better title name considering what this tutorial is supposed to accomplish.

So as most of you hopefully know, putting a leading slash in a path refers to a root directory.

Example:
If the domain is http://www.worldofwarren.com/ and you link to
<a href=”/images/”>images</a>,
it will link to http://www.worldofwarren.com/images/

So what happens if you put 2 leading slashes in a path?
NOTHING LIKE THE ABOVE.

Purpose of this tutorial
To display the practical use of a URL with a leading double slash (//) in a path.
A URL with a double slash inherits the current protocol.

What you need to know/have
Basic HTML

Procedure
If you’re on an HTTP site (http://www.URL.com/) and you have

<img src=”//www.URL.com/images/logo.gif” alt=”” />,

then the image will reference http://www.URL.com/images/logo.gif

If you’re on an HTTPS site (https://www.URL.com/) and you have

<img src=”//www.URL.com/images/logo.gif” alt=”” />,

then the image will reference https://www.URL.com/images/logo.gif

Same code. But based on current protocal (HTTP or HTTPS), different results.

My ramblings
The // takes whatever protocol (HTTP or HTTPS) that the webpage is currently using and applies the referenced item to that. It’s awesome if you’re building secure and non-secure pages.

You wouldn’t need to use this on files that are within the same domain. In this case, relative pathing is probably better. But sometimes you link to files outside your domain.

For example, Google’s jQuery or SWFObject library.

Anyways, hope you learned something. I taught a lot of people this since learning it earlier this year, it’s awesome and so useful!

People are always asking “This form is supposed to be secure, but IE is prompting me with an alert that there are unsecure elements. PLZ FIX” and then you can be like “YO I JUST APPLY THE LEADING DOUBLE SLASH…sup?!”

Tutorial: Converting characters into their HTML entity names

Saturday, January 28th, 2012 at 7:17 pm

Purpose of this tutorial
To convert characters in code into their HTML entity names

What you need to know/have
Adobe Dreamweaver

Note
This tutorial uses Adobe Dreamweaver CS4

Procedure
Step 1: Enter your special characters into Dreamweaver’s source. (Or more likely, it already exists in your document).

Step 2: Select the text you want converted

Step 3: Cut (CTRL + X) it

Step 4: Change the characterset to ascii in the meta tag.

Step 5: Paste your copy into the DESIGN portion of Dreamweaver (this is very important)

Step 6: Change the characterset back to UTF-8 or ISO-8859-1 (or whatever you had before) and save.

My ramblings
I rarely use this on a personal level but I can’t say I haven’t done it many time professionally. Hopefully this tutorial helps save you some time when you’re like “why doesn’t my code work in this browser?”

Site Updates – Facebook Status and Recent Comments in the Right Col. –>

Tuesday, January 24th, 2012 at 12:00 am

Wow, when was the last time I did any type of site update?

Anyways, I did some worldofwarren.com maintenance today, first time in a while.

What I did was add 1 Facebook Status to the right column, underneath the 3 Twitter Tweets.
Below that, I added the 3 most recent Comments, underneath the Facebook Statuses.

I didn’t want to display the comments too prominently on my site as it’s not my content, so I make you simply click “See most recent” to see them. I notice that sometimes I get really good or interesting comments on really old posts. It’s very likely no one would read those though…(other than me) and I find that unfortunate. I’d like those voices to be heard/read.

I really hope this doesn’t discourage people from commenting. Comment on this post if you think it’s a bad idea…and it will ironically do what you don’t want it to do! So….basically, I’m saying there’s nothing in it for you.

<Technical Tutorial>
Getting the Facebook Status to work was pretty difficult. There’s a Facebook RSS feed but you can’t just pull from it. But that’s the same as any RSS feed. You have to create a proxy to bypass the cross domain issues. It’s super simple:

proxy.php

<?php header(“Expires:Mon, 31 Dec 2010 05:00:00 GMT”); ?>
<?php
if ($_GET[“type”] = “xml”) {
header(“Content-type: text/xml”);
$page_contents = file_get_contents($_GET[“url”]);
}
echo $page_contents;
?>

and I just call any XML/RSS via URLs like this:

proxy.php?type=xml&url=http://search.twitter.com/search.atom?q=from:warrenshea
proxy.php?type=xml&url=http://www.worldofwarren.com/?feed=comments-rss2

Unfortunately, for some reason, Facebook doesn’t allow this. They have this whole Developer API you have to work with to get the Facebook Statuses. Why? I think that imo, having Facebook Statuses come up as simple RSS feeds for people defeat the purpose of Facebook, as well as they lose money on advertising if you can pull the Facebook Statuses from other sites.

So I had to do something else for Facebook Status. I’m not going to write a tutorial since I didn’t make it. I will say that I got it HERE:
PHP Show Your Facebook Status on your blog/website
</Technical>