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: 2.2.3
Last updated: 5th December, 2011
102139 downloads

WordPress plugin page | Download version 1.0-beta | Download latest stable (2.2.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.

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

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)

[php htmlscript="true"]
<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>
[/php]

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!

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.

I am currently on a 3222km road trip in my home country of South Africa travelling from Cape Town up to Durban and back again, so this is just a quick note to say thanks to all for the really positive responses I have recieved so far about AnyFont.

If you one of those who have emailed me, twittered me or commented on this blog requesting support, dont worry! I am not ignoring you and I haven’t forgotten about you! Driving a car and writing quality code at the same time has turned out to be quite a difficult task, [superemotions file="icon_wink.gif" title="Wink"]  so I will be investigating and responding to all your queries just as soon as I reach my destination.

Currently I am a little more than halfway to Durban sitting in a town called Bloemfontein after driving a total of 1023km yesterday over a period of 14 incredibly long hours.  So if all goes according to plan,  I should be in Durban by this afternoon.

And if I manage to find the time, I’ll update this post  with a couple of the pictures that were taken along the way.

Before I begin; I would just like to point out that I am not a graphic designer in the professional sense, I am just a developer with a keen interest in building very slick and usable interfaces. My actual graphic design knowledge is purely the result of many many hours of trial and error in both Photoshop and Gimp. So if you decide to comment, which I hope you do(I need direction!), please take this into consideration and go easy on me.

So anyway, on Friday last week, I decided to open Gimp for some unknown reason and while messing around with a couple of brushes and textures I had found on the net earlier,  I suddenly got hit by a wave of inspiration for a new 2amlife.com design. You could be staring at a wall, watching a film, playing casino games or even dreaming, but when inspiration hits, you’d better get it down on paper (or onto the screen) before it evaporates. Now the problem is, when it comes to graphic design, my inspiration only lasts so long before one of two things happen:

I end up with something that looks nothing like what I envisioned originally.

- or -

As my inspiration fades, I start going around in circles, completely unable to make up my mind,  then eventually lose interest in it completely and simply abandon it.

The perfect example of an abandoned design is this very site. After making the header image, I couldn’t figure out what I wanted the rest to look like, resulting in the very plain/boring look of all the posts and pages as you can see.

So check out the images below of the concept design I came up with last Friday,  and if you have any ideas or suggestions as to where I should take this theme… please, please comment! I will be forever grateful for any type of feedback which will help steer me in the right direction here!

2amlife Concept Design

I am pleased to announce the latest release of AnyFont, my WordPress plugin which I have been working on quite a bit recently.  This release has some really awesome new features added to it, namely the inclusion of support for PHP4 and the GD image module.  But if you’re a fan of the ImageMagick support which was default in previous versions of AnyFont, don’t worry, thats still there! The plugin will now automatically detect which version of PHP you using and if you have the GD or ImageMagick plugin installed, then load the required libraries which best suit your servers configuration.  (with PHP5 and ImageMagick been the preferred modules of course.)

If the last paragraph didnt really mean all that much to you, dont stress, what it all boils down to is that the plugin is much more likely to work for if it didnt work previously as this new version should now work with almost all of the wordpress hosts out there.

The other new feature which I think is really worth a mention is the new options which are available on the settings page which allow you to automatically replace your post titles, page titles or widget titles with one of the custom fonts you have uploaded.   No editing of code is required!  Just a simple click and everything is taken care of for you!

If you like the plugin please click here to rate it on the WordPress site, or if you have any problems with the plugin or need assistance of any kind, please feel free to twitter me. And on that note, I think its about time I update this site with some relevant contact info and maybe a project page for AnyFont… and then possibly even blog about something other than AnyFont!

This release, which you can download here, is mainly a bug fix release, fixing a number of issues, the most important one been the issue where some users got a “Server 500″ error when deactivating the plugin.  The issue lay in the rewriting of the .htaccess file so if you happen to be hit by this unfortunate bug, the easiest way to fix is to just delete your .htaccess file.  And most importantly, if you have permalinks enabled, you will need to disable them and then re-enable them in your WordPress settings after deleting the .htaccess file, else none of your permalinks will work.

The other significant bugfix, which involves your styles and fonts disappearing when updating, was due to my assumption that WordPress overwrote the plugin on update and didn’t just delete everything then unpack the update.  So now in version 0.5.2,  your fonts, styles and the cache are stored in wp-content,  instead of the actual plugin folder as before.

I am also already working on version 0.6 which is going introduce a whole host of new options.  Two of the major features I am working on is PHP4 and/or GD support and then an option to have clientside font rendering instead if your server does not support GD or ImageMagick.

As always, all feedback is more than welcome!

The first public release of my wordpress plugin called AnyFont,  finally got uploaded to the wordpress plugin repository today.

The plugin itself allows you to use any truetype font you wish for your post titles or menu items by generating images automatically, and if my explanation doesnt make the slightest bit of sense to you, have a looksee  just a couple cm up this  page at this posts title, and at my menu links.   Looks funky ne?

This plugin has been a long time in the making and now that its finally out there, I am going to *try* to commit to working on it a lot more frequently than before.   I have a lot of plans for this plugin to make it easier to use as well as add a couple features which will allow you to make some seriously sexy looking font styles.

If you like this plugin please rate it on the wordpress plugins site, and if you got any suggestions or stumble across a bug,  please feel free to twitter me or drop me an email or something.