How to register Custom Post Type and Custom Taxonomy on WordPress

By + in Coding, PHP, WordPress No Comments Tags: , , , , ,

I’ve been utilizing WordPress Custom Post Type and Custom Taxonomy lately in order to fully control specialized post items such as case studies, team biography, and portfolio items. Managing them with regular post or page does not suffice the need to display them in unique way from the rest, and it brings more confusion to a person who manage the content.

It took me a little search around to patch together how to register both Custom Post Type and Custom Taxonomy associated to it. So here is the code snippet with Case Study as an example for you to get started.

I highly recommend that you customize the UI of custom post type with unique input fields so that user has easier time editing the specialized content. My favorite plugin to make custom UI is Advanced Custom Fields that you can use it for free. It has a nice extra module such as Repeater field which allows user to keep adding the repeated format without constraining them to only add content up to certain number.

Realtime Facebook Likes Count Updater with JQuery

By + in jQuery No Comments

Realtime Facebook Likes Count Updater with JQuery

Just yesterday, I wrote a jQuery script that request for Facebook Like counts from the Facebook OpenGraph data. The script is written so that you can either have it continuously fetch the new count every specified seconds or only fetch the count once to show static number.

The most important part to change in the script is your ID for the Profile or Page. Alternatively, you can pass on full URL to request counts for external website if you already have Facebook Like button installed on your website.

Getting Started with Raspberry Pi – Part. 1

By + in Gadgets No Comments

Getting Started with Raspberry Pi – Part. 1

You may have heard about Raspberry Pi already. Raspberry Pi is essentially a micro computer you can purchase for as little as $25. In this article, you will find out why this is the ‘hot’ gadget in the market right now and how to get one of them in your hands.

Why Raspberry Pi?

Recently, I had a need for getting notified when certain websites are updated. For example, I desperately wanted to know when the Nexus 4 become available to order since they’ve been long sold out and nobody knew when it’ll be back. To achieve the goal, I wrote a simple Python program WebMo to monitor website content for any changes and have it notify me via SMS.

The program ran as I wanted except it needs to run 24/7 to fulfill its purpose, and I didn’t want to keep my 15-inch MacBook Pro turned on which consumes 85w. I told this story to my coworker and he suggested me to look into the Raspberry Pi. It’s essentially a micro computer that only consumes 3.5w with bare minimum hardware. What attracts many is that you can get it for as low as $25. It’s so cheap because the device is stripped down to the point that you need to supply peripherals on your own including power cable, keyboard/mouse, and a SD card with an OS of your choice. That might scare some of you away but it’s originally designed to teach kids the basics of Computer Science. Google even bought 15,00 units of Raspberry Pi for UK school kids. So you shouldn’t be afraid to get your hands on the Raspberry Pi.

You can be creative with Raspberry Pi

The community has been actively exploring creative uses for Raspberry Pi and you can get some inspirations from articles below:

Getting the Raspberry Pi and Accessories

So I was convinced this is the gadget I want and ordered Raspberry Pi (Rev. B) from Newalk which is an official reseller in U.S. They were back-ordered for more than a month but they shipped the product within a week and it was delivered after just 2 weeks. I paid $35.00 on Raspberry Pi, $3.90 on tax, and $5.95 on USPS priority mail shipping, which sums up to the total cost of $44.85.

I also bought accessories for Raspberry Pi and you can see my recommendations below that are cost-effective. You can save some cost if you already own any of these components.

Please be aware that you cannot use your computer’s USB port to use as power source for the Raspberry Pi as it doesn’t send enough power. I originally tried the power plug that has USB jack to charge cellphone but that also didn’t supplying enough power either to boot. So I’d get more powerful power plug with USB charger port like the Belkin Dual USB Charger.

I was able to re-use my mouse, keyboard, and ethernet cable so I paid nearly $80 total price for Raspberry Pi and accessories.

You got many choices for the case

I boughtt a simple clear case from Etsy but that’s not the only choice you have. You can buy other cool looking cases online or even make your own. Here is a list of some inspirations for your Raspberry case:

Putting it all together

Once you get all the hardware components together, you will be able to run your first Raspberry Pi. Stay tuned for the next article on how to install the OS, boot it up, and configure basic setup.

Sublime Text 2 Editor and Useful Packages for Web Designers

By + in Coding, CSS, Python, WordPress No Comments Tags: , , , , , , , ,

Sublime Text 2 Editor and Useful Packages for Web Designers

I’ve been using Coda and Espresso as my editor of choice for programming. They work pretty well for the most part and are especially welcoming for beginners to use.

My co-worker has been testing out Sublime Text 2 recently that I didn’t care initially. Then my CTO who only uses vi[m] on terminal started to use Sublime and had positive comment about it. That’s two out of three programmars in my office using Sublime and I thought I should at least give it a try. In a nutshell, it helped me program more productively and reduced errors in my code.

Free to Evaluate

To make it easy for me to jump on, the Sublime Text 2 is free for evaluation without any limitation on its functionality or duration to test out. So decided to give it a try knowing that I can always go back to my editors if I didn’t like it. After installing the Sublime Text 2, the next step was to install Sublime Package Control so that you can install add-ons instantly within the editor (just like your browser add-ons). Now it looks like a geeky process to run the Python code in the editor to get this installed but don’t be scared by that. It’s only a one time process and helps you add extra add-ons faster than any other editors. I would have not execute this step if not recommended by co-worker because I tend to shy away from geeky editor which doesn’t look very friendly to web designer / light developer like me.

Free Packages to Sublime Extend Functionality

After initial setup is done, I searched around for packages developed by the community to install. There are many packages out there but I found following extremely useful for web design / WordPress projects. Because of these packages, I decided to use Sublime Text 2 as my primary editor over others.

Sublime Linter

Sublime Linter checks your code of syntax and gives you feedback (error, suggestion, etc) within the editor. For example, it will highlight the line on my Python script where syntax is not ‘ideal’ and tells me how to fix the issue at the bottom of editor. This has changed my coding workflow from saving a file and running the check program to looking at my editor for nearly instant feedback. Of course the program covers all popular web coding syntax such as HTML, CSS, PHP, JavaScript, etc.

Emmet for Sublime Text 2

Emmet is an evolution of ZenCoding package which aids user to complete the code with minimal typing. For example, I use Emmet to automatically add vendor prefixes to any CSS rules by typing CSS rule and hitting a tab.

For example, type border-radius in the CSS syntax mode and hit tab key. The CSS will expand into the following automatically.

With Emmet I no longer need to lookup CSS vendor prefix rules or forget about adding them.

Sublime Text 2 WordPress

Because WordPress functions are not programming language itself, there aren’t many editors that helps you write them faster. With Sublime Text 2 WordPress, you will save a lot of time adding new WordPress function with auto-complete.

Search WordPress Codex

Search WordPress Codex is a simple package that adds right-click menu on WordPress function to quickly open the WordPress Codex documentation for the function. This saves time to copy & paste into search engine to look up the function.

Conclusion

I found myself finding useful tools that help me save a lot of time working with code. With Sublime Text 2 I’m more productive with my time and have less chance of typo or forgetting. There are other common features such as Projects, Git integration, Cross Platform, etc that are becoming the standard in other editors. But ultimately, the biggest differentiator for me was the wealth of packages developed by the community available to use.

How to register custom widget section on WordPress

By + in Coding, PHP, WordPress No Comments Tags: , , , , ,

How to register custom widget section on WordPress

This is the template snippet of code I use to create custom widget section on WordPress. Notice that you do need to call the custom widget in your theme to display. Many themes comes with an option to set groups of widgets to load on templates but if that’s not the case, head over to the_widget on the Codex.

In this example, I am registering the custom widget intended to hold related widgets for Services and its child pages.

Customization

1. Name

This part defining the name of widget section to appear as Services.

2. ID

This part is defining the unique ID for widget so you can display it somewhere in your template.

3. HTML wrappers (optional)

The rest of HTML wrappers such as DIV and H2 are optional to better match your theme’s custom settings. Simply use FireBug or other tools to inspect the default widget titles and its wrapper to match class or style. Most of the time, this is defined in theme’s CSS and you don’t need to do anything.

Likewise, you can repeat the register_sidebar function within the same parent function to register multiple widgets at the same time. The code is hosted on GitHub Gist so you can add it as your favorite to refer back in future or fork it so you get a copy on your account.

How to hide list elements beyond specified number

By + in Coding, jQuery No Comments

I recently created a widget that display “case studies” from the custom posts in the widget. The widget by default will query for all the posts that exist and display them all. To avoid the clutter from all the list items shown in the widget, I wrote a jQuery code to only show 10 items. If a reader wants to see more, they can click the “See More” link underneath to expand the list without having to visit another page. If there are less than 10 case studies, the link would not show up.

I thought this was a handy jQuery code that I’d use again in the future and here you can try one for your project.

How to redirect everyone except you via IP address

By + in Coding No Comments Tags: , ,

When you are developing a website on live domain or troubleshooting the live website, it often helps to hide the site from other visitors. One effective way to achieve this is to redirect all visitors somewhere else except yourself (or people in the same office) via IP address.

In Linux based servers, you can add the following script in your .htaccess to redirect visitors based on IP address:

First, change the numbers inside the line 5 !^50\.135\.111\.224$ to match your IP address. You can obtain your IP address by either asking google “What is my IP address” or visiting IP Chicken to get your IP address.

Second, change the domain name http://elishaterada.com/ in line 6 to the appropriate destination URL starting with http://. If you are redirecting to the naked domain (nothing after http://domain.com/), I highly recommend you add the trailing slash to reduce the accesses time.

WordPress website launch checklist

By + in WordPress No Comments

Have you ever forgotten make critical changes to the development website on the day of launch? List can include enabling search engine visibility, installing Google Analytics, adjusting file permission, etc. I’ve been guilty of this and decided to create launch check list items to check before I call the deployment ‘done’.

  • Update Salt Key
  • Update Copyright
  • Add favicon
  • Turn on Google Analytics
  • Enable search engine visibility
  • Setup automatic backup
  • Setup website cache
  • Setup any necessary redirect
  • Adjust folder and file permission
  • Set client email address on notifications (General setting, Gravity Forms, etc)
  • Verify the site with Web Master tools

There are many different ways to track these items for each client site. You can use Evernote, use online apps, write them down in documents, etc. I developed a simple plugin using on Settings API that keep warning the site owner until you check all the items.

Responsive CSS Standard Template

By + in CSS No Comments Tags: ,

I’ve been designing client websites with responsive CSS lately. Although it adds extra time to make it work smoothly, I find it rewarding when it works out nicely.

I usually follow the media query pixels set by the theme but I needed a media query template while creating a WordPress plugin. I could not find any ‘standard’ CSS media query in my search so I decided to make my own template based on what Web Developer extension (Chrome / Firefox) uses to test responsive layout.

 

CSS Coding Standards from WordPress

By + in Coding, CSS, WordPress No Comments

I always had this question as I develop websites, “am I writing CSS the right way?” For long time, I’ve been coding CSS inconsistently as I ‘guess’ what would be the best coding standard. I just found the CSS Coding Standards put together by WordPress and wanted to introduce it on my blog.

Read CSS Coding Standards
1 2 3 4