Wordpress: Change page header based on the category or sub category

So I am going to start adding a little bit of php to this site.  Whatever helps people.

This is pretty basic but caused me  a bit of trouble.  I needed to have the page header on a wordpress blog change if the user was in the 'Blog' category.

I thought it would be pretty easy but then I thought 2 things:

1.  What if the category is a sub category of the blog category and

2.  What if the user was viewing a post in the blog category or a blog sub category.

Do you need to write a ton of if statements to get this done?  When the client adds a category do you need to edit the code to account for this.  No.

So here is how we do it (in the header.php file):

Get the array of categories based on the post id.

PHP:
  1. $categories = get_the_category($post->ID);

Here we are using a wordpress function called get_the_category().  This returns an array of all the categories associated with the page including the current and parent categories.
$post->ID gets the current id out of the $post array.  This could be a post ID or a category ID.  It doesn't matter.  After this runs $categories will contain a bunch of information about all the categories related to this page or post.

Next I set up an empty variable to hold my category id(s).

PHP:
  1. $catArray = array();

Next I loop though the $categories variable to get the category id's out and put them in the $catArray variable.  Since the $categories array holds a bunch of stuff we don't need we use this to get what we want: the IDs.  The reason I am going to put them in an array is because it will be nice neat and organized.

PHP:
  1. for($i = 0; $i < sizeof($categories); $i++){
  2. array_push($catArray, $categories[$i]->cat_ID);
  3. }

This is a basic php loop.  It says start at 0 and count though the $categories loop until there are no more entries.  It will step though the array line by line kinda like searching an excel spreadsheet.
Sizeof is how the php knows how large the $categories array. So the first line of the loop says, start at $i which is equal to zero, Stop when $i = the size of the $catergories array, and count by one (do one row at a time).

The array_push line takes the id out of the $categories array and stores it in the $catArray array.  So we went from a big array with a bunch of info we dont need ($categories) to an array $catArray that just has the categories in it(like this: 33, 44, 231).

So now that we have an array with all the category id's associated with our post, now we can search it and test if it is associated with the blog id.

PHP:
  1. if(in_array(130, $catArray)){$isBlog = true;}

130 is the id of the blog category.  This line of code says that if 130 is in the $catArray then set $isBlog to true.

So now we have a variable that lets us know that yes we are in the blog category.  We can use that in the rest of the page to make decisions on what to and what not to show.

So somewhere in your script for the page you do this

HTML:
  1. <div id="header" class="<?php if($isBlog == true){echo 'blog_header';} else{echo 'standard_header';}?>">

This will assign the class blog_header if it is part of the blog and standard_header if it is something else.  Then  you just change your css accordingly and it works.

Disclaimer:  I don't claim to be a wordpress php expert, I am learning just like you!

Loading External SWFs

Loading external SWFs is a pretty easy, very useful way, to help build a Flash site that does not overwhelm the users bandwidth. You may want to build a pretty complex site but you cannot expect the user to download a 3MB SWF to use your site. With the loader you can have the user progressively download parts of the site as they request it.

To start we will be using the Loader Class.

var loader:Loader = new Loader();
var req:URLRequest = new URLRequest();
var url:String = "mySwf.swf";

req.url = url // we put the url string in the url request

loader.load(req) // load the requested swf

addChild(loader);

Next week I will show your a more advanced way(better) of implementing this.

My company has launched a new website.

Check out http://teamcolab.com

We have finally found the time to launch a new site.  Let me know what you think!

SQL Trick: Selecting unique records.

The Situation:
I have a bunch of records. They are items with five or so fields. One of the fields is the artist that created the item (artist_id). I needed to pull just one item from each artist and I needed all the other fields associated with each item. I tried:

SQL:
  1. SELECT DISTINCT artist_id FROM items ORDER BY artist_id ASC

This partially did what I wanted. It returns all the UNIQUE artist_id. I want essentially a sample item for EACH artist.

The Solution:

SQL:
  1. SELECT *, COUNT(artist_id) FROM items GROUP BY artist_id HAVING COUNT(artist_id)&gt;=1

This returns ONE row for each artist. I found this on a blog, I cant remember the name but when I find it again I will post credit. I hope this helps some of you.

Sending form data with Actionscript 3

So I just spent a few hours trying to figure out how to submit form data with Actionscript. It really isn't very hard, so I have discovered after a little research. I am going to show you an example of how to do it which I wouldn't describe as "best practice" but it works.

The reason I describe this as less than best practice is because when you send data to the sever you get no response. So, even though it works 99.9 per cent of the time, you do not get a confirmation that the server received your request.

All my client wants is for a user to be able to enter his / her email address in to a box and have and email sent and then add that email address to an email. So really we are just sending some text to my client from a form. We want the user to enter the text and click send and have it be sent without another browser window opening.

The model for this is as follows: flash will send data to a URL with the POST method and a PHP file will get the data and send an email to my client.

So we need 2 things:

The actionscript...

Actionscript:
  1. var request:URLRequest = new URLRequest( "http://mysite.com/submit.php" );
  2.  
  3. var variables:URLVariables = new URLVariables();
  4. variables.email = emailSubmitText;
  5.  
  6. request.data = variables;
  7.  
  8. request.method = URLRequestMethod.POST;
  9.  
  10. sendToURL(request);

and the PHP:

PHP:
  1. $emailAddress = $_POST['email'];
  2.  
  3. $to = "email@somehost.com";
  4. $subject = "You have a new subscriber";
  5. $body = $emailAddress;
  6. if (mail($to, $subject, $body)) {
  7. echo("Your message was sent");
  8. } else {
  9. echo("There was a problem.");
  10. }

Image Smoothing… a must know!

So I decided to start working with graphics a bit more. Nothing too exciting, but I wanted to have the earth rise and start rotating in a little flash ad for my company's website. I cut out a nice picture of the earth, imported it to the stage and started scripting. I used a simple tween, which I will post about soon, and all was well.... kinda. So the earth rotated fine but it looked kind of jagged and pixelated at some points during the movement. I figured this was just something I would have to live with and moved on. I came across and article in Justin Everret-Church's blog that talked about image smoothing. Justin is the project manager for Adobe's Flash player.

Long Story short, I tried it. It makes a huge difference and it is scary to think that I might never have come across that feature. When you import an image to the library (jpg, gif, or png), right click it and select properties. When you do that there will be an option called "Allow Image Smoothing." I do not know of any drawbacks to this yet but I do know that it makes a huge difference when animating images.

Embedding Fonts

This post piggy-backs on the previous post about adding text to the screen.? Sometimes just adding text does not cut it.? This matters specifically when you want flash to render a font and not rely on the fonts that the user may or may not have installed.? Doing so will ensure that the text you want to display is displayed the way you want and the same way for everyone.? The font file is actually embedded in your SWF file.

I came across font embedding for a different reason.? I wanted to put dynamic text on the screen and then modify some of its properties.? I tried to change the alpha of the text and quickly realized that it did not work.

When you embed the font with the SWF flash actually renders the text which allows you to apply filters to the text and change properties such as the alpha.? This is not possible with out embedding.

Embedding is easy!

Start first in your Flash IDE and right click inside the library.? Then click "New Font..." select the font you want, name it whatever you want, and click ok.? Note:? If you are using a font and you also want to use a bold face of the font you need to import them separately.

Embedding Fonts 1

Embedding fonts 2

Now you should see the font listed in your library.

3.png

Now for the fun part:? right click the font in your library and click "linkage."? When the linkage window opens check "export for actionscript" and pick a class name that you will remember.? For Futura Medium I chose "FuturaMed."

4.png

Now you can access the font with actionscript!

Lets go in to the actions panel and write a little code.

First we need to create a font object:

var myFont:Font = new FuturaMed();
This creates a new instance of the font we embedded in the Flash library.? Notice that the font object name "FuturaMed" should be the same as the Class name you gave your font on the linkage panel.

There is really not much else left to do.? For the sake of saving space I wiill refer to my previous post Let’s make a text field appear.? We just need to change a few more things to apply the font object to the text.? First we need to attach the font to our textFormat object.? In the last example I used and object called "textFormat."

textFormat.font = myFont.fontName;
Now the font object is attached to the textFormat object that is applied to your textField object.

You would probably assume, like I did, that it would just work now.? Nope.? You need to add one more line of code to your textField object.
myText.embedFonts = true;

Now you are all set.? Below I will include the complete code for this exercise so you can see it all together.

Actionscript:
  1. // Create your font instance
  2. var myFont:Font = new FuturaMed();<strong>? </strong>
  3.  
  4. // Set your text formating up
  5. var textFormat:TextFormat = new TextFormat();
  6. textFormat.size = 20;
  7. textFormat.color = 0xFF0000;
  8.  
  9. textFormat.font = myFont.fontName;?  //?  here we apply the font to the formatting object
  10.  
  11. //?  Set your text field up
  12. var myText:TextField = new TextField();
  13. myText.autoSize = TextFieldAutoSize.LEFT;
  14. theText = "Hello world.";
  15. myText.text = theText;
  16.  
  17. myText.embedFonts = true; ?  ?  ?  ?  // set embedFonts to true and we are good to go.
  18.  
  19. myText.setTextFormat(textFormat);
  20.  
  21. // put it on the stage
  22. addChild(myText);

Let’s make a text field appear.

In flash you can use the visual IDE, Actionscript, or both to create content. This allows for a lot of flexibility for the developer or designer. For example, if you want to create a text field you can literally draw one with the IDE or your can create one with actionscript (AS).

As a developer I prefer to create as much content as I can with AS because it gives me more flexibility and also allows me to create objects like a text field on the fly dynamically.

For this example we are working in the Actions panel of the Flash IDE.

The first thing you need to do is create a variable to hold the text field object:

var myText:TextField = new TextField();

Next I want to make sure that the text field expands to match the text that I assign to it. In this case I want the text field to expand to the left:

myText.autoSize = TextFieldAutoSize.LEFT;

Now that we have created the text field we can go ahead and put some data in to it:

myText.text = "Hello world!"

At this point if you run your program you will not see anything even though you did everything correctly. What you need to do it add the text field to the stage. You can do that with a very simple command:

addChild(myText);

Now if you look you have text on the stage when you run your movie.

Okay... that was great right? What if we want to add formatting to the text?

As you might have guessed we created another object to contain our formatting information:

var textFormat:TextFormat = new Format();

Now that we have a place to store the formatting information we can set the font and the size of the formatting object.

textFormat.size = 20;
textFormat.color = 0xFF0000;

If you are wondering what 0xFF0000 is... it is red in hex format. Flash likes its colors defined in hex.

textFormat.font = "Helvetica";

The font needs to be installed on your computer. If Helvetica does not work try Arial.

Now we need to apply the formatting to the text object we created earlier.

myText.setTextFormat(textFormat);

Now you should have text on your screen formatted to your liking. As you might expect you can apply your text formatting object over and over to whatever text objects you want. This is great because like CSS it allows you to change all your text of a similar type with one bit of code instead of going in to the IDE and changing every field one by one.

Here is the code:

Actionscript:
  1. // Set your text formating up
  2. var textFormat:TextFormat = new TextFormat();
  3. textFormat.font = "Arial";
  4. textFormat.size = 20;
  5. textFormat.color = 0xFF0000;
  6.  
  7. //  Set your text field up
  8. var myText:TextField = new TextField();
  9. myText.autoSize = TextFieldAutoSize.LEFT;
  10. theText = "Hello world.";
  11. myText.text = theText;
  12. myText.setTextFormat(textFormat);
  13.  
  14. // put it on the stage
  15. addChild(myText);

In the next entry we will discuss some problems that can occur when you try to animate a text field and how it can be solved by embedding fonts.

This will be good.

I am putting this together as a reaction to learning Actionscript 3. I am a web developer and designer for the Virginia House of Delegates and also run a web development business in Richmond, VA. ? Recently I have started developing Flash CS 3 applications and websites with actionscript 3.? Though there are tutorials on the web there are still no "great" actionscript 3 references out there yet. Over the last couple of weeks I have been stumbling through AS3 and I will use this blog to share with you what I have figured out so far.? I would go in to how excited I am about it but i figure you probably feel the same way if you are taking the time to read my posts.? I hope this is helpful to you!