Correct way to add CSS to WordPress Plugin Backend

Many of us have dabbled with making our own WordPress plugins, but what alot of people forget is we need to make sure we’re as compatible with WordPress going forward as can be.

Over the last 3-5 months I’ve really started to discover the hidden power of WordPress and today i’m blogging about another find.

It’s quite a simple topic really. Many of you will want to include your own custom stylesheets with your plugins, but what’s important is keeping the integrity of your WordPress plugin intact.

So whats the correct way to Enqueue your css stylesheet?

There is a couple of ways in which you could achieve it, but being prudent is best.
Include the stylesheet only in the admin pages that you absolutely need to, in the case of the backend, only on the submenu pages you need to.

I am of course assuming here that your pretty familiar with the plugin backend and that you know how to create sub menu pages for your WordPress plugin.

$page = add_submenu_page( 
    __( 'My Plugin', 'myPlugin' ), 
    __( 'My Plugin', 'myPlugin' ),
    'my_plugin_manage_menu' );
    /* Using registered $page handle to hook stylesheet loading */
   add_action( 'admin_print_styles-' . $page, 'your_plugin_styles' );

This would of course normally be wrapped in a function or class, whichever your coding style prefers.

We are telling WordPress in the above example to add an action to call our custom function ‘your_plugin_styles’ on printing styles for the page WordPress object reference now contained within $page.

// Hook somethings up in our plugins init function
add_action( 'admin_init', 'your_plugin_admin_init' );

Next, I have added an action to be fired on ‘admin_init’ to call ‘your_plugin_admin_init’.

And what i’ll do inside this is call a custom_forms.css file that I need to use for some styling on the backend of this plugin. I’ve also housed it in a css/ folder within my plugin directory for convenience.

function your_plugin_admin_init(){
    wp_register_style( 'yourCustomFormCss', plugins_url('css/custom_forms.css', __FILE__) );

And finally we enqueue our script using wp_enqueue_style

function your_plugin_styles(){
    wp_enqueue_style( 'yourCustomFormCss');

And this is our working procedure.

Bringing it altogether.

We first fire our plugins init function called ‘your_plugin_admin_init’ inside this we register our css style with WordPress. Ready to be called later. Then whilst registering our menus, we tell WordPress on this admin page ONLY, to fire our custom css calling function ‘your_plugin_styles’ and from within that we enqueue our previously registered script ‘yourCustomFormCss’ using ‘wp_enqueue_style’.

Some useful links

How to get the content of a WordPress post page as well as the loop

Earlier today I was talking about how I haven’t blogged in a little while, I feel ashamed at the truth of it. So as I was problem solving with a colleague tonight I spotted the opportunity for a nice helpful quick and dirty little WordPress post.

Some times the case may arise when you have set a static page as your blog page and wish to add a small blurb above your post loop, or even some custom meta to control a few images in your layout theme? Now it’s a piece of cake just to add them into your theme. But, point is, the client’s not going to dive into that file, nor do we want them too. So what we want to be able to do is, spew out some content, and then spew out the loop of blogs.

For those of you seeking the answer, or an answer I should say. You will most likely have been frustrated for a little while that $posts->ID refers to the post loop and by default wordpress has it’s wp_query instance set to your post loop settings.

It’s easy enough to manually enter the id and grab the page however, we want to do it dynamically. so after a little digging, I came up with this solution.

$page_id = $wp_query->get_queried_object_id();

This pretty much gives you all the control you could ever need, but just incase your worried, here’s the std Object output from an example.

stdClass Object ( [ID] => 15 [post_author] => 1 [post_date] => 2011-08-10 09:22:40 [post_date_gmt] => 2011-08-10 09:22:40 [post_content] => Just going to be testing whether this is working or not. [post_title] => Blog [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => blog [to_ping] => [pinged] => [post_modified] => 2011-10-20 21:39:14 [post_modified_gmt] => 2011-10-20 21:39:14 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost:8888/bytewire/?page_id=15 [menu_order] => 0 [post_type] => page [post_mime_type] => [comment_count] => 0 [ancestors] => Array ( ) [filter] => raw )

Even without this, we can grab such things as meta data.

<?=get_post_meta($page_id, 'sliderheading', true);?>

I’m still looking for a solution that solves category, archive and deeper browsing though mind you.

Web Design, Should I have? The follow on..

As a few of you may remember, a few weeks ago I wrote a blog summarising alot of my feelings surrounding my own experiences with starting a Web Design and Development business. In which I stressed some of the things, that we’re currently on my mind and a brief evaluation of my experiences thus far.

If you are planning on reading the rest of this post, I strongly recommend you at least give the previous article a little skim through, you can find it here

This post is very much a continuation of expression, using my blog as my tool and in doing so following on nicely from the post I wrote a few weeks ago.

Ok, so, onwards, a little over a week ago I took a short holiday and hoped to use it as a nice bit of relaxation and reflection time. Normally while i’m away I tend to lay on the beach thinking of ways to do things differently, the next big thing or just illustrating an idea in my head. However something rather strange occurred to me about half way through the holiday, I hadn’t done any of this. This was very weird, i’d taken the time to read a few great books from abookapart but other than that i’d thought about nothing relevant to work or sat their wondering what was going on back at home, without me. I tried to kick back and analyse why I thought this was, and, in honesty I didn’t find the answer. However I had drawn some conclusions from it. I was obviously stressed, tense, and wound up about work and releasing that largely over the weeks building up to my holiday, combined, with the perfect excuse to forget about them, I found myself happy enough to not be thinking about work and it’s in’s and out’s at all. Bliss.

The ability to attach and detach yourself from work is always a good one to have, at least for your health anyway, but when its your own company as many of you will know, this really is not easy to do. I still felt perhaps something more fundamental had changed. So since i’ve been back, i’ve been trying to work out what I thought that might be, and, why. I’ve drawn this from my feelings; over the last 3 years i’ve poured my life and soul into starting my business, my social life and my free time, and a whole lot of blood sweat and tears. Although i’m not going to sit here and complain, i’m open to admit, i’ve not got as much out of it as i’ve put in. However, it has given me the chance to be thrown in at the deep end and learn the tricks of the trade, admittedly very much the abnormal way round, but its been great none the less. My passion for designing and making things has definitely not waned in this period, which to me, is a great sign, as hopefully i’ve found something I really do love to do.

But what pouring your whole life and soul into often makes you forget, is that, life exists outside your little bubble, and if you just take a step back once in a while, quite often you’ve missed quite a bit. Just because things perhaps aren’t working out, it’s not the be all and end all of everything, theirs plenty more to come and plenty of other avenues and options to explore. So i’ve decided to try and relax about thing’s, learn from previous mistakes and just enjoy developing when I enjoy it and stopping when I don’t.

I also thought; you know what i’m going to think about what the downfalls of the last 3 years have been and how I might do them a little differently. One area that I particularly wanted to talk about was risk. That big scary word RISK. Avoid it like the plague some would say, other’s learn to embrace it, the best approach, who knows. Both can work, but they are fundamentally very, very different. We adopted the approach of avoiding RISK like the plague, looking back, i’d have liked to played my cards differently. Although RISK oftens shortens the time in which you have to develop projects under a budget, employing one or 2 more staff, also shortens the time needed to develop projects and brings 2 more heads into the business, 4 heads are better than 2 right? We only took the plunge to get ourselves an office 2 and a bit years into the 3 and a bit years we’ve been doing this. Again, something we should have done long ago. What taking no risk has allowed us to do is drag out what could end up being the inevitable, over a longer period of time.

For me I think the extra time has given me the time to concentrate on improving my skills as a developer, but has turned me into someone who has to do a bit of everything. And as we all know full well, you CANNOT be the best at everything, employing other people is far more efficient, providing you hire the right people of course!

As a web design and development business we could do with a full time sales manager, pulling in work, left, right and centre. But that’s never happened quite that way. We make alot of our own products (mostly online games) which when we’re not busy we get stuck into, either by upgrading or coding add ons. For which we could also do with a content manager, who would make interesting and awesome links between missions, achievements etc and manage the game experience, given to the players in a pro-active way. But who’s willing to work for a profit share these days? And finally a PR who gets our games and products all over the web. Now some of you might be sitting their saying well you could probably do all these things and run your own business, I say, you can’t. I will never be running my business as well as I could, so long as i’m also the Sales Manager, the Director, the PR, the lead Programmer, and Designer. Fact.

For me I say embrace RISK, it will help you reach either the end or the start of something quickly and without wasting years and years trying to build up to it. Don’t get me wrong I wouldn’t suggest you go out tommorow and try to secure a £250,000 bank loan, but perhaps try to secure some funding and take some risks with it. Business is all about risks, some come off and some don’t, thats life i’m afraid folks.

So perhaps i’m acting a little downbeat about things, but i’m feeling cynical towards the end of this post. I think my short break gave me som time to reflect and think about both my business as a whole and how it’s now fitting in with my life goals and personal objectives. I’ve given both of these alot of thought, and, hope I have some kind of master plan in my head. It’s very important to remember too assess how everything your doing fits with you, if what your doing ultimately doesn’t fit with you and your life or even your future, then likelihood is you won’t be enjoying it and thus won’t be making the quality of work / contribution you should.

Responsive Web Design – Should We?

Responsive Web Design (RWD) seems to be causing quite the storm in our world at current, and I myself am quite engrossed within it’s inner workings. At face value it seems like it could be the answer to designing for different, DPI’s, Resolutions, and screen sizes. Whats more is it really could be the answer…..or could it? I’m not writing this to suggest my opinions are right nor wrong, this is just my analogy thus far. I’ve read a few books and have been keeping track on the on-going arguments on various other blogs and sites, but i’m by no means claiming to be a genius on the subject (disclaimer over with).

RWD for those who aren’t familiar is in summary – all about cleverly designing your css stylesheets, to specifically target, segment, and adapt to changes in browser Resolution and DPI. Most importantly making it possible to target particular hand held devices like the iPhone, iPad etc. Using the css @media-queries functionality provided to us since CSS2 we can effectively target different devices within a few simple css rules. It’s actually a great and inexpensive way to build an adaptable stylesheet so that your website is far more versatile to change.

It allows you as the designer to simply target and adapt my website, specifically to different resolution screens straight from your normal css stylesheets. Now don’t be fooled, the ability to do this has been around for a while. But, only of late, with the steady traction of mobile browsing and surge of tablet’s into the market, viewing our websites in lots of different ways has become a huge headache. But what we’ve also found has changed is peoples needs, from device to device, and how they interact with our websites. We’ve identified clients/customers/general public want a much different browsing experience when viewing from an iPhone to what they do when viewing on their PC/MAC. And thus far nearly all major websites are following the trend, opting for smart, toned down versions of their main sites to better serve their mobile visitors. Which I think is great, and precisely the right attitude to take. So long as you provide some means to view the normal site as a fail safe.

RWD looks to also change the way we design, instead of designing our desktop css and site first, instead we should opt to design for the simplest, most ancient and out of date displays first and build up to our most elaborate (in most cases: the desktop) last.

Now here’s where my opinions come in, shoot me down if you will, or ride with me if you agree, neither matters to me very much as i’m probably about as un decided on the matter as you.

RWD for me, brings about a different way of approaching stylesheet design, and to the most extent, it provides a much better base for any website (given its worth the resources and time to create the extra stylesheet rules and you have a genuine use case). Here’s what I mean by base:

If your site already has a specifically targeted mobile site, then great. No doubt you’ve got a major need for the mobile version and thus most likely the budget to support such a move. This would serve up in most cases a completely tailored experience to the user, dependant on screen resolution and DPI, which in my opinion cannot be bettered. However, this requires significant time, large investment, and very often a complete reworking of functionality. It can also often cause duplication and ever growing code bases to manage, which if your freelancing or a small team, might not be desirable until you know its worth the resources.

Otherwise I think RWD holds significant value, its a lightweight, inexpensive, and pretty simple way to make your site much more adaptable to change, and with the ever changing market, who wouldn’t want that?

Now this having been said, like any tool out their, you can royally f$*k the implementation of this up and alot of the arguments and debates i’ve seen on this topic thus far have been hemmed on this. Specifically on when to use and when not to use. RWD would argue changing elements widths dynamically as the user resizes the screen is great, and you should do it on any device. However, I say, it depends largely on the implementation, and even more significantly on the implementer. It is 100% a useful tool given the right implementation in the right scenarios, however, much like anything on the web, interpretations are different and tools like this will often be overused. Whether RWD works for your site is down to your developer or if you are a developer, then its down to you. Don’t sit their thinking simply adopting this movement will make your websites, amazing, cutting edge or WOW anyone. You’ll only be putting your own head on the guillotine if you think RWD is necessary and needed for every project from now on. Instead carefully weigh up the pro’s and con’s, and make an informed decision based on results, demand, budget, and implementation time.

If I was to really stick my neck out, and risk it being severely beaten off by any interested passers by, I might go as far as saying I like to adapt design for small screen resolutions including the browser, to a certain upper limit. After which I think its pretty pointless endlessly expanding a design. Also I think you open up alot of potential problems when doing so, which with more complicated sites is definitely more of a headache than its worth.

As with anything in our opinionated little world of web development, you’ve got your haters and your lovers, that will never change. RWD can be a very useful ally, when you choose the right time to make allegiances, but don’t expect it to be a complete game changer should you decide to take the leap of faith.

Do’s and do nots of business websites

Earlier today I decided to have a little think about what makes a business website great and what, well, really doesn’t! The very first thing I thought was it’s, making a wonderful looking website, so wonderful infact that all your clients will immediately be like woah these guys really have talent, I want my site designed by them. Essentially this is a good way of thinking or at least the correct mindset. I’m sure that, I’m not alone in thinking this! However, there’s a little more to a wonderful website than it’s cover. As the sayings go “beauty is only skin deep” & “you cant judge a book by its cover”.

So what really does make a wonderful, purpose serving business website? Good question.

Here are some Do’s and Do Not’s from my own personal experience and view.


  • Do make your new site look really eye catching, but more importantly remember the user experience. Don’t make it so eye catching and out there that the average client or onlooker is immediately put off, and won’t bother to find the information they want. Make sure navigation remains simple, nice menus rather than hidden buttons and links. Remember if you look at alot of the most successful websites used by the biggest base of users out there, most of them won’t have any massively out there or exciting UI. They will all have basic, easy to remember, easy to use UI and thats important to remember! Users are thickle and generally make there mind up about a site in the first minute of being on it.
  • Do make sure you don’t hide important information behind too many pages of link depth, users will not want to siv through to much stuff to get to what they want.
  • Do make sure you don’t forget thats its all very well having a nice new site that utilises jQuery or other javascript language to minimise the amount of pages you have in your website, but remember the consequences of doing so. Less content to be ranked, less pages to be indexed and altogether less chance of search engines picking up your site well (this particuarly applies to small businesses, intending to rely on search engine traffic to drive business).
  • Do make your unique selling points readily available.

Do Not’s

  • Do not Hide important information about who you are behind, to tricky or clever UI.
  • Do not hide information that you want a client to see at all, make sure they are confronted as early as possible with the information.
  • Do not make UI’s to clever, that anyone but the designer will struggle to know what to do.
  • Do not make the entire website based on one page (if you wish to rank well for numerous things in search engines).
  • Do not play any annoying sounds on load of your homepage or any other page, a customer who is confronted with loud sound all of a sudden is likely to first port of call close the browser window, that plus its just plain annoying.
  • Do not bury contact forms and ways to get a quote behind a form asking for an information overload, carefully design it so that you get exactly what you need to a minimum.