G$earch

Freebie Release: “Bare Responsive” – A blank and responsive WordPress Theme

Posted by Harshad

Freebie Release: “Bare Responsive” – A blank and responsive WordPress Theme


Freebie Release: “Bare Responsive” – A blank and responsive WordPress Theme

Posted: 04 Feb 2013 01:46 AM PST

Creating WordPress themes from scratch is a difficult task. After you have done this work numerous times you begin looking for any easier route to take. I’ve found that building on a simple template model can really expedite the project timeline – the work is also far less stressful.

Wordpress Bare Responsive theme from Hongkiat

So I’ve created this unique WordPress template named "Bare Responsive" which you can download below. The design is mobile-friendly and responsive for differing screen widths. All the typical WordPress template files are included and you are free to edit this to any degree.

Ultimately I hope this template can provide a starting point for WordPress development, better than a blank canvas.

Along with the template files, I’ve also included some dummy data (which you can also download below) to import and test out with the design.

Hongkiat Bare Responsive theme - mobile responsive navigation screenshot

In the brief article below, I’ll explain a few of the WordPress features and how you can utilize them within your own themes.

Inside the Header

Looking into the header.php file, I’ve included a lot of extra metadata and 3rd party scripts. You should try to change the author meta tag to match your own name, or the name of your new website.

Also I’ve included an external stylesheet link to a Google web font Quando which I’m using in the header text.

Wordpress Bare Responsive theme from Hongkiat

Now you may also notice that I’m using a custom navigation setup inside the WordPress theme. You don’t technically need to make any edits to the PHP code. But you should look over the parameters for wp_nav_menu() just to figure out any changes you may want.

What you should do is create a new menu inside the WP Admin Appearance > Menus. Then you should be able to connect that new menu into the “header-menu” found in the template file.

Wordpress Bare Responsive theme from Hongkiat

In this way you can add custom links & pages, even sub-pages, to the top navigation without any programming required.

Custom Theme Functions

Possibly the most interesting chunk of code you should customize would be inside functions.php. This holds all the default theme properties, which include navigation menus and widgetized sidebars.

I’ve setup two distinct sidebars which are both widgetized. By default you don’t need to add anything into them since the template will display data non-widgetized. But it’s also very easy to find these sidebars inside Appearance > Widgets.

Wordpress Bare Responsive theme from Hongkiat

The main sidebar is floating off to the right side for all default layout styles. As the screen width becomes smaller eventually this sidebar is hidden and replaced with a responsive sidebar. This new mobile-friendly sidebar only contains 2 elements and will display underneath the page content.

It’s nice to have this option because you may choose to match the sidebars with identical content. But alternatively you can setup totally different context between the two sidebars which may be more reliable.

There are a couple more functions which I’ve defined inside the theme file.

First I’m removing the #more hash from the end of blog post links. I very much dislike this typical WordPress setting and it feels a bit forced.

Also in the archive pages we don’t have a “read more” link by default. So I’ve added that into the HTML using a custom WordPress filter.

Possible User Edits

The bare-responsive theme is simple enough that you can upload the template and start editing files right inside the WordPress admin panel. Although you do have the ability to work with the files individually – this is difficult if you don’t have a WordPress blog for testing the changes.

In the spirit of keeping things simple I’ve limited the theme files to only our bare essentials. Also all the responsive mobile CSS codes are located in the same style.css stylesheet.

Wordpress Bare Responsive theme from Hongkiat

You’ll be able to edit the template styles at any time to suit your needs better.

The custom script.js is used for the mobile responsive dropdown navigation panel. I feel this is one of the best solutions for the header navigation, and it looks really smooth.

If you feel the need to customize CSS styles on the mobile menu just be sure to keep the IDs and classes relatable to the jQuery script.

Hongkiat Bare Responsive theme - mobile responsive navigation screenshot

Final Thoughts

Again I do hope this bare-responsive template can provide a source of inspiration to young developers. It’s not easy working with WordPress and having a bit of code to start with can make all the difference.

I’ll be happy to answer questions and hear out suggestions, because obviously this isn’t a perfect template.

Working together with other developers is the best way to improve your own skills and pick up on common mistakes. So get out there and start coding!

Downloads

Download wptestdata.xml
Download and import this XML file into your WordPress to give it some dummy content.

Download Bare-responsive WordPress Theme
This whole project is purposefully released as open source under the MIT license which means you can edit and distribute unlimited copies for any project as long as you do not claim it your own, or re-sell it.

10 WhatsApp Alternatives For Your Smartphone

Posted: 04 Feb 2013 01:44 AM PST

Are you a user of the messaging app WhatsApp? For iOS users, using WhatsApp required a one-time $0.99 fee while Android users get to use it for free, but only for a year. After the first trial year, Android users need to pay an annual fee of $0.99 for the service.

If you are part of the crowd who don’t like paying for messaging apps, we’ve got 10 awesome alternative free messaging apps you can try.


(Image Source: Toolfools)

Not only are the following messaging apps the perfect alternatives for iOS and Android users, we also looked into getting alternatives for other mobile operating systems like Blackberry and Windows Phone. This way, you can contact more of your friends regardless of the mobile OS they are on. What was that beep? Did you just get another WhatsApp reminder to upgrade? Time to make the switch.

1. Viber

Viber is very similar to WhatsApp as it uses mobile contact numbers to identify users. You get an access code sent to your mobile number via text message. It’ll then access your address book to see if any of your contacts are connected to Viber; you can then instantly connect with them. Unlike WhatsApp, Viber allows you to call users, provided your smartphone is connected to the Internet.

Platforms: iOS | Android | Windows Phone | BlackBerry | Nokia | Bada

Viber

2. LINE

LINE registers your phone number into its database where you can then connect with your phone contacts who are LINE users. An advantage of LINE is that it allows you to reply to messages by installing a PC or MacOS program, provided you register your number with an email account. Besides text messaging, you can call other LINE contacts through the app with an Internet connection.

Platforms: iOS | Android | Windows Phone | BlackBerry

LINE

3. KakaoTalk Messenger

KakaoTalk Messenger also uses your mobile phone number to send you a 4-digit verification code when you register for an account. It then goes through your contacts to find for other KakaoTalk users, similar to how WhatsApp does it. There is also the ability to start group chats, send pictures or audio notes, and share calendar and contact information. Oh, and it does calls too, to other Kakaotalk users over an Internet connection.

Platforms: iOS | Android | Windows Phone | BlackBerry

KakaoTalk

4. Facebook Messenger

The Facebook Messenger app for both iOS and Android has been around for some time now and since you’re connected to most of the friends you want to communicate with, Facebook Messenger can be a great WhatsApp replacement. Only drawback is that you can’t use it to communicate with friends who are not on Facebook.

Platforms: iOS | Android | BlackBerry

Facebook Messenger

5. Skype

Skype recently merged its contacts with old MSN or Hotmail accounts and its contacts, connecting you to some pretty longtime friends. Nostalgia aside, Skype is not only a great way to call for free, it also allows for text messaging with your contacts. Unlike WhatsApp, you’ll have to approve contacts before you can start sending messages but its reliability and stability makes it a suitable replacement.

Platforms: iOS | Android | Windows Phone | BlackBerry

Skype

6. LiveProfile

LiveProfile starts off by asking you to register with an email account. After that, you have the ability to add your phone number where other users can find and contact you. Each account will also be given a LiveProfile PIN, this lets you share that PIN to others without giving them your phone number. It has no calling features but it does have standard messaging features with the abilty to start a group chat and send pictures or videos.

Platforms: iOS | Android | BlackBerry

LiveProfile

7. Groupme

Groupme caters to people who want to chat in a group. You log in with your email and then verify your phone number by sending an SMS with a code to the provided number. What’s unique about this app is that it supports group messaging over SMS. So in the event where someone in the group doesn’t have a 3G connection, the person can still receive group messages for a small fee. Each message sent or received will be charged as an SMS sent to the United States.

Platforms: iOS | Android | Windows Phone | BlackBerry

Groupme

8. Kik Messenger

You register on Kik with your email address, then choose a unique username to allow other users to find you. The app is very simple and does a good job in sending messages to individuals or group. There are no calling capabilities but you have the overall basic messaging functionality supported on a wide variety of mobile systems, for free.

Platforms: iOS | Android | Windows Phone | BlackBerry | Nokia

Kik Messenger

9. ChatON

ChatON is an app created by Samsung and is a basic messaging app with no calling features. However the app has found its way to many other markets or platforms. You can choose to sign in with your Samsung account or skip the process and just enter your name. Verify your phone number and the app will start checking all your onboard contacts to see if any of them are on ChatON. The chat is on when you find fellow ChatON users.

Platforms: iOS | Android | Windows Phone | BlackBerry

ChatON

10. WeChat

WeChat is one of the most popular messaging apps in China. Similar to how you register with WhatsApp, you start by entering your phone number. An SMS will follow, giving you the verification code. You can then connect your Facebook and email account to let people find you more easily. Other functionalities include sharing pictures, WeChat contacts, your current location, and the ability to video chat through the app.

Platforms: iOS | Android | Windows Phone | BlackBerry | Nokia

WeChat

How to Rename Google Maps Bookmarks on iOS & Android

Posted: 04 Feb 2013 01:40 AM PST

Google Maps app made a return to iOS last Christmas, and hit the top of the chart giving cause to close to 30% of iOS users to upgrade to iOS 6. The ability to save locations on the app by logging in with a Google account was a great bonus. However there isn’t a feature for you to rename these addresses, for that personal touch.

Edited Bookmarks

Android users are not spared this as well. Bookmarking or saving locations to the app is handy but who searches for their friends’ place by address? Without the ability to rename the address to something more recognizable, you’d likely forget which address is where.

We’re going to show you how to rename saved locations for the Google Maps app for both iOS and Android users.

Saving A Location On Google Maps

Saving a landmark through the Google Maps app is great as you’ll be able to see the store name, together with the address at the bottom like what you see below.

Saved Landmark

However, when you search for an address or locate current location and save it to the list, you won’t be able to rename the address through the app into something more recognizable. Let’s try to fix that.

Saved Address

Renaming Addresses Of Saved Locations

To rename an address, navigate on your browser to www.google.com/bookmarks. Once you’ve logged in, you’ll be able to see all the locations you’ve saved through the Google Maps app.

Maps Bookmarks

Click on Edit to change the name of the address and click on Save when you’re done.

Edit Bookmarks

Now when you go back to the app on your smartphone, you’ll see the updated address name e.g. ‘Andy’s House’. Tapping on the edited name will show you the location on the map.

Edited Bookmarks

Hope you enjoyed our quick-tip of renaming bookmarked or saved locations on the Google Maps app which works for both iOS and Android users.

0 comments:

Post a Comment