:::: MENU ::::
Posts tagged with: Wordpress

Back to basics – a new blog design

original

The previous incarnation of my blog – more of a magazine style – allowed me to present a more diverse range of content. But what is the point of that if the format imposed means you are restricted in how to categorise what you write? Finding a way to make the old Max Magazine theme work for the sorts of things I wanted to write never worked quite the way I wanted it.

So I’ve gone back to basics. This blog now, once again, looks more like a blog. It is based on the Focused theme by Site5. Here’s a summary of the main changes:

  1. A more blog-style homepage
  2. Fully responsive design – so the pages should look good on anything from a small phone screen up to a 30″ monitor
  3. More space for larger photos
  4. A clearer, lighter and simpler design
  5. Use of Google fonts for headlines
  6. 2-click social media sharing buttons for better data protection
  7. A clearer overview – in the main menu – of the main themes of the blog
  8. Dedicated sections for the articles I am writing elsewhere, and for live streams and videos of my presentations, including adding all old material into these sections

A slight mishap during the rebuilding process meant some subscribers were deluged with e-mails – this has now been solved!

Anyway, do let me know what you think of the new design!

Do let me know what you think!

[UPDATE] A few stats looking back. This is at least the 5th different design of my blog in the 8 and a half years I have been writing it. The first year it ran on pLog (that became LifeType) and since then on WordPress. There are 1778 published posts, meaning 1 post every 0.57 days in that time. 11086 comments have been approved at the time of writing.


EU cookie law compliance (in WordPress)

By 26th May 2012 all websites in the UK are supposed to comply with the 2009 changes to the EU Privacy and Communications Directive, and this means paying attention to how any website deals with cookies. This website – just as almost any other website – uses cookies to improve the user experience for things like sharing buttons, and to gather stats on visitor numbers via Google Analytics.

So what’s to be done to bring this site, and the dozens of others I’ve built over the years, into compliance with the new rules? That’s where it gets complicated. The ICO has released guidance about how this should be done, but it’s as clear as mud. So I’ve experimented a bit, and spoken to a few people, and these are my conclusions.

Firstly, I have looked at explicit consent plugins for WordPress – essentially displaying some sort of warning message to site visitors, telling them that cookies will be set. I’ve particularly evaluated EU Cookie Directive and Cookie Control. There are pros and cons of each. EU Cookie Directive displays a prominent message at the top of any page – it’s in your face and almost forces people to comply as a result. Cookie Control is more subtle, sitting at the bottom left of your screen, and also has better compatibility with Google Analytics and has better control over which countries should show the warning.

BUT the first day running this site with Cookie Control installed, site visitors to Google Analytics plunged 80%. Visitors were either not giving consent, or did not understand what the whole thing was about. Also how all of this applies to mobile devices, and old browser versions (IE) is a minefield.

So I am – for now – going for the same sort of approach that the UK government itself is using for its own sites, as explained by the Cabinet Office here. Hence I am not going to be seeking prior approval for cookies, but – for this site and for any others that I host – explaining clearly and simply what first party and third party cookies are set, how these can be controlled by an individual visitor, and explaining clearly what will be done with any data submitted by users of sites. The privacy statement for this blog can be found here.


Web campaigning on a shoestring

Right, you want to get a campaign website up and running in no time. You have a little bit of tech knowledge and very little cash. What do you do? Here’s my personal guide to web campaigning on a shoestring. All of the tech mentioned is free unless otherwise stated. You’re most welcome to quibble with any of this in the comments!

1) Start with WordPress, self-installed version
Blogspot, Tumblr, WordPress.com and others may be simpler at the start, but you’ll hit a brick wall with either the design or the tech sooner or later. So head over to WordPress.org and download the latest version. If you’re feeling keen you can get WordPress running on your local machine (guides for Mac and PC), but I am assuming you don’t have time for those niceties, and want to get WP running online as soon as you can – also easier if you’re collaborating in a team.

2) Sort out a domain name and website hosting
Take your pick of a company for domain name registration. I’ve always had excellent service from EuroDNS (for EU-wide choice) and Easyspace (for .uk domains). Domains are about €15-€30/year. Make sure you host with another firm – gives you the most flexibility if you encounter tech headaches later, or your hosting firm goes bust (it’s happened to me). At the moment I’m using EZPZ Hosting in the UK and I’m very happy with them – their Junior package (£2.99/month) is enough to run WordPress very smoothly and easily. You then need to redirect your domain name from registrar to host by making changes to the Name Servers. Your host will tell you what their nameservers are, and these will need to be entered in the web based control panel of your domain name registrar.

3) Get WordPress up and running
Either use a FTP client to get the WordPress files onto your server (I swear by Transmit for Mac, although it’s $34. Free for Mac or PC: Cyberduck.), or use a one-click installer for WordPress provided by your host (normally available in cPanel). Even if you don’t use FTP to upload WordPress itself then you’re almost certainly going to need it for other files later. The WordPress installation guide should be easy enough to follow.

4) Keep away prying eyes
While you’re working on your site make sure others can’t peek at what you’re doing. In WP go to ‘Plugins’ > ‘Add New’ and search for Maintenance Mode. Enable it, and configure it in ‘Settings’. The plugin puts an Under Construction page in place for casual visitors, while any user logged in as admin in WordPress can continue to observe site development.

5) Get a theme
You can of course code a theme from scratch, but chances are you want to get moving fast. You could amend one of the two themes that come with WordPress (TwentyTen or TwentyEleven) but neither is especially inspiring and configuring TwentyEleven can be a real headache. Of course here you can Google for your own options, but here are a few favourites, all of them free. Arras is an excellent and flexible theme for magazine style sites. Design Disease has a whole bunch of excellent and visually interesting themes. For free business style themes have a look at this WPLift list. If you have no coding skills at all try Atahualpa. Also worth a look: Sight, Mimbo. You’ll then need to do some work configuring the logos, colours etc. of your theme, although in recent versions of WordPress, adding menus and sidebar widgets is now a drag and drop process.

6) Get the right plugins
These are plugins that I have experience with. Not sure these are definitely the right options, but they have always worked OK for me! For social share buttons: Social Sharing Toolkit. For Google Analytics: Google Analyticator. For XML sitemaps to boost your search engine rankings: Google XML Sitemaps. For e-mail for notification of new posts: Post Notification. For comment notifications by e-mail: Subscribe To Comments. For petitions: FreeCharity Petition Plugin. For e-mail contact forms: Contact Form 7. For polls: WP Polls. For tweets in a sidebarTwitter Widget Pro. To customise sidebars: Widget Context. For an iPhone version of your site: WPTouch. To backup your database: WP-DB-Backup. For a mailing list: Mailing List (bit of a nightmare to configure, but persevere!). For multilingual sites: WPML (but you have to pay at least $29 for it).

7) Put in some content
Get some filler text from Lipsum, and add some images… and away you go!


Design changes, and some WordPress code and icons

I’ve amended the design of this blog a bit, simplifying things and moving away from a amended version of Twenty Eleven theme, and instead using a (lightly) adapted version of Busby. This theme incorporates some HTML 5 elements, and also is much neater on devices with small screens.

One aspect I have worked on is an improvement of the Social Media integration in the theme, with new icons at the top of the screen, and share buttons on posts. The icons (and a PSD file) can be downloaded here.

The share buttons – for Twitter, Facebook, Google+, Pinterest, LinkedIn and Flattr are coded into the theme (some of the functionality could be achieved through Plugins, but I didn’t find any that did the job the way I wanted). The plugin needs two pieces of code. The Facebook Like button is the hardest to get working – more details on that here from Michael Fields.

Note that these scripts work in March 2012. I cannot vouch for what will happen in the future – Social Networks can be fickle!

Put in header.php

<!-- Twitter button script -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  

<!-- Facebook Like script - replace all the 99999s with your App ID -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=99999999999999999";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<!-- G+ script -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Pinterest Script -->
<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        if (window.location.protocol == "https:")
            s.src = "https://assets.pinterest.com/js/pinit.js";
        else
            s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

<!-- LinkedIn Script -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

<!-- Flattr Script -->
<script type="text/javascript">
/* <![CDATA[ */
(function() {
    var s = document.createElement('script');
    var t = document.getElementsByTagName('script')[0];

    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';

    t.parentNode.insertBefore(s, t);
 })();
/* ]]> */
</script>
									

Put where buttons are to appear

<!-- Twitter share button Start - replace XXXXX with your Twitter name -->
<div class="buttonwraptwitter"><a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php echo get_the_title(); ?>" data-url="<?php echo get_permalink(); ?>" data-via="XXXXX">Tweet</a></div>
<!-- Twitter share button End -->

<!-- Facebook share button Start -->
<div class="buttonwrapfacebook"><div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false"></div></div>
<!-- Facebook share button End -->

<!-- G+ share button Start -->
<div class="buttonwrapgplus"><div class="g-plusone" data-size="medium" data-href="<?php echo get_permalink(); ?>"></div></div>
<!-- G+ share button End -->

<!-- Pinterest share button End -->
<div class="buttonwrappinterest"><div class="pinterestbutton"><a href="http://pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>&media=<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
  echo wp_get_attachment_url( $attachment_id, 'medium' );
} ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></div></div>
<!-- Pinterest share button End -->

<!-- LinkedIn share button End -->
<div class="buttonwraplinkedin"><script type="IN/Share" data-url="<?php echo get_permalink(); ?>" data-counter="right"></script></div>
<!-- LinkedIn share button End -->

<!-- Flattr share button End - replace XXXX with your UID -->
<div class="buttonwrapflattr"><a class="FlattrButton" style="display:none;" title="<?php echo get_the_title(); ?>" data-flattr-uid="XXXXXX" data-flattr-button="compact" data-flattr-category="text" href="<?php echo get_permalink(); ?>">Flattr</a></div>
<!-- Flattr share button End -->
									


brusselsblog.eu – a little project for readers in the EU capital?

Back a couple of years ago when I lived in Brussels I was struck by the lack of good quality information online in English about life in the city. Too many people in Brussels for work in and around the EU institutions never see the best of Brussels, and the idea was to create a blog – www.brusselsblog.eu – that would address that need. The inspiration was drawn from the French language BXL Blog.

Anyway, I still own the domain name, WordPress is installed and running, and I have an initial expression of assistance from @bramsmets on Twitter. The need for the blog very much still exists. Anyone else want to chip in and help? If so please comment here, or contact me!


The requirements for a personal blog, 2011 style

Back in the autumn of last year I did a partial redesign of this blog. Since then the blog has sprouted all kinds of buttons, and looks a bit of a mess. In the meantime WordPress has evolved to version 3.2 and offers a whole bunch of new features. So what, I wonder, are the criteria for the ultimate personal blog in the summer of 2011, and how am I going to change this blog to achieve those aims? Here are my first thoughts.

Feel free to comment on / improve upon the list below! Continue Reading


How MEPs should organise their web comms and social networking

I was a speaker yesterday at the Nordic-Baltic Youth Forum 2011 in Narva, Estonia. The slides from my presentation are here, but this post is about an issue that was on my mind all day – how Members of the European Parliament should organise their web presence. The 3 MEPs at the event in Narva – Emilie Turunen, Kristiina Ojuland and Radvilė Morkūnaitė-Mikulėnienė – all have personal websites and some presence on social media, but judging by their comments on the panels they struggle to make the most of the technology, and find it hard to work out what they should do and what their staff should do. So here’s a plan for them.

Click to enlarge
Continue Reading


EU Navfor website – tell them what you think of their mission

When EU institutional comms are not up to scratch I say so – see posts about the EEAS, Citzalia and the Citizens’ Initiative for example. So it’s only fair, in return, when I see a good example of what the European Union is doing to give some credit where credit’s due.


I was hence very happy to see how the European Union Naval Force Somalia – Operation ATALANTA is presented on the web. The site has an engaging, news style design, and the homepage makes good use of photos and even some video. There’s a tag cloud, RSS, and the option to share each article on social networks, and it’s possible to comment directly on articles. Plus the whole thing is built on WordPress.

I am in no position to politically judge whether this mission is working well or not (more about it on Wikipedia here), but at least they are managing to cover the basics well and draw together the news of what they are doing in a contemporary and reasonably interesting manner.

I’m sure my critics will say, well, yes, this is just a small mission. Perhaps. But it’s also a sensitive matter, and they are making a good effort in their external communications, an effort the rest of the EU institutions would do well to learn from.


Pages:12