Posts Tagged ‘Wordpress’

Institute of Business Consultants – Wales

October 20th, 2010


Brief:
Implement core site development activities for a membership site, including a geo search. Site was based upon BuddyPress/WordPress.

Features:
Features developed include:

– Geo search – extensive customisation of BuddyPress Geo plugin to localise to the UK, and perform searches based upon member specialisms, and combine with keyword searches.
– Member document upload – allow file upload for site members
– Recently viewed profile plugin
– Other PHP-based site functionality.

Technologies used:
WordPress, BuddyPress, PHP, xHTML, CSS, JQuery, MySQL

Dansmart.co.uk mobile theme

May 5th, 2010


When viewed by a mobile device, this site will be displayed with the dansmart.co.uk mobile theme, rather than the desktop theme. This has been made possible by the Mobile Smart WordPress plugin which is under development, and available in the WordPress plugin repository.

The theme will undergo further development over the coming weeks, in concert with the development of the Mobile Smart plugin default theme, and the Mobile Smart content transformation functions (allowing automatic scaling of image content to fit the device viewing the site).

<h3 class=”standout-header”>Mobile Smart Plugin for WordPress v0.2</h3>
<p>With Mobile Smart you can have a selection of tools to enable your theme to work better with mobile devices. Download it from the WordPress Plugin Repository: <a href=”http://www.wordpress.org/extend/plugins/mobile-smart”>http://www.wordpress.org/extend/plugins/mobile-smart</a></p>
<br/>
<h3>Comments/Support</h3>
Add your comments / support requests to:
<ul>
<li>Comment on the <a href=”http://www.dansmart.co.uk/2010/03/released-mobile-smart-plugin-for-wordpress-v0-2/”>Release post</a></li>
<li>Contact me via the <a href=”http://www.dansmart.co.uk/contact/”>Contact form</a></li>
</ul>
<br/>
<br/>
<h3>Description</h3>
Mobile Smart currently contains the following functionality:
<ul>
<li>Switch your theme to a mobile-ready theme if a mobile device is detected</li>
<li><strong>New: </strong>Manual Switcher – to allow your user to manually switch between desktop and mobile versions. Available in 3 versions: widget, option to automatically insert into footer, or template tag.</li>
<li>Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.</li>
<li>Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)</li>
</ul>
<p>See the Frequently Asked Questions for guidance on how to use the plugin.</p>

<p>Note: More functionality will be coming over the coming weeks. <br>
On the Roadmap:</p>
<ul>
<li> Mobile theme – to get you going without needing a theme designer.</li>
<li>Admin – user added Mobile Devices</li>
<li>Mobile Device Log – for you to track which devices are using your website</li>
</ul>
<br/><br/>
<h3>Installation</h3>
This section describes how to install the plugin and get it working.
<ol>
<li> Upload the `mobile-smart` directory to the `/wp-content/plugins/` directory</li>
<li>Activate the plugin through the ‘Plugins’ menu in WordPress</li>
<li>Go to Settings-&gt;Mobile Smart and choose your theme to display when a mobile device encounters your page.</li>
</ol>
<p>See the Frequently Asked Questions for guidance on how to use the plugin.</p>
<br/>
<h3>Frequently Asked Questions</h3>
<strong>= Does the Mobile Smart plugin work with other mobile plugins =</strong>

It would be advisable not to use other mobile theme switching functionality with this unless theme switching is turned off (go to Settings-&gt;Mobile Smart to disable).

This has been tested with the WordPress Mobile Pack transcoder and is noted to be compatible, though the list of mobile devices are different between the two.

<strong>= Does the Mobile Smart plugin do domain switching =</strong>

Not currently, though that is on the roadmap.

<strong>= How do I enable unique handset body classes =</strong>

To enable the CSS body classes, ensure that in your mobile theme you have the body_class() function included:
<pre lang=”php”>
<body class=”<?php body_class(); ?>”>
</pre>
<strong>= How do I change stylesheets dependent on device tier =</strong>

How do I use the body classes?

If you have a style that you only want a specific tier of device (e.g. touch handsets like the iPhone) to use, then use the body class CSS selector in your CSS file as follows:

Example:
<pre lang=”css”>/* for all links */
a {
color: black;
}
/* increase padding on anchors on touch handsets to allow for big fingers
.mobile-tier-touch li a {
padding: 20px;
}</pre>
= How do I change stylesheets dependent on device tier =

You would do this if you prefer to split out each device tier CSS into separate files. Be aware that this creates an extra function call though.

Use the following PHP code:

<pre lang=”php”>
<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// add stylesheets dependent on header
if ($mobile_smart->isTierTouch() == MOBILE_DEVICE_TIER_TOUCH)
{
wp_enqueue_style(‘mobile-touch’, get_bloginfo(‘stylesheet_directory’).”/css/touch.css”);
}
else if ($mobile_smart->isTierSmartphone())
{
wp_enqueue_style(‘mobile-smartphone’, get_bloginfo(‘stylesheet_directory’).”/css/smartphone.css”);
}
?>
</pre>

Note: these functions do not test for the Manual Switcher. To test for the manual switcher (in case you are using
these template tag functions in a desktop theme), you should call:

<pre lang=”php”>
<?php
/* add additional stylesheet for certain mobile types */
global $mobile_smart;
// find out manual switching state
$is_manual_switched_to_mobile = $mobile_smart->switcher_isMobile();
?>
</pre>

<strong>= Can you add xxxx-device to the <strong>the Mobile Smart plugin </strong>? =</strong>

Please email me with details of the device that is not yet supported by Mobile Smart, and I will add it in, and endeavour to release an updated version within the week (if timescales allow).
<h4>= How do I use the Manual Switcher? =</h4>
You have the option of the following:
<ul>
<li>Mobile Smart Manual Switcher Widget – go to Appearance-&gt;Widgets and drop the widget in an appropriate sidebar. If you’re a theme developer, you can create a new ‘sidebar’ in the appropriate location, e.g. the footer bar, if you don’t want this option in the standard sidebar.</li>
<li>Enable Manual Switcher in footer – if this option is enabled (via the Options-&gt;Mobile Smart page), this adds the Manual Switcher link into the wp_footer() call, which means it will be displayed at the bottom of your page.</li>
<li>Template tag, see below:</li>
</ul>
<pre lang=”php”>
<?php
// get global instance of Mobile Smart class
global $mobile_smart;

// display manual switcher link – requires Manual Switching to be enabled
$mobile_smart-&gt;addSwitcherLink();
?>
</pre>
The Manual Switcher displays the switcher link in a div with an id of *mobilesmart_switcher*

<strong>= Where can I get a mobile theme from? =</strong>

Try the WordPress Mobile Pack for a good example of a theme that is compatible with XHTML-MP.

<strong>= What’s on the roadmap? =</strong>
<ul>
<li>Admin interface to allow adding of user agents</li>
<li>Domain switching of themes</li>
<li>PHP and Javascript helper functions</li>
</ul>

Released: Mobile Smart Plugin for WordPress v0.2

March 22nd, 2010


Version 0.2 has just been released of the Mobile Smart plugin, which is a plugin to help mobile site development in WordPress.

Download through the WordPress.org plugin repository: http://www.wordpress.org/extend/plugins/mobile-smart/ (note: link will open in new window/tab).

Mobile Smart currently contains the following functionality:

  • Switch your theme to a mobile-ready theme if a mobile device is detected
  • New: Manual Switcher – to allow your user to manually switch between desktop and mobile versions. Available in 3 versions: widget, option to automatically insert into footer, or template tag.
  • Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.
  • Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)

Any feedback gladly welcomed.

ECMExchange – Thomson Reuters

March 18th, 2010


Brief:
Implement an free-subscription based editorial site focused on Equities and Capital Markets (ECM).

Features:
Features developed include:

– Regular news and editorials
– Customised process and styling for user registration / login / logout / forgot password / etc.
– Incorporating data from external XML Job vacancies feed
– Briefings – document listing & browsing
– Adverts, Twitter feed, external RSS news feeds

Admin-side:
– developed a document upload plugin, categorising files by months.
– plugin to get CSV of all users

Technologies used:
Wordpress, xHTML, CSS, JQuery, PHP, MySQL, Photoshop, XML

Released: Mobile Smart Plugin for WordPress v0.1

December 9th, 2009


Updated 22/12/2009: plugin is now hosted on WordPress.org plugin repository.

I’ve just launched the first of a suite of plugins to aid mobile site development in WordPress, called Mobile Smart.

Download through the WordPress.org plugin repository: http://www.wordpress.org/extend/plugins/mobile-smart/ (note: link will open in new window/tab).

Mobile Smart currently contains the following functionality:

  • Switch your theme to a mobile-ready theme if a mobile device is detected
  • Template functions to help determine which tier of mobile device (touch/smartphone/other) is viewing your site, to allow conditional content inclusion.
  • Adds device and tier specific CSS selectors to the body_class, to allow conditional CSS (e.g. so in the same way you have “.single” that you can target “.iphone” or “.mobile-tier-touch”.)

Any feedback gladly welcomed.

High Frequency Trading – Thomson Reuters

December 7th, 2009


Brief:
Implement a multimedia focus topic microsite for Thomson Reuters (outsourced from Coreware Ltd). The first topic site is on “High Frequency Trading”. This site has so far proved highly successful for Thomson Reuters.

Features:
Developed an entirely widgetised home page, which allowed the client simple control over which widgets (panels) were displayed on the home page.
Features developed include:
– category posts widget, displaying summaries of posts in a category inside a widget
– tabbed RSS widget, displaying multiple RSS feeds in a widget
– multiple question Polls widget
– documents widget, showing documents uploaded, with icons and descriptions.
– incorporated supplied Thomson Reuters flash applets, videos (added via WordPress shortcodes).

Admin-side:
– developed an RSS import function, allowing RSS news items to be imported as WordPress posts.

Technologies used:
Wordpress, xHTML, CSS, JQuery, PHP, MySQL, Photoshop

Opta Sportsdata

November 3rd, 2009


Brief:
Implement media-rich corporate website for sports data company. I was given the design, and implemented it in WordPress. Outsourced from Coreware Ltd.

Features:
Developed using WordPress as a CMS, with all the pages modifiable using the WordPress rich text editor in the admin section.
Video included in some pages, with a custom video selector developed using JQuery. Client-side Contact form validation using JQuery.

Technologies used:
Wordpress, xHTML, CSS, JQuery, PHP, Photoshop

Swansea Community Church

September 4th, 2009


Brief:
The church wanted an online presence that would quickly allow a viewer to see what was happening, how to find their meetings, and listen to the sermons that were being preached. There is a members-only section with additional content.

Features:
Visual design, WordPress, Events, Google maps, membership, podcasts.

Technologies used:
WordPress, Photoshop, xHTML, CSS, Javascript, PHP, MySQL

WordPress: Making a top level menu page link to external site

August 23rd, 2009


Introduction
In WordPress, there is not a built-in method to deal with the issue of how to make a top level menu item link to an external site (e.g. have a menu item called “LinkedIn Profile” that links to http://www.linkedin.com/in/dansmart). We’ll look at a few different ways to achieve this below, aiming to have something that is customisable by the user, and that produces valid xHTML.
Read


Switch to mobile version