So you ended up here, eh? Well hello! My name is Stu Greenham, and this is my blog!
I'm a 24 year old Apple loving, Magners drinking Web Designer from Hull, England. close

Working with Custom Fields in WP

Every one who uses WordPress for there blog will have no doubt at some point noticed the section labelled ‘Custom Fields’. Now be honest, how many of you use this feature on your Website? or how many of you at least understand what it does? The feature is infact very handy and with a few simple steps, it can really make your WP Theme stand out, but there are many who don’t take advantage of it!

Hopefully if your reading this you have some understanding of how WordPress works, and fingers crossed you are aware of the WP Loop that pulls your posts to display on your site. If you are not familier with the Loop then this page will be very usefull to you in your quest to conquer WordPress (http://codex.wordpress.org/The_LoopClick).

You can define a custom field for each post and set its value to be anything, for example, a URL of an image you want to display, a URL of a site you wish to link to, or just some random text. Okay, this may not make sense yet, but the easiest way to explain, is to show you how I use the Custom Fields on Self Conclusion.

So first things first, where do I use these ‘Custom Fields’ on my site? Well when you visited my blog you will have noticed the featured section of at the top of the page just below the Twitter section. This currently displays three posts, along with an image, and a short excerpt of what it contains. Custom Fields are used here to display the Image for that particular post. You may be wondering why can’t I just call the images I want to display manually and change them as and when I write a new feature post? Well this method isn’t as effecient removes some of the dynamicness (not sure if that is a word by the way) of your site. Lets face it, we use WP to allow us to manage our content better!

How do we do it then Stu? Well it is really easy, first you need to assign a custom field, in my case a link to a thumbnail image that I want to display above the post title and excerpt.

In the Custom Field section you have two options that require your attention, the Key and the Value. The Key can be anything, but its a good idea to keep it fairly simple as you need to call it later on, try call it something relevant. Think of the Key value as a variable name, so for this example I will call it post_image because suprise suprise I am going to be using it to display the post image! (clever I know). In the Value field you need to put whatever it is you want to display, in this example a URL which links to an image. Once you have filled in both parts, click on ‘Add Custom Field’.

Custom Fields in Admin Area

Next we need to ammend the WP loop to include this new field on your site. Before I implemented an image to my feature posts, I just had the Loop pulling the Title and the Excerpt, and my code looked like this…

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<div class="feature">
 
<p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p>	
 
<p class="feature-preview"><?php the_excerpt(); ?></p>
 
</div>
 
<?php endwhile; ?>

We need to add a bit of code for the custom field. The key part is the get_post_meta part, because this calls the custom field and outputs what you set in the WP Admin area, in this case it will output http://selfconclusion.co.uk/images/posts/image1.jpg. Notice the post_image, this needs to be set to the name of your custom field which you should have set earlier. Finally, we need to place the code around an image src tag to ensure the image is displayed on the page, see below…

<img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>" 
alt="Permanent Link to <?php the_title(); ?>" />

Very simple indeed! Now when I add this bit of code into my WP Loop you get the following…

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<div class="feature">
 
<img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>" 
alt="Permanent Link to <?php the_title(); ?>" />
 
<p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p>	
 
<p class="feature-preview"><?php the_excerpt(); ?></p>
 
</div>
 
<?php endwhile; ?>

Here is what you see on screen in my case…

Well thats about it for now, but let me know if this has come in handy for anyone. It really is a simple process and so easy to implement on your website. If you have used custom fields on your WordPress site then leave a link in the comments.

Removing the Dotted Hyperlink Borders

I love Firefox, it is my favoured browser but there is one little thing that really frustrates me, especially from a designer point of view. You may, or may not have noticed that the browser adds a dotted border around hyperlinks that only become visible upon activating the link. For many this is probably not a problem as its not exactly causing any problems to anyone, but I don’t like it.

To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.

Anyways, here is the code…

a:active { outline: none; }
a:focus { -moz-outline-style: none; }

I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…

WordPress .XML Test Data Import

If you have read any of my previous posts about the mighty WordPress, then you might be able to work out I am a big fan! Very true indeed! Infact 99% of the sites I have done use it. When creating a design I won’t build it into WordPress from the start, main reason is that I can concentrate fully on the HTML/CSS code and not have to worry about PHP loops, etc. Much simpler!

I use Lorem Ipsum to generate text to bulk out my design and give me a more realistic feel of how it will look live, which is great. When I come to integrating the site into the WordPress CMS I end up left with a kind of ‘blank canvas’ containing just the default ‘Hello World’ post! Having to continuously create fake posts/categories/tags/comments to check it all works within WP is well, Very Frustrating :(

For anyone else who has the same problem as me, this ones for you. Download the .XML linked below and import this into your WordPress installation and problem is sorted, the .XML will import the following:

  • 5 Pages, with full content
  • 10 Posts, with content, including Tags, Categories and Excerpt
  • 21 Unique Tags
  • 11 Unique Categories
  • 10 Unique Comments, including several from the ‘Tester’ user (Administrator)
  • 7 Default Links
  • 1 Post (under category ‘Bullet List’) contains a Bullet List
  • 1 Post (under category ‘Numbered List’) contains a Numbered List
  • Various Lengths on each posts content and title

If you are not familiar with Importing an .XML file into Wordpress then follow this quick guide (based on the 2.6 version of WP)

  1. Unzip the .XML from the downloaded archive
  2. Log into your WP administration area (http://www.sitename/wp-admin)
  3. Select Manage from the main menu
  4. From the Manage sub-menu, select Import
  5. You will be provided with a list of Blog types you wish to import from, select WordPress from the bottom of the list
  6. Next select Browse
  7. Locate to the .XML you downloaded from the link below, select Okay
  8. Finally, select Upload File and Import

Any problems let me know, but should be fairly straight forward! Finally here is the download link:

Download: WordPress XML Import | Help spread this post by Digging It

Moving Mail from Apple to PC = Ball ache!

Well I can safely say I have broke the record for the amount of time spent copying email between computers! So far, 15 hours and counting. Thats right, 15! Why? Well partly because the guy I am doing it for has literally thousands of emails dating back to 1999 (there all over the place, fortunatly organized, but to a point where there are so many folders!), and partly because Entourage is crap.

Entourage, if your not familiar with, is the Email client that comes with Mac versions of Microsoft Office Packages, something I have never understood! I think it falls so short on the mark compared to Microsoft’s Outlook, and I would personally use Outlook on the Mac as I have an Exchange account setup with my work.

The whole reason behind this transfer was because the company I work for had just installed a Server and as a result all the users were put onto Exchange Email. Previously, Email had been coming in using POP3, so there was no possibility of downloading all the email straight onto the Exchange. I located the Email from Entourage which Microsoft store in a folder called ‘Microsoft User Data’ within the User Documents folder. In here each folder is stored in a .mbox file, which suprise suprise Outlook doesn’t like.

Next I searched for a method of transferring .mbox into a format that Outlook would take kindly, but it soon became apparent that I was fighting a lost cause! So I decided I would enable IMAP (Entourage 2001 doesn’t allow Exchange accounts) on the Exchange account and setup the new email address straight into Entourage at which point I would begin transferring files straight over, simple right? Not exactly! It wouldn’t allow me to drag the folders from the POP account into the IMAP one, meaning I had to do create each folder and copy its content manually. Here are my steps that I took to ensure mail was properly transferred from a POP account in Entourage 2001 to an Exchange Account in Outlook:

  • First, enable IMAP on the server Exchange Account
  • Next, Add the IMAP account into Entourage as an additional Mailbox
  • Under the IMAP account folder list, right click and add relevant Folders and Subfolders, as it looks in the POP account (for example, if the POP account has folders ‘Work’ and ‘Personal’, then these will need to be created in the IMAP account)
  • Select one folder at a time, highlight all the emails within that folder and drag onto the same folder in the IMAP account, this was very sluggish for me, especially folders with several thousand emails in.

This method is very time consuming and possibly not the most efficient way to get the mail transferred but it was the only way I could assure the whole of the mail content would move across in tact. If anyone knows of an easier method I would love to know! Till then we have to deal with the fact that Entourage is not friendly to Outlook even though they are both Microsoft! Daft I know!

Exploring Email Attachments on the iPhone

The other day I was working on a word document and decided to email it to myself, purely so I could quickly access it via the Gmail site on a Windows machine as I didn’t have access to my USB Flash Drive. It wasn’t until today (three days later) I thought I would clear through my iPhone’s email and get rid of any old email, that I discovered something I never knew the iPhone could do! Okay Okay this may not sound like a great “Feature” and everybody may already know, but when I opened up this email containing the attached word document, the document there was in a box and had a Word “W” logo next to it. I tapped on it and the document opened! There it was, my word document viewable on my iPhone! (See images below)

I was even more suprised that it opened a .docx word file, as this even older versions of word cannot open these without the Microsoft Office Convertor pack installed. Whilst it was fresh on my mind, I began trying out other files to see what else I could read, below are my results…..

  • Excel - Opened via Email attachment, but in a similar fashion to the Word file that the document was only viewable and no editing was possible.
  • Powerpoint - Not readable on the iPhone, not suprising either to be honest. I personally wouldn’t have any need to open up a presentation on my iPhone although Businessmen may?
  • Images - As I’m sure people already are aware, yes the iPhone can open images from an Email
  • PDF’s - Surprisingly.. Yes they open on the iPhone. I tested this emailing myself a Magazine scan and man it looked great on the iPhones bright clear display! (see the images below)
  • Music - When I tested this, I thought it was going to work as it recognizes the file and lets you open it, but you get an error message saying it doesn’t recognize the format, almost as if it thinks its opening a video clip.
  • Video - .mov, .m4v tested so far and I get the error saying format not supported
  • Archives - Again, I expected that the iPhone would not open archived files, because quite frankly, what use would it have, not like you could save the compressed files anywere is it!
  • Text Files - Similar to Word Documents, text files open but you cannot edit them.

Finding out that the iPhone can handle these various files, most importantly, the Word and PDF files, is something that will come of great use to me. Since setting up my Gmail account up using IMAP, following the ever popular guide from Derek Punsalan (5ThirtyOne.com), I now have access to my Gmail Labels directly on my iPhone. Having access to these labels makes it possible to organize my email a hell of a lot better!

I decided to create a Label on my Gmail account, called “Documents”, to act as a storage point for my Emails containing attachments. Now on my MacBook, I have a number of files that I regularly use as reference, for example a PDF containing tutorials on Photoshop CS3, and to have these available whenever I need them via my iPhones Email would be very useful! By making a new label titled “Documents”, I have a place where I can now store these! So now when I need want to have access to a PDF or whatever I just email it to myself and move it into the “Documents” Label on my iPhone, then should I ever need to check something I can just open the Email up and wallaaaa I’m away!

Now fair enough, this may seem pointless to you, but for me, its great. Should I ever need to view these files I can wherever I am and if I need to forward these on to anybody, for example, a CV or important document, I can just forward the Email on as the file is already sitting there in an Attached Email! Beauty! Apologies for the poor quality images!

Re-inventing the OSX Stack’s

Well… I’ve been a OS X Leopard user for a good few months now, and I remember a while back when Apple released info about Leopard and all the features that it would include. Back then, one thing in particular caught my eye, this was the Stacks feature! I remember reading about it and thinking… hhmmm ‘I would find that really useful!’, a simple addition to the ever so popular Dock that surely would do nothing but increase functionality! Anyways, time dragged and dragged until the day finally arrived and I was sliding my Leopard disc into my MacBook ready to begin - wooohoo! I have to be honest, since my install back in November, I have rarely used the Stacks on my Dock, and in fact, I get slightly frustrated by the appearance of them! Personally, I think Apple could of done slightly better in allowing its users to customize the look and feel more. The most frustrating thing for me is not been able to change the look of how it appears on the dock, for example if you have the stack’s contents organized by name first, then which ever icon is listed first will appear front most and be visible to the user on the dock. Okay this may not sound like a huge problem at all, but I am one of these people who likes his desktop to look just right, and this doesn’t cut it for me.

I decided I would start strawling the net in search for a better solution! Knowing how programs like CandyBar allow its users to pretty much Tweak the majority of the interface I figured chances are that there will be someone out there who has the same opinion of me and has had chance to fix it! Well… Luck me! I’m not sure who first figured this little trick out but the files (which will be mentioned shortly) are for download on a crazy Japanese site, so I guess credit would go to the far east somewere! well done.

The simple trick in a nutshell is to add an Icon image to the Stack’s folder, then following the next few steps ensure this icon image always appears at the front of the stack, therefore making it appear on the doc. Now thankfully some genius has created two sets of Icon’s available for free download here. Once you have downloaded a pack, open the .dmg file up and copy the icon set to a location on your machine. Now find an appropriate icon for your Stack and copy it into the Stack’s folder. Once this is done, you have two options, you can either rename the icon to the number zero, or you can modify the time stamp of the file. To do the later, enter the following command in a Terminal…

cd -/FOLDER-NAME

touch -mt 202001010101.01 “ICON FILE NAME

Ensuring that the Folder Name/Icon File Name attributes are modified depending on which stack and icon you are using! This will set the icon file’s time stamp to January 2020! Now right click on the Stack in the Dock and select Sort by Date Created. Which ever method you used above, the both work in the same way! Once you have completed that step you will notice the change in appearance on the Dock, see below…

Stack's on my Dock

The image above shows my current stacks located on my Dock, from left to right I have my External HDD, My Applications, and my Downloads. As you can clearly appreciate they look much better! Also you may have noticed I have a Stack for my Applications, well this contains the applications that I only use occasionally, ones that I don’t have room for on my actual Dock. To do this yourself, it is fairly simple and effective way of finding your extra applications faster. Follow the steps below…

  • Go to your Applications Folder
  • Highlight all the applications that you want to show in the Applications Stack
  • Right click on these applications and select ‘Make Alias’, this is the equivalent of creating a shortcut in Windows
  • Now move these Alias files to a separate folder
  • Drag this folder to the Dock, Wallaaaa

You should hopefully have something that looks like this below on your own dock:

Application Stack

I hope this is useful to you, I only figured how to do this myself and I have been using Leopard for a while now! very handy if your like me and have limited space on my MacBook’s Dock that you don’t wish to clutter up with Applications your only using now and again!

My opinion of Stacks upon making these changes has greatly improved, I hope I have done the same for you!

Vista on my MacBook - Quick and Simple

I have to admit, when I first purchased my MacBook, I was in the frame of mind that I would put both OS X and Windows on it. Much to my suprise I picked up the Mac way very quickly and I decided against Windows. After reading many blogs and reviews about how fast Windows really runs on the new breed of Macs, I felt it was time to take the plunge and experience for myself! Originally I had planned to put XP on as I figured it wouldn’t haul as much disc space as Vista would, that was until I discovered a program called vLite (short for Vista Lite). vLite is a sweet little program that allows you to customize your Vista setup by removing sections you don’t want or don’t need, cutting down the amount of disk space needed for the installation. It also allows you to make a setup that does all the work for you, meaning you don’t have to sit there and wait to click the bloody next button every 10 mins!

The reason I bring this up, is because a user like myself, who owns a MacBook, has limited amounts of space. My MacBook for example, has a 80gb hard drive built in, and I just couldn’t afford to allocate away 20gb to Vista. My solution was to use vLite to remove the majority of components from my Vista setup disc, and create a new Image that requires much less space. I ended up with a Vista Image that only requires 4gb, which if you compare to the recommended 15gb Microsoft state, its a huge difference!

Boot Camp vs Parallels

The next part of my quest, was to get the damn OS on my MacBook without disturbing my current and perfected Leopard setup… I was very happy to find out just how easy it was not to mention how quick it installed! If your not aware there is this huge debate - do you use Boot Camp? or Parallels? Hhhmmm well for starters you need to ask yourself the question, Do I want Windows to run inside of Mac OS X (if yes then you want Parallels) or do I want it to run 100% on its own (if yes then Boot Camp is your answer)?

After researching into the two, I decided to go with Boot Camp, purely on the basis running Windows from startup would allow it to use all my machines resources, mainly the 1.5GB of RAM! Another plus point for me was the fact that Boot Camp is now included as standard on Leopard and if Apple are running the show, surely it should be a easy task to setup! Anyways, the following part of this post will just step you through installing Vista Lite via Boot Camp, so if Parallels was then answer for you then you will need Google to help you further, else read on.

So Boot Camp, if your running Leopard like me then head to your Applications->Utilities folder and you should see Boot Camp Assistant, get this cracked up and we shall begin! You are prompted by a setup screen, you will need to click Continue, then you will be asked what size you want to make your partition. This partition will be the one that Windows will be installed on, I am purely going to be using Vista for developer purposes and therefore don’t need huge amounts of space, just enough to cover the Vista setup files and to make sure it can run okay. In my case, with my Vista Lite setup that I created, I only decided to set aside 10GB of space, click continue, then sit back and wait for Leopard to create the new partition. Once this was complete you will be asked to enter the Windows setup CD and click on Start the Windows Installer.

Boot Camp Assistant

Your Mac will reboot and strange as it seems the first time you see it, a Windows setup screen will appear and the machine will begin copying your setup files across! Now follow the steps below…

- Choose Custom Install, Upgrade will be disabled as it is not possible to upgrade

- Select and format the <BOOT CAMP> labelled partition

- Now select this formatted partition and click next (ensure that you do not select your Mac OS X partition)

Windows will now begin copying over the files and installing Windows, for my Vista Lite, this only took around 15minutes, I was really shocked just how quick it installed, the restart took its time and then I had to wait for it to load up Vista the first time but there it was running smoothly as expected (or should I say hoped).

So now you’ve hopefully got Vista on the screen of your Mac (Yes I know it doesn’t look as good as OS X does but try get past this) we need to install the drivers so that your hardware will all work, hardware such as your iSight, Audio, Wireless, Network Adapter, Trackpad. This may sound like a tricky job but Apple being Apple, they have yet again made it easy for us. First you will need to eject your Windows Setup CD, you will find yourself pressing the eject button on the keyboard and nothing happening, that is because the drivers haven’t been installed yet, you see my point? to get around this, open up Computer, and select the drive with the Windows CD in and on the top menu you will see ‘Eject’, press it.

Now, Enter your Mac OS X Leopard Setup CD, you should be prompted the usual Windows way asking what you want to do with this CD, make sure you select setup.exe. A setup will appear, follow the prompts you won’t need to change anything, just click continue then it will begin installing the drivers, at this point, let it do what its got to do, don’t start clicking away. When finished it will ask you to restart, do this as upon restart everything will be good to go! You will find that the screen resolution will correct itself also, this is because the graphics drivers have been installed too.

So the setup part is complete, a fully functioning Vista on your MacBook, kinda cool I think, and if you used to Vista Lite version like me, you will find that it runs really quickly, I have AERO running to with no problems, which I wasn’t sure would work! So you may be wondering how you go between Leopard and Vista when your machine boots, well by default Leopard will boot, but if you need to load Vista, all you have to do is hold down the Option key when the machine first powers on, if you do this, you will get two Icons on your screen one for Mac OS X and one for Vista allowing you to choose which one to load.

Boot Camp Startup Options

If for some strange reason you want Vista to load as default, then this can be done by first loading Leopard, and going to System Preferences. In here go to Startup Disk (see above) and highlight the Windows Folder, close System Preferences and now when you restart this setting will take effect.

Well I think I have covered the most of things, any questions or general advice leave a comment, I hope it was useful! So far with Vista, I have found the experience pretty good, it seems to run well, I haven’t installed much on it, I mainly use it for Developer purposes, you know checking my sites appear good in IE too, but I would recommend that you install some anti virus software because unlike Mac’s, Windows are prone to Spyware and Trojans, so be aware! I installed AVG’s free anti virus and that is enough in my eyes.

Archives for the ‘Tutorials’ Category