Jun 02

Update: I have added instructions below on hiding sub-pages from the navigation menus as well.

I spent a little time tonight looking over several WordPress blog themes/skins and noticed that several of them create a site-wide navigation on the blog based on the pages that the user creates in the WordPress admin section.

This is a great feature and saves tons of time from having to hard-code buttons that link to your pages.

Hiding Pages from the Nav

Tutorial Level of Difficulty: Medium

What if you want to hide a pages from the nav? How can you hide a page so it doesn’t become a nav button automatically?

Here’s how (NOTE: the colors don’t matter, they are just added to show the different sections of code in the explanation).

1. In the Wordpress theme editor, open up the header.php file and find the following line:
<?php $children = wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?>

2. We will be adding the following bit of code after the last ‘=’ sign:
&exclude=

3. Now the code should look like this (colors are just for display purposes):
<?php $children = wp_list_pages(’sort_column=menu_order&depth=1&title_li=&exclude=‘);?>

4. Now, all you have to do is add the page ID numbers that you want to hide after the ‘&exclude=’… make sure to separate with commas.

Example: If I wanted to hide page ID’s 1, 2 & 3 from the nav then the code would look like this:
<?php $children = wp_list_pages(’sort_column=menu_order&depth=1&title_li=&exclude=1,2,3‘);?>

(note: commas are used to separate page ID’s, but if you are only entering a single ID instead of several then you will not need to add a comma)

Hiding sub-pages (Pages that are assigned to a ‘Parent Page’)

1. If you want to hide a sub page, scroll down to the bottom of the same file (header.php) and find the following bit of code:

<div id=”subnav”>
<ul>

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=&child_of=’. $parent_id); ?>
</ul>
</div><!– /sub nav –>

2. Directly after the part that says &title_li= add:

&exclude=

3. Now, all you have to do is add the page ID numbers that you want to hide after the ‘&exclude=’… make sure to separate with commas.
Example: If I wanted to hide sub-page ID 47 and 117 from the sub-nav then the code would look like this:

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=&exclude=47,117&child_of=’. $parent_id); ?>

(note: commas are used to separate page ID’s, but if you are only entering a single ID instead of several then you will not need to add a comma)

How can I find my page ID’s?
By default, WordPress blogs create links for the pages you add. These links are each given a unique ID found in the URL. You can either use your browser or the WordPress ‘Manage Pages’ admin section to browse to a page you have created and copy/paste the ID’s into the code we just made.

What if I am using text links (pretty permalinks) instead of page IDs?
You can still find the page ID for each page by mousing over each page link in the ‘Manage Pages’ section of your WordPress admin.
The status bar is the bottom bar in your browser that displays the hyperlink when you mouse over a link on a page.
Don’t see the status bar? Turn it on by opening up your browser and going to View, click on ‘Status Bar’ if there isn’t already a check mark next to it.
Now that the status bar is turned on, go back to your WordPress admin and navigate to Manage > Pages, and mouse over the links to the pages that you would like to hide from the nav. The status bar will show the original hyperlink to that page including the page ID (look for the part of the link that says ‘ID=’ … the ID is the number that follows the ‘=’ sign).

Hiding pages came in helpful for me recently, hopefully a few of you find it useful as well.

This has been successfully tested on the following blog themes:

Has it worked on your theme? Leave a comment and I’ll add it to the list.

written by socialplasm \\ tags: , , , , ,

May 31

Part 1 in some of the new features in the latest version of Adobe’s Creative Suite 4 applications.

The new beta of Fireworks CS4 is giving us some insight into the upcoming features that will release with the retail version; not all features are present and you only get a 2-day trial to mess with it!
If you’re like me, Fireworks may not be one of your most common tools in your workflow. However, there are some new features that are making Fireworks a potential favorite for designers who are looking into breaking into Flex designing and speeding up their design process.

Fireworks CS4 - 9 Slice

Fireworks CS3 introduced the 9 Slice (9slice, Scale9) functionality. In CS3 this feature was only applicable to vector objects. But in CS4 this feature will be extended to raster images as well.

Below, I’ll cover a couple of the attributes of this updated feature and how to get some predictable results from it.

9 Slice preserves your corners

One of the main reasons that 9 slice was developed was to preserve rounded corners in a more dynamic way than pushing around vector points.

9 Slice does this by preserving the scale and dimension of your designated corner areas. All other areas of your graphic are scaled according to the ’slice’ that they end up residing within. The graphic below shows how each slice is scaled when an image has 9 slice applied to it and then is manipulated:

How 9 SLice Works

9 Slice Limitations

Because 9 slice preserves only the corner slices and scales the other five slices it tends to work the best when used on an image or vector where there is a clean horizontal and vertical area that can be stretched/scaled and not look too warped.

In our example above, the fill area is a clean, horizontal gradient. If we were to rotate that gradient out of a horizontal or vertical alignment, apply 9 slice, and then change the horizontal scale of the object, we start to see how 9 slice affects the 5 un-preserved slices:

9 slice distortion

9 Slice for Images

However, if you are working with an image that can handle the scaling distortion, or you are looking to make subtle adjustments in scale to your raster image, then 9 slice is a great solution for an otherwise time consuming problem. In the example below you can see that Fireworks CS4’s 9 slice function can really come in handy when adjusting the scale or dimensions of certain raster images, while preserving the subtle corner shapes:

Using 9 slice on a raster image.

More to come soon on the new features of the Adobe CS4 suite!

Enjoy!

written by socialplasm \\ tags: , , , ,