I have spent the last couple of weekends working on version 1.0 of AnyFont, which I was initially planning on releasing this weekend. I have decided to rather hold off releasing it until next weekend though to allow some more time for testing.

For those who cant wait though,  read on to see the list of new features, some screenshots and to download the beta release.

New Features in version 1.0

• Option to automatically change menu text for menu’s generated with wp_list_pages or wp_page_menu.  Included in this feature is the ability to assign styles for hover(mouseover) and the active page.
• New settings page to assign styles to text after the page has loaded by using CSS selectors  - moved to version 1.1
• Automatic plugin “health” checks with alerts and tips on how to solve the problem should the plugin not be able to automatically fix it.
• Cache management options to limit the amount of disk space AnyFont can use for saving fonts and caching images.
• Advanced controls for power users that want to set custom locations for saving fonts or cache files.
• New style option to add extra padding to an image should you find your text is getting cut off.

Bugfixes

Along with some serious code optimisations made with this release, I have made a point of tackling every issue reported and implemented steps to ensure those problems would not occur again so easily. If you one of those who reported an issue,  I just want to say thanks!  And if I have not replied to your post or bug report as yet, please accept my apologies, I will be making a point of replying to everyone shortly.

Screenshots

Click thumbnails to enlarge.

Download the beta!

Current stable version: 1.1.3
Last updated: 15th June, 2010
37366 downloads

WordPress plugin page | Download version 1.0-beta | Download latest stable (1.1.3)

Should anyone find a bug while testing, please alert me to the problem by adding a comment below.

Thanks and enjoy!

How can I use AnyFont to change my menu text in WordPress?

This must be the most frequently asked question I get about AnyFont.  It was always my plan to automate this feature in AnyFont with a simple on/off switch, but due to serious time constraints over the past year and the way the filters work for the function wp_list_pages, I have not yet been able to nail it. But until I do, here is a quick solution which allows you to create a customized menu that uses AnyFont styles.

Open your themes function.php file if it has one, otherwise open up header.php and add in the following PHP function at the bottom of the page.

function menu_compare($a, $b){
    if ($a->menu_order == $b->menu_order) {
        return 0;
    }
    return ($a->menu_order < $b->menu_order) ? -1 : 1;
}

This function takes care of sorting your menus correctly using the standard page sort order. Feel free to modify this should you prefer to sort your menus in some other way.

Now you need to determine where on your page you want your menu to appear, and insert the bit of code below into the corresponding theme file (header.php is usually a good place for the menu to sit)

<ul class="menu">
    <li>
        <a href="<?php bloginfo('url'); ?>/">
            <img src="<?php bloginfo('url')?>/images/stylename/Home.png" alt="Home" />
        </a>
    </li><?php
    $pages = get_pages();
    usort($pages, "menu_compare");
    foreach($pages as $page){
        if($page->menu_order < 10){?>
            <li>
                <a href="<?php bloginfo('url'); ?>/<?=$page->post_name?>/">
                    <img src="<?php bloginfo('url'); ?>/images/stylename/<?=urlencode($page->post_title)?>.png" alt="<?=$page->post_title?>" />
                </a>
            </li><?php
        }
    }?>
</ul>

Before this code will work effectively on your site you need to first go to the AnyFont style manager and create a new style for menu items. Once you have created a style, change “stylename” in the img tags src attribute on lines 4 and 13 in the code above to whatever you named your menu style.

Another very important thing to note, if you look at line 10 you will see an if statement which basically says if the pages menu_order number is higher than 10, do not create a menu item for the page. This is part of a rather simple, although very effective, page ordering/organising method I use. The rules for this system are very simple:

• Assign all your top level pages that you want to have included in the menu,  a menu order number between 1 & 9
• If the page has any other pages below it assign it a number which starts with its parent pages menu order number. ie: if the parent pages menu order number is 2, then the first child page would be numbered 20 and the next child page would be numbered 21 and so on.

The primary reason for this is to make sure only top level pages are included in the main menu.  However, if you manage your pages differently and would like to continue managing them your own way, you can either remove lines 10 and 16 from the code above, or change the number “10″ on line 10 to a number higher than your highest menu order number.   Something like 999999999 should do it.

Enjoy!

Before getting into the new features of this release, I just want to say thanks to Rik Ward, who made a significant contribution to AnyFont recently in the form of an awesome new feature which I have included in the 0.7 release.   Keep reading to find out more about the latest features of AnyFont.

The first feature I have to mention is the contribution from Rik Ward, which is the ability to give your styles a width limit, which really comes in handy when your blog has limited space, especially in the sidebars!  Using this feature you can easily set a limit to make the text roll over to the next line.  Although I must stress that this feature is only available when creating a new style, unfortunately when editing a style from the 0.6 release this option will not be available. This is something which I hope to fix in the near future though so stay tuned!

The other significant feature that I feel is really worth mentioning, is the support for OpenType fonts. Thats right, you can now upload your favourite OpenType fonts in the Font Manager and use them with AnyFont.

Other than that there have been quite a few optimisations in the code which should make AnyFont run even faster than before.

I would also just like to thank the community for all the really awesome support and feedback which I have received.  It really makes developing the plugin a whole lot more satisfying and worthwhile knowing that its helping someone out there.

Enjoy the new release!

This has been a very popular request lately, so here is a quick tutorial on using an image created by AnyFont in your blog posts or pages.

This tutorial assumes you have AnyFont installed and have already uploaded fonts and created some styles.

When you writing a new post or page, click on the add image button on the WordPress editor:

Click the “From URL” Tab and in the URL input box, type in the link to the image as follows:

http://www.yourblog.com/images/your_style_name/the text you want.png

For an example see the screenshot below:

You should also fill out the Title with the same text you want for the image.  Then once you click on Insert into Post, you should see an image like the following:

I am going  to be adding a custom button to the WordPress editor in the near future which will simplify this process greatly.

Enjoy!

]]> http://2amlife.com/howto-use-anyfont-in-your-posts/feed 3 http://2amlife.com/getting-started-with-anyfont http://2amlife.com/getting-started-with-anyfont#comments Sat, 30 May 2009 04:02:43 +0000 Ryan http://2amlife.com/?p=183

Recently there have been quite a few requests for some sort of help document or howto for using AnyFont, and I haven’t really done much documentation for AnyFont due to time constraints.  So I have put together this short howto which will cover the basic operations of AnyFont until I am able to find some time to write the next howto doc, which will cover some of the more advanced tips and tricks for AnyFont as well as how to manage the advanced options effectively.

Firstly, if you having problems installing the plugin, please run through the following checklist before trying anything in this tutorial.

I know this checklist is mostly advanced topics which are not explained very well.  However I will be writing a more comprehensive post, which explains each point above in detail, just as soon as I can find time.

Once the plugin has been installed successfully, the first step is to upload some truetype fonts.  To do this, expand the AnyFont menu in your WordPress admin area, and click on Font Manager.

You should see a page that looks something like the following:

click to zoom

Now if you’re wondering where on earth you supposed to get fonts to upload, you can start by looking at either FontSquirrel or Dafont.com, both of them are excellent font resources with large collections of free high quality fonts available to download as well as links to useful font tools and other typography resources.

When you have downloaded and unzipped some fonts, you are ready to start uploading them to your blog using the Font Manager! To start the upload, click on the Upload New Font button as shown to the right.

You should then have a screen that looks like the following:

click to zoom

You can now upload your font by clicking on the Browse button and then browsing to the folder on your computer where you have your fonts saved.  Select the font you want to upload and click OK, then click on the blue upload button as shown to the right.

NOTE: If you are using Microsoft Windows,  you will not be able to upload fonts directly from the system font folder (C:\Windows\Fonts).  You will first have to copy the fonts out of that folder to somewhere else on your PC, and then select the fonts you want to upload from there.

Once the font has uploaded successfully, you should see a preview of the font you just uploaded as shown in the image below.

click to zoom

If your font continuously fails to upload via this page, you can also try uploading using FTP.  Using your favourite FTP application, upload your font files to the “/wp-content/fonts”  folder in your WordPress installation.

Now that there are a fonts uploaded you can start creating Styles.  A style is simply some basic rules which  allow you to control exactly how your newly uploaded fonts will look on your blog.  To get started, click on Style Manager under the AnyFont menu.  Once loaded you should be presented with a page that looks something like the following image:

click to zoom

Click on the Create New Style button on the right hand side of the page. You will then be presented with the following options:

1. Name:

   Name your style something descriptive(such as “blog titles” or “sidebar”). This will make it easier to assign styles to the correct section of your blog later on.

2. Color:

   Choose what color you want your font to be, you type in a colour or click the little colour box on the right of the input field to bring up a box with a couple of colour choices!

3. Font Name:

   The fonts you uploaded earlier should be listed here, Select one of them to use with the style.

4. Font Size:

   These are standard point sizes, as you would find in most common word processors. Select the size you want and continue.

5. Background Color:^†

   This is the background color of the image which is being created. Select a colour which matches your blogs current background colour for the best results.

6. Shadow:^††

   Check this option if you want to have a slight shadow on your text.

7. Shadow Color:^††

   If you have checked the option above, you can select what colour you want the shadow to be by entering it here.

_{† Only available on GD
†† Only available on ImageMagick}

Once you have filled out all the options, click on the blue “Save” button on the right.

When the style has been saved, you should see it appear in the list as shown in the image below.

click to zoom

Now that you have both fonts uploaded and some styles set, you are ready to start showing off your fonts on your blog.  And the best part is, all you actually have to do to make this happen, is set a couple of easy options on the settings page. No code editing is required! Click on Settings in the menu to get to the page shown below.

click to zoom

When you enable these options by selecting the checkbox and choosing a style,  the text will be automatically be replaced with the font you have uploaded and set in your style previously.

If you discover any incompatibilities with your current theme, please contact me and try to provide as many details as you can such as which theme you are using, your WordPress version, your browser, any error messages that might have popped up or anything else that you might think is important or relevant to the problem.

I hope this short howto helped you in someway. If you still have any questions please feel free to comment or contact me here.

]]> http://2amlife.com/getting-started-with-anyfont/feed 22