Create a Mobile Application Using WordPress, Ionic, and AngularJS

Introduction

This tutorial is a post that I did for tutsplus.com. It will explain you step by step how to create a modern, hybrid, mobile application (iOS and Android) of your WordPress website using the latest technologies. We’ll be using Ionic Framework, ECMAScript 6, npm, webpack, and Apache Cordova.

http://code.tutsplus.com/tutorials/create-a-mobile-application-using-wordpress-ionic-and-angularjs–cms-24170

ShprinkOne WordPress theme released

I am pleased to announce the release of my first WordPress Theme: ShprinkOne is a Customizable and Responsive (mobile friendly) theme that can fit any screen (Mobile phone, tablet, laptop, desktop).

Nowadays every Internet company is focusing on mobile, it has been a trend for a long time (“mobile first” was something I heard a lot at eBay) and might continue for a little while. Releasing a theme that would not be mobile friendly was then out of the question.

As an early adopter and big fan of the front-end framework Bootstrap I decided to use its ability to create Responsive markup structure and to provide a set of great UI (Navbar, Buttons etc.), tools (Slideshow, Affix, TypeHead etc.) for this project.

Besides the obvious technical advantages that Bootstrap provides, another aspect made the choice even easier: the Community! You would be amazed by the number of start ups that based their product on Bootstrap! For example some of the ShprinkOne pages were created using jetstrap.com (great mockup tool for Bootstrap) and if you like to often change your theme ShprinkOne allows you to select some of the best Bootstrap themes (from bootswatch.com, divshot.com) that exist directly from the admin page.

For this theme I also wanted to try out Masonry and the Infinite Scroll plugins for jQuery that appeared to be really easy to use. Masonry helps to re-organize the page content and creates a Pinterest like dashboard while Infinite Scroll plugin loads more blog post when you scroll down the page. The WordPress loop page (that is shared by most of the pages: Home, Category, Tag, Author and more..) uses both of them to create a great user experience(No need to switch from page to page, everything is displayed in a single page).

ShprinkOne is Open Source and needs your help to make it even better. If you are interest to help you can fork the project on GitHub.


Screenshots


Features

  • Home page Slideshow
  • Theme customization (Select your style among 10+ free themes)
  • Layout customization (Sidebar-Content, Content-Sidebar or Content)
  • Posts as pins using Masonry
  • Language ready: So far English and French

Get the full list

WordPress add_image_size cropping problem: How to enable GD library

While trying to enable the image resizing option in WordPress I figured that the cropping feature of the function below (located in /wp-includes/media.php) did not work on my localhost.

function add_image_size( $name, $width = 0, $height = 0, $crop = false )

Using the code below in functions.php I was able to resize images (really badly though) but unable to crop them.

//This feature enables post-thumbnail support for a Theme
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image',  708, 400, true );
add_image_size( 'post-image-large',  708, 200, true );
add_image_size( 'post-image-small',  330, 150, true );

After some research I found a solution. In order to solve the cropping problem you will need to install the GD Library. GD is an open source code library for the dynamic creation of images. It supports JPG, PNG and XPM formats. Here is how to install it:

For Windows

All you need to do is to uncomment (remove the semi-colon at the beginning of the line) the line below on your php.ini

;extension=php_gd2.dll

Once it is done save it and do not forget to restart your Apache server.

For Linux

At first I tried to follow the Windows step but I got this error message:

Warning: PHP Startup: Unable to load dynamic library
'/opt/lampp/lib/php/extensions/no-debug-non-zts-20090626/php_gd2.dll'
 - /opt/lampp/lib/php/extensions/no-debug-non-zts-20090626/php_gd2.dll:
 cannot open shared object file: No such file or directory in Unknown on line 0

For Linux it is a little bit more complicated than only uncomment a line. To get it work you will have to install the library with the line below.

apt-get install php5-gd

Then restart Apache and it should work fine.

/etc/init.d/apache2 restart

or if you are using LAMPP/XAMPP

/opt/lampp/lampp restart

Once you have done all of this cropping should work for newly uploaded images. Unfortunetly you will need to re-process old pictures. To do so a great solution is to use the Regenerate Thumbnails plugins for WordPress.

Sources: