Mobilize.js is available for Wordpress in two ways
- Mobilize.js for Wordpress plug-in, available from Wordpress Install Plug-ins*. This option is for blog authors that want to mobilize their blogs easily.
- Direct integration to the theme code with <script> tag. This is for theme authors and site managers who want to customize how their mobile site looks and feels.
Mobilize for Wordpress plug-in is aimed for people who want to make mobile version for their blog easily.
Mobilize.js for Wordpress supports
- Blog roll (front page)
This plug-in is not needed if you are using a Wordpress theme having direct support for mobilize.js as described below.
- Install plug-in through Wordpress add plug-ins
Mobilize.js for Wordpress plug-in will insert mobilize.js script on your Wordpress blog. It will also use the default theme (twentyten) for mobile clients, as old custom themes might not be compatible with mobilize.js.
There are no settings whatsoever in Wordpress user interface.
For further tuning
- Set Options -> Reading -> Blog pages show at most to 4 (default 10), so that the pages will load faster for mobile.
You must disable HTML page caching if you are using this theme switcher plug-in. If you want to use mobilize.js with page caching, integrate mobilize.js to your existing theme using instructions below.
Mobilize.js for Wordpress sets Vary: User-Agent header for public facing HTML pages. This should enforce caches to have separate pages for web and mobile browsers.
But the world is full of broken caches, proxies and operator services. Your might want to disable Apache HTML page caching by add the following directive:
ExpiresByType text/html A0
This should ensure that mobile optimized page is not served to a web browser and vice versa.
If you want to edit mobile theme for your site.
- Go to Wordpress dashboard -> Plug-ins -> Editor.
- Choose Mobilize.js for Wordpress
- Edit mobile-custom.js (functionality) and mobile-custom.css (style overrides)
for more information about customizing mobilize.js please see tutorial.
This chapter explains what kind of Wordpress web mark-up sematics (CSS class names). you need to have in order to make mobilize.js work with it out of the box.
This is the same as Wordpress 3.1 default theme (twentyten) class names.
- Follow Wordpress 3.1 class names with your theme
- Add <script> to your theme <body>
- Add page specific overrides if you want to play around with category or tag navigation
Roadmap exists for a Wordpress plug-in solution which is compatible with all web themes.
To enable mobilize.js, add following <script> tag to the page right after <body>.
<body> <script class="mobilize-js-source" src="http://cdn.mobilizejs.com/releases/trunk/js/mobilize.wordpress.min.js"></script>
If you further want to fine-tune mobilize.js settings, see tutorial for more advanced script including options.
To correctly convert the front page it must follow the default theme structure (Wordpress 3.1 twentyten theme).
<div class="posts"> <div class="post"> <div class="entry-title"><a src='url-to-post'>title</a></div> <div class="entry-content">...</div> <div class="entry-date">...</div> </div> </div>
You can load the Wordpress template used by plug-in without actually running through it jQuery for testing purposes. This allows you to see HTML/DOM elements before they are run through any kind transformations.
Use desktop browser
Use HTTP GET mobilize-test-wordpress query parameter to load mobile template base: