Matt Read, Weblog

WordPress is not PHP

2008-04-19T23:57:01-04:00

There have many concerns and question about the template system used in WordPress. Mostly the concerns are with n00bs and the complications of PHP. “I want to change this and that, but don’t know PHP”. I hear this a lot. But the thing is, you don’t need to know PHP to change the Templates in WordPress.

The Template System

Lets’ start with “the Loop” as we call it. Probably the most confusing part of the Template for a non-programmer. The Loop looks like this:



     //Template Section 1: post content Template Tags go here

;

    //Template Section2: no posts found stuff here.


]]>

It may look complicated, but it’s actually quite simple. In Template Section 1, all the posts information will be displayed. Within that section we will put all the posts Template Tags, and our HTML to format them. In Template Section 2, we will display a message telling the user no posts were found, if we find none to meet their criteria.

Template Section 1: The Posts

We’ll start with outputting the post tile. Simply add in the Template Tag <?php the_title() ?>. That will output the title of the post.

Now let’s output the date of the post. Simply add the date’s Template Tag <?php the_date() ?>. That outputs the date of the post.

We will also, of coarse, need the content of the actual post. Simply, again, add the Template Tag <?php the_content() ?>.

Now let’s put it all together with some HTML:

And there’s our simple template. Now let’s add some more.

First let’s add a link to the post, permalink as it’s called, on the title. We get the actual URL, something like http://mysite.com/archives/2004/09/post-title/, with the Template Tag <?php the_permalink() ?>. We will need to put that in our <a href=””> HTML tag.

We also want to add in links to each page of our post, next page, previous page, etc.. We simply call another Template Tag, <?php link_pages('','') ?>. Now here’s another confusion people have. We’ve added in, what programmers would call, arguments to our Template Tag. That is, we’ve added in '', '' to the brackets of the Template Tag. In this case we are just saying, if there are pages to link, output the page links with a  at the start, and a  at the end. Hence, enclosing it all in HTML paragraph tags. Most Template Tags have different arguments you can pass to them, causing them to format their output differently.

Now let’s add in our new tags.


   ”>   
    

  

  ','') ?>

]]>

Now we have a fully functional Posts section, Template Section 1. Let’s move on to Template Section 2.

Template Section 2: No Posts Found

For our Template Section 2, the no post found section, all we need to do is put in a message to tell the user nothing was found, to meet their criteria. Whether it was a search or a mis-typed URL. So let’s use the following simple HTML:

Sorry, no posts could be found to match your criteria.
]]>

Now let’s put it all together.

Complete Template

Putting all we learned above together, we get a nice simple Loop Template.



    
         ”>   
          

        

        ','') ?>
    



    Sorry, no posts could be found to match your criteria.


]]>

As you can see, we have done no PHP coding, just some simple HTML with WordPress Template Tags added in.

Obviously this is not a complete template, as we have no header and footer containing all the <html><head><body> tags. But with some simple HTML and more Template Tags, and no PHP, we can easily add all that is needed for a complete HTML document. That’s right, an HTML document, not a PHP script.

As we can see WordPress is not PHP. WordPress is powered by PHP, but uses a simple template system, easily modified by even the most novice of users. None of that complicated Perl code like MT has … Yes, believe it or not, MT is also powered by a complicated programming language. The only difference is marketing. MT has been marketed as having simple templates with no programming skills needed. However, somehow, and I don’t know why, WordPress has gotten a rap of being complicated and only for the hardcore programmers out there. But as we can see, using the Template Tags is extremely easy and requires no knowledge of PHP at all.

Changing the format and style of your Template is as easy as using a little HTML, CSS and Template Tags. Just like other Weblog systems out there.

However, as with any software, there is room for improvement.

Improving Templates

One of the problems with the WordPress Template System, in my opinion, is the default Template, or theme, itself. Specifically the sidebar, with all the is_*() functions. We shouldn’t expect a novice WordPress user to understand what these functions mean. I would suggest removing all the if(is_*()) statements in place of a simple sidebar with just the essentials. Say, Search, Pages, Archives, Categories, Links, Meta information and take out all the complicated if statements and includes.

Another problem I see with the default Template is the CSS in the header. I think all CSS should be contained in the style sheets themselves. Again remove the if statements. When a user wants to modify the CSS it seems logical to have just the simple CSS in one place, to easily modify.

Another problem I see is with some of the Template Tags. Such as <?php bloginfo() ?>. Instead of having one function to display some necessary information, like blog name, description, url, etc., why not have specific tags for the highly used information. Like say, <?php blog_name() ?>, <?php blog_description() ?>, <?php blog_url() ?>, etc., to maintain consistency. For some of the less used information, charset, version, etc., the <?php bloginfo() ?> tag would be fine.

And some of the other advanced Template Tags in use in the default Templates, like <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>, should be simplified to not contain all those arguments. Maybe use <?php wp_list_cats() ?> where all those settings would be set in the admin area.

It would also be nice to try to simplify the loop, although I can’t see any way of doing that now, to use as little actual PHP, like if else statements, as possible. Also take out the else, for when no posts are found, and always use the 404 template file.

The point I’m trying making is to take the PHP out of the Templates, as much as possible, so users don’t get confused and think they need PHP skills to modify the Templates.

Those are just my thoughts on the matter.

If you need any help with your templates, or would like to learn more about the monkey, I’d be glad to help out. Just drop me a line.

Faking Two Column Text

2008-04-17T21:55:49-04:00

One of the many exciting features of CSS 3 is the ability to create columnar text. In this article I will show you a way to fake two column text with a little Javascript.

First off we need to stipulate that this hack will only work with textual information contained in HTML paragraph tags ().

To use the script all you need to do is download the script and include it in the head of your document.

]]>

To designate which text will be columnar we will put it in a layer with an id attribute of “two-col” like below. And that’s all you need to do to use the script.

The information here will be displayed as two columns. This will be the first of two Paragraphs

Here is the second paragraph in our columnar data.

]]>

The Script And The Problems

The script works by grabbing all the HTML inside the “two-col” element and splitting into an array, by spaces, using javascripts built in split function. Then we loop through our new array and place half the words in the left column and the other half in the right column. Of coarse splitting the HTML in half causes a few problems.

First, if a tag is located in the middle of the data, it can split that tag in two. This is quite bad but can be overcome by formatting the content so it doesn’t occur. Maybe in a latter version of the script I’ll try to address this problem.

Second, because we are spiltting the content into two, we end up spiltting a paragraph into two paragraphs, creating a new paragraph out of part of the original. This is unfortunate but necessary for proper styling with CSS.

But if everything works right we get our two column text.

Example of Two Column Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse imperdiet, erat quis tempus euismod, mi quam faucibus nibh, ac ullamcorper erat velit in nisl. In eget elit. Sed pede quam, eleifend facilisis, lobortis a, sagittis non, eros. Aliquam erat volutpat.

Praesent mauris magna, laoreet id, venenatis in, suscipit vitae, nisl. Aenean rutrum convallis nunc. Suspendisse pharetra placerat felis. In eget ipsum pretium nunc dignissim aliquet. Nulla ligula. Sed nulla lorem, dapibus in, malesuada sed, ultrices id, nunc.

Proin feugiat neque a orci. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec dolor id neque aliquet mattis. Mauris leo eros, elementum eget, varius ultricies, vehicula non, lorem. Nam eget neque id lacus imperdiet tincidunt. Aliquam eu augue.

Free MP3 Encoding on Windows Media Player XP

2007-06-09T04:51:19-04:00

The information in this article applies only to: Microsoft Windows Media Player for Windows XP

Windows Media Player for Windows XP has MP3 encoding plug-in support. To enable the Windows Media Player to encode MP3 files, you must download and install a compatible MP3 encoder. Windows Media Player supports only Audio Compression Manager (ACM) functions to communicate with the MP3 encoders. Therefore, the codec must be an ACM codec. I use the Fraunhaufer Pro ACM MP3 Codec. you can get it, like all other files, from my site.

MP3 Compression Only. Windows Media Player for Windows XP supports only plugging in an MP3 encoder. Using any other compression creates invalid MP3 files. Therefore, the only compression support that is provided by the codec is for MP3. The codec accept only raw data and output-compressed data.

Windows does already come with the Fraunhaufer Standard ACM MP3 Codec (L3CODECA.ACM) but it only supports very low bitrates, unacceptable for music. So get the good one from my site.

Installation

Thanks to Justin Leoni there is now an installer that does all the work for you. Or, to do it the manual way, continue reading.

All you need to do after obtaining the ACM Codec is to copy your Preferred Codec (L3CODECP.ACM, LAMEACM.ACM, etc.) to the windows system32 directory, “c:/windows/system32/”. Thats the simple part, but don’t worry the rest is easy. Now we edit that registry.

You must have administrator rights on the computer to change any of the registry settings. But before we do that we need to know a few things.

A Few things about MP3

Every MP3 files has two settings, the Bit Rate and The Sample Rate.

The Bit Rate is measured in kilobytes per second (KBps). Everyone who has heard of MP3’s knows about this. Higher quality music has higher bit rates. eg. most MP3’s on the internet are encoded at 96 - 128 kBps, this is lower quality but has quite small file sizes and is good for sharing over the internet. Higher quality MP3’s generally use 192 kBps, This is what I like because it gives a good balance between quality and size. And those audiophiles amongst us use 256 kBps or higher.

The second Thing is the Sample Rate. This is the frequency at which the music is recorded. I’m no audio engineer but the higher this value is, the more “analog-like” (better) your music will be. CD’s are recorded at 44.1 Kilohertz (kHz) (1kHz = 1000 cycles/second). Music off of your DVD Movies is recorded at 48 kHz. And the new DVD Audio is encoded at 96 kHz, and in my opinion sounds just as good as a high quality vinyl record.

Now that we know this lets make a few decisions. If we set our Codec Settings for 96 kHz, it sounds cool, but is a wast since we are using lossy compression and CD’s are at best recorded at 44.1 kHz. So our first decision is to use a sample rate of 48 kHz. You say, why not 44.1, well, why not 48. Not much difference there.

Our second decision is to choose FOUR bitrates. Windows Media Player XP only supports four different bitrates. I find that the good choice here is 96, 128, 192, and 256 kBps. You’ll probably only use one, so just pick what you like best, then pick one higher and one lower. You’ll have to play around here to find out what your codec supports. As I say though, I know the Fraunhaufer supports 128, 192, and 256 kBps @ 48 kHz, it gives a good range.

Also note the following:

1 kHz = 1000 Hz
1 kBps = 1000 Bps

Editing the Registry

WARNING: If you use Registry Editor incorrectly, you may cause serious problems that may require you to reinstall your operating system. Microsoft cannot guarantee that you can solve problems that result from using Registry Editor incorrectly. Use Registry Editor at your own risk. Blah, Blah, Blah, Lets Hack…

The following registry key should be created:

HKEY_LOCAL_MACHINE/Software/Microsoft/MediaPlayer/Settings/MP3Encoding

The following values may be set:

 DWORD value: LowRate (datarate)
 DWORD value: LowRateSample (Sample)
 DWORD value: MediumRate (datarate)
 DWORD value: MediumRateSample (Sample)
 DWORD value: MediumHighRate (datarate)
 DWORD value: MediumHighRateSample (Sample)
 DWORD value: HighRate (datarate)
 DWORD value: HighRateSample (Sample)
 String: PreferredCodecName (codec name)
 String: PreferredCodecPath (codec path)

Don’t worry I’ll walk you through it. First we need to start the registry editor. Just go the the Start Menu, click Run, the type “regedit” and click enter.

Creating The Key

Now navigate to HKEY_LOCAL_MACHINE/Software/Microsoft/MediaPlayer/Settings, just like exploring your folders, and create a new key in that folder called “MP3Encoding”. To create a new key click on the settings folder then go, Edit -> new -> key, and name it “MP3Encoding”.

Creating The DWORD Values

Now open the folder “MP3Encoding” and create a “DWORD value” named “LowRate”. Create it the same way as the “key” but go, Edit -> new -> DWORD value. Also create a “DWORD value” named LowRateSample the same way.

both are entered

Now Double Click on the LowRate DWORD value, and set the value data to the lowest bit rate you selected earlier. ie. if you chose 96 kBps then enter 96000 in value data. Everything you enter is in terms of Bps. And enter it as a Decimal NOT Hexadecimal.

Now repeat the same process for the “LowRateSample” using 48000 as your value data. Everything you enter is in terms of Hz. And again as a Decimal NOT Hexadecimal.

Now repeat the same for MediumRate, MediumRateSample, MediumHighRate, MediumHighRateSample, HighRate and HighRateSample.

Creating The Strings

Now you have to create two strings “PreferredCodecName” and “PreferredCodecPath”. You should know how to create a string now, same as DWORD but choose string. The PreferredCodecName is the name of the encoder that will show on Windows Media Player. You use what ever you want. The PreferredCodecPath must be set to “C:\WINDOWS\system32\L3CODECP.ACM”, or what ever the filename of your codec is.

you should have something like this when your done

Note that the value for PreferredCodec is limited to 255 characters. The PreferredCodecPath key must contain the fully-qualified path to the location of the codec as well as the file name of the codec.

Finally

Just go in to the Windows Media Player options, were you are able to choose the encoder (ie. WMA Losless … ), and you should see your new encoder there with the bitrate settings your setup earlier.

L3CODECP

PNG Images, A MSIE Fix

2007-04-06T14:58:22-04:00

This small and easy script will fix the problem with transparent backgrounds in Portable Network Graphics (PNG) in Microsoft Internet Explorer (MSIE). It uses a small script, which you call in your Cascading Style Sheet (CSS) with a behavior attribute. Note that this will only work for images defined with the img tag, and will not work for CSS backgrounds.

Background

You might be asking yourself, “why would a Linux guy like Matt care about MSIE?”. Well, the short answer is, 52% of the viewers of this website use MSIE, so we all have to account for it’s shortcomings.

MSIE has always had problems rendering PNG images properly. The issue is with alpha channels in transparent PNG images. MSIE, in all it’s glory, displays the transparent background as a solid gray or black background.

Microsoft (M$) has been promising to fix this issue for about five years now, but has yet to do so. There is a petition to force M$ to fix the problem, so please go sign the petition.

So, let’s get started.

Configuration

There is only two small files on the tweak, and some small CSS to implement.

First, upload the file, blank.gif, to a directory of your choosing. Now open up pngbehavior.htc and change the path of blank.gif to were you uploaded it, and make sure you use an absolute path here. So if you uploaded to the directory /images/ then it would be:

line 29:    var blankSrc = "/images/blank.gif";

Second, after saving, upload the file, pngbehavior.htc, to a directory of your choosing. Remember the directory, because we will need it later.

Then, we need to set a CSS “class” or “id” for the images, to define them in CSS. Or we can use some other way to define them in our CSS.

Using the Script

I think the easiest way to show you how to use this tweak is with examples. so here are a four examples to get you started.

Example 1

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<div id="article"> 
  <img src="image.png" alt="image" width="20" height="20" /> 
</div>

For this XHTML we will need the following CSS:

#article img { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  } 

NOTE: The #article img CSS will define all images in the "article" <div>.
Consult your CSS manual for more information.

Notice the behavior attribute. This attribute calls the script which fixes the background problems. I hope you remembered the path to the script, as this is where you put it.

Second, notice the padding of 0. YOU NEED TO HAVE THIS, since the script replaces the image with a CSS background, and any padding will cause the image to be enlarged and distorted.

Finally, notice the XHTML above. The “height” and “width” attribute are defined. YOU ALSO NEED THIS, since without it the script will not know what size the image is, and the image will be distorted.

Now that I’ve shown you the basics the next three examples will elaborated on them.

Example 2

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" width="20" height="20" class="png" />

For this XHTML we will need the following CSS:

.png { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  }

The behavior and padding CSS attributes are as before, and the image XHTML has the “height” and “width” defined as well.

Example 3

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" width="20" height="20" />

For this XHTML we will need the following CSS:

img { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  }

In this example we have not defined any “class” or “id”, nor have we got it in a defining <div>. The beauty of this script is that, if the image is not a PNG, such as JPG, GIF, etc., it will not apply anything to the image, just leave it alone.

So, in our CSS, we will just define all images to use the behavior. Again notice the behavior, padding, height and width as in example 1.

Example 4

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" class="png" />

For this XHTML we will need the following CSS:

.png { 
  behavior: url( path/to/pngbehavior.htc );

padding: 0; height: 20px; width 20px; }

Wait, you say, you told me I needed to have the height and width in the XHTML. Well, I lied, you will notice that I am defining the width and height in the CSS. Either way, CSS or XHTML, will work. This method is good for multiple instances of the same image, like the comment icons on my home page. And notice that the other attributes are the same.

Conclusion

Now that I’ve shown you many ways of using this tweak, you should have no problem’s implementing it on your site. Should you have any changes, problems or suggestion, please leave a comment on this post.

One last thing to note. The behavior attribute is invalid CSS, so it will invalidate your CSS, duh. However, the behavior attribute is only recognized by MSIE, and will not affect your CSS layout in other browsers like FireFox.

Download and License

See the blue box below for download and license information.

Preview Drafts Plugin 1.1

2007-04-06T14:58:21-04:00

Introducing the Preview Drafts Plugin version 1.1. This little plugin will allow you preview any Post or Draft in your current theme. The post/draft MUST be saved, as a post or a draft, before you can preview it. I had released this plugin earlier, but never mentioned it here, so I decided to update it a bit.

Auto Links Discovery Plugin 0.1

2007-04-06T14:58:21-04:00

This plugin will try to automatically fill in the information (title, description, URI’s) of new sites you add to the WordPress Link Manager. Simply enter in the URI, click go, and the plugin will try to find a RSS feed. From the RSS feed it will get the Site Name, Description, URI, and RSS URI. If it can’t find the RSS feed, then it will just get the HTML title of the site.

More Smilies Plugin 1.2

2007-04-06T14:58:21-04:00

I wrote this plug-in because I didn’t like the default WordPress smilies :-), and thought it would be great if we could have “packages” of smilies that you could choose from. So here it is, a plug-in that allows you to choose between different sets of smilies. Hopefully there will be many people that do up some great smilies packages. 8-)

Spam Karma 2 Stats 1.2

2007-04-06T14:58:21-04:00

This plugin will add the Spam Karma 2 spam count message, as Spam Karma 1 did, to the footer of your page. For the default message, all that is required is the installation of the plugin, but you can customize the message.

Custom Query String Plugin 2.2

2007-04-06T14:58:21-04:00

This plugin, only for WP 1.5, will allow you to set the number posts to show for all the different “query views” and each your categories in WordPress. You can choose how many posts or days, and what to order them by, for any of the queries and/or categories. All this easily set from an options page within the admin area.

Find out more at the project page.

WP Admin Bar 2.2

2007-04-06T14:58:21-04:00

This plugin will add a bar at the top of your template file with links to the admin sections of WordPress. However it will only add this bar for users that are logged in.

Referrer Karma Stats 1.3

2007-04-06T14:58:21-04:00

I wrote this small plugin to output the total number of blocked referrers from Referrer Karma. It is a very small and easy plugin and will only require the addition of a small template tag. The plugin will also add a link to the RK setup page within the WordPress admin area.

Playstation 2 Disc Read Error Fix

2007-04-06T14:58:21-04:00

I found this article over at Tweak3D.net. It will guide you through the complete proccess of repairing that annoying disc read error that sometimes happens to older PS2’s. I’ve had good results, and so have many others. Let me know how it goes for you

This guide will walk you through the process of repairing a malfunctioning Playstation 2 or one that gives you Disc Read Errors (called “DRE” from here on). I have tested this process on two Playstation 2s now and it completely fixed the errors both were experiencing. The model # was SCPH-30001 on both units, but the process should be the same for others.

You can read the entire article over at Tweek3D.net.

Fix Your Blurry Monitor or TV

2007-04-06T14:58:21-04:00

I found this article on TweakHardware.com. It will walk you through adjusting the focus on that old computer monitor. It will also help you adjust the color and brightness of your monitor.

Many monitors display an unnecessarily bad picture quality. Several older monitors suffer from showing a very dark and blurry image. But it doesn’t have to be this way! With a little knowledge and a couple of screwdrivers, we can make adjustments to achieve a sharper and/or brighter image.

The process is quite simple, but requires you to take the back cover off of your monitor. This is usually very simple and requires only a small screw driver. The guide on Tweak Hardware will walk you through the complete process.

Warning: This tweak, if not done properly, can cause serious injury and possibly death to you and your monitor. Use at your own risk

My Experience

I have done this to my old Magitronic monitor and it worked great. My monitor went from a blurry piece of garbage to a monitor that looked almost brand new. The process was a bit different on my monitor, the focus and brightness potentiometers were located in different positions, but worked exactly the same. I would not recommend playing with the color potentiometers unless it’s really screwed up.

After fixing my monitor, I thought I would try it on my old TV, and it worked the same way. My TV was really screwed up and the colors were way off, so I adjusted the color potentiometers and finally got it to work. It takes very long to get the color right, since there’s three adjustments, red, green and blue, so expect to take some time if you plan on adjusting the color. And also try many source for testing the color. ie. DVD, Video Game, VHS, Satellite, Regular TV, etc.

To just adjust the focus and brightness it took me about 20 minutes, after I figured everything out, so why not fix your broken computer monitor or TV for free.

Link to the Article

tweakhardware.com/guide/tweakmonitor/

WordPress Admin Bar Plugin vo.5

2007-04-06T14:58:21-04:00

This plugin will add a bar at the top of your template file with links to the admin sections of WordPress. However it will only add this bar for users that are logged in and have a user level equal to, or above 1.

Note: Version 2 of this plugin is now available for WordPress 1.5. For WordPress 1.2 use this version.

Installation

To install the script just unpack the archive (link below) and upload the file admin-bar.php to the plugins folder. Then activate the plugin in the admin area. Then add the following code JUST AFTER THE <body> tag in your template (index.php):

That’s it, easy isn’t? Damn, WordPress is good.

Actually, that’s not quite it. If you have removed the wp_head(); function from the <head> of your XHTML, then read read the following Style Sheet section, if not skip the Style Sheet section.

Style Sheet

To get the admin bar to display properly, I have added some CSS to the plugin. If you have removed the wp_head(); function from the <head> however, the CSS won’t be added. So you will have to add it yourself. The admin bar is contained in a list, <ul> and has the id #admin. So you could write your own CSS or use, or modify, the following default CSS:

#admin {
z-index: 20;
width: 100%;
margin: 0;
background: #666;
border-bottom: 2px solid #fff;
color: #fff;
font-size: 12px;
font-family: verdana, sans-serif;
text-align: center;
}

#admin li {
display: inline;
padding: 5px;
}

#admin li a {
color: #eee;
text-decoration: none;
letter-spacing: 1px;
}

#admin li a:hover {
color: #bbb;
text-decoration: none;
}

And after adding that CSS your done and ready to use the plugin. Have fun.

Features

The following is a list of links shown for the different user levels.

level 10: Write, Edit, Links, Users, Profile, Options and Admin Area
level 5: Write, Edit, Links, Users, Profile and Admin Area
level 4: Write, Edit, Users, Profile and Admin Area
level 1: Write, Edit, Profile and Admin Area

When you are view a single post the “Edit” link will appear as “Edit This Post” and take you to the edit section for that post. “Admin Area” is just a link to the default section, Write.

Future Plans

I’m thinking that I will add a link to the Categories admin, and when your are viewing posts in a category, link to the edit category. I’m also thinking of adding a notice for when new comments have been made.

If you have any ideas for the admin bar please leave a comment below. Thanks.