Week 23:

Nov 24^th 2014, I walked in through the front door of WCB and sat down for my first day of my internship. Back then I don’t know any HTML and CSS and they pretty much look like alien languages. But after six months of working on real customer projects they started to slowly soak into my brain and become less threatening. Six months might sound like a very long time but not when you are living it. It doesn’t seem that long ago that I walked in with my laptop and wrote my first test article. Next week will be the last week of my internship and I have mixed feelings about it. It felt a bit like having a nice cup of black coffee – smooth, satisfying, with a slightly bitter aftertaste at the tip of your tongue. It has been a crazy roller coaster ride full of ups and downs but I’m very glad that I have everyone in WCB to share those moments with me. On that note, let’s make this last week an epic ending.

Bluehost – hilarious customer service

This is the one thing that I have to share as it is just hilarious!  During the week I have to contact Bluehost for some technical support. One of our customers has multiple websites registered under the same hosting account and so I want to find out how I can have the files for each website organized in its own folder under public_html i.e. under public_html you should be able to find folder for website A/website B/ Website C, etc. I struggle to explain to him/her what I want to do and told him/her that English is not my first language. Here is the hilarious reply:

I’ll give the person a credit for getting the sticky rice correct, but I’m pretty sure that we don’t have a spicy pumpkin soup on our national cuisine list. But anyway, I thoroughly enjoy the conversation and he/she was very helpful. So good on you Bluehost for having an awesome live chat support and bon apatite!

Cut and Paste

The client wants to add a feature in which a “New” tab appears on a product that was newly added to the website. Thanks to this very simple plugin that makes it possible without having me cracking my head open. It is called “ Woocommerce Product Badge” by terrytsang.

Once downloaded and installed a new tab called “product badge” will be added to you woocommerce option and as you can see the setting window is very straightforward and easy to use.

You can set the duration that you want the product to be considered “New” that is if you set the display value to “10” the “New” badge will appears on the product after 10 days from the original day that it is posted. With a bit of styling using CSS, here is what our badge looks like from the front end:

 

Another feature that he wants on the website is a currency converter, which allows user to switch different currency and convert it into Thai baht. In this case, the client sends over a plugin that he wants to use. It is called “Currency Converter” by enclick:

At the beginning, I struggle to find the option where I can change the setting of the plugin because I don’t see any new item being added onto the option bar or see any changes on the front-end. However, after reading through the plugin installation session I realized that it is being hidden inside the widget area.

The installation is dead simple. Just simply click and drag the “currency converter” tabs into your desired widget area and you will see this beauty appears on the front end of your website

Week 22:

Another short week with three working days and ginormous amount of works that need to be done after the holidays. Most of my work this week involves fixing up websites and working on the responsive, which has been a pain in the butt. Working on a website that you did not built is not a fun thing to do as it require more time to figure out  how the website was built as well as getting use to the theme, so I really value the practice of commenting my code more now.

Iqbal Events

This is a website that allows people to purchase tickets for different events in Malaysia online. The responsive for this website pose to be a very difficult challenge especially the home page since the layout looks quite different from the original theme template. One of the best examples is the banner over navigation bar.

At default, Salient has a navigation bar at the top of the page and therefore it is not possible to insert the slider via the page builder and have it sits on top of the navigation. The solution was to create a new custom template and embedded the slider onto the page header. Even though this solution works, it makes the responsive becomes quite a nightmare because it completely ruined the default responsive grid of the theme.

As you can see from the picture above, without setting up the top margin the header will be hidden behind the slider.

Another tough thing to adjust on the home page is the buttons on the slider as it is not very responsive, especially on tablet and mobile view. Here is what it looks like without any styling

By using media query to target on a specific device, I was able to fix the messy layout on the tablet and mobile view. I’m also trying to put lots of comments in my code and keeping it organized so it is easier for other web developer who might be working on this website in the future. As a bonus here is a link to the device specific media query for iPhones and iPads

And here is the result

Woocommerce Order Barcode Plugin

This is a really handy plugin that generates a unique barcode for your product and have it send to your customer via email. I spent quite a number of times trying to set it up but still having difficulty getting the plugin to work properly, so we send some inquiry to the plugin developer and are now waiting for his/her reply.

 

During plugin testing, we managed to set it up so that we get an electronic receipt with a unique barcode send to the purchaser email. The problem that we are encountering right now is that the barcode does not actually do anything after we scan it using a mobile scanner application (for both Android and iOS), so we need to find a way that we can make the redirection happens.

Design Contest

Just a small update that we have to put the design contest on halt as we are now having something more exciting that needs doing. Taya has a few of her artist friends coming into the office on Friday and they are going to give us an awesome mural for our classroom wall! It’s very exciting to see what the final result will be like.

Week 21:

Holidays, holidays, and holidays, April and May has been filled with many of them. Don’t get me wrong, I do enjoy all the days off but have to admit that it really have a huge impact on my work schedule. After all, this may be why we have five working days and only two days off. This week I have been solely working on cut&paste and trying to get it live on Friday, which would never be possible without Singh help. I ran into a lot of problem this week, with multiple frustrating phone calls to hosting company and plugin developers; it wasn’t fun but it’s something that must be done.

Migrating Website Nightmare

One of the most valuable lessons that I’ve learnt is DO NOT EVER USE ONE CLICK WORDPRESS SITE MIGRATION TOOL!!!! I don’t know if other people have a different opinion on this but I didn’t have a good experience with it at all.  I’ve tried it with two of the websites that I want to put live and both have encountered some problem which took me more time to fix. With the one-click-migrate tool some of the core file of WordPress could get corrupted during the migration process and it’s very difficult to track down the file that caused the problem. So my solution was to go old-school and do the manual blank WordPress installation before uploading the “wp-content” folder to the hosting server, which works wonders. One-click-site migration…never again…

Cut & Paste Hover effect

Hover effect is not something too difficult to do, but to make it responsive is a completely different story. Although this might be an easy-breezy task for a professional web developer, it is quite a quest for an lvl.01 web developer like me. But with the limited time I’ve found a quick solution to fix this, which might not be the best solution but it does what’s it’s supposed to do.

In the text editor I first create a <div> (in this case I called it “home-masonry”), which contains a background image – this is the image that will be shown during hover. I then placed a linked image of the same size inside the <div> that I’ve just created.

Next is to use CSS to make the magic happens. The command is very simple. I first specify that I want the background-size to be set to “cover” so that the background size will be fitted to the container. Next is to specify that once a mouse is hover over the image, reduce its opacity to 0. This will reveals the background image underneath and thus completes the hover effect. I also use a transition command to give it a smoother hover transition. The picture above should help to make my explanation becomes clearer. Here is what the final result.

And with this little trick you have now got an easy hover effect that you can use on the website. With this method the hover effect is highly responsive as everything is completely contained inside a container. You would not run into the problem of font running outside of the image as you resize them. But the huge downside is that if you have too many of these it could slows down your website load time as it means that you’d need two image files for each of the image with hover effect.

I’ve still have a lot to learn but will keep sharing my experience once I found a more effective an efficient way to do the image hover effect.

Week 20:

April this year has been quite a weird month so I am glad that it’s going to be over by next week. Things have not been running as smoothly as I planned and this last week felt like a blur. It’s somehow felt short and long at the same time, which could be because of the many holidays that we have during this month. Hopefully things will resume to normal by next week.

Cut & Paste

I’ve spent most of my time this week working on cut&paste since the client will come in for a review session this coming Tuesday. I worked on this website before Glasford and boy was I suck! One of the biggest mistakes that I did was to use “id” instead of “class” for all of the elements on the page! (What was I thinking?!) , so I have to go back into the code and fixed all of that.

MailChimp for WP

Mailchimp is a very powerful email marketing service provider, which I personally think every small business owner should get. MailChimp will greatly improve your email marketing strategy as it allows you to categorize your subscribers into different category and you can send them an email which targets their choice of interest. But what’s more awesome about MailChimp is it also comes with a plugin called “MailChimp for WP” that allows you to connect it to your WordPress website. So here is how you can set it up.

In order to use the plugin you must first sign up for a Mail Chimp account. Once you have it go to the backend of your website and download the “MailChimp for WP” plugin

Once activated you will see the “MailChimp for WP” icon appears on your option panel. Click on it and you will be lead to a page that asked for your API key. Click on “Get you API key here” to continue with the set up

A new window will open up asking you to sign in to your Mail Chimp account (if you have not done so) otherwise you should be lead to an API keys page. On here, scroll down the page and click on “create a key”

After that you should see your API key show up. Keep your API key a secret since it will provide a full access to your MailChimp account. Copy the newly generated API key and go back to the backend of your website.

Paste the acquired API key into the box and click “save changes”. You should now see the plugin status changed to “Connected”

Now that we have the plugin correctly installed, we have to generate a subscriber list where all of your subscriber information will be stored.

On your Mail Chimp Account, click on “Lists” on the navigation bar. Once inside click on “create list”

Fill out the information required and make sure that you named your list with a logical name e.g. Mywebsite.com newsletter subscriber, etc. At the bottom you can also choose whether you would like a daily email update of the subscriber list or an individual email sent every time someone subscribe or unsubscribe to your newsletter.

Save your list and you should now be able to see it from the “list” page of your Mail Chimp

Go back to the back end of your website and inside “MailChimp for WP” you should now see your list (also note that it comes with a specific id, which we will need later)

 

Click on “Form” under the “MailChimp for WP” option and you will see an option page similar to the one shown below. Make sure that at least one of the list under “List this form subscribes to” is selected otherwise the plugin would not know where to store your subscriber information. You should also see a text editing area, which you can add in different field type to your newsletter subscription form. Once done click “save changes”.

To use your form, copy the shortcode underneath your form text editor and paste it inside a page or post that you want the form to appear. In my case, I want it to show up on the footer area, so I simply put the shortcode inside the first widget column of the footer. Note that I’ve also specify the form that I want to use by giving it an id number mentioned in step 10.

And after some styling with CSS, here is what the form looks like.

 

Week 19:

It’s a weird week after Songkran holiday as we only have two working days this week. During the holiday a few unfortunate events happened. One of my great aunt passed away after being hospitalized for two years, so I have to take a day off on Friday to attend her funeral. The second thing is we’ve now lost Kevin from our team as one of his relative has also passed away and he needs to fly back to the State to attend the ceremony. Not a fresh new start to my Thai New Year, but hopefully the series of unfortunate event will end here.

A trip back home:

On a positive note, I have the chance to fly back to the south during the Songkran. The plan to go to the beach was cancelled due to a massive thunderstorm that just happened to pass over Thailand during the five days holiday. But it was nice to go back home and catch up with friends and family.

So this year I get to do Songkran the traditional way. My family went over to my grandma’s, we wish her a good health and she blessed us with her blessings. It is quite sad to see that this family tradition is slowly disappearing and got replace by the wet-and-wild Songkran that we see on television today.

Personally, I love to celebrate Songkran in both versions and feel that one should not be neglected over the other.

Customizing check boxes in Contact Form 7

This is what I’ve been working on Thursday and thinks it is a pretty neat trick worth sharing. Contact Form 7 allows you to easily add check box and radio box to your contact form with ease, but styling it can be a little tricky. This is what the original tick box looks like:

However, this doesn’t match with the design that the client has requested so we need to change it using CSS.

First, the default box would need to be hidden so a new one with the right style can be shown. This can be easily done using the following command:

And here is what the form should look like:

After that, we need to put in the new box that has the right design. So here is the code that I use to style my box:

You should now have something like this:

However, you will notice that the tick mark no longer shows up when you click on the box. To fix this we also need to insert the code for the tick mark, which is where it becomes quite tricky.

I spent quite a bit of time searching for the solution and found this really simple fix. All you need to do is to add this line into your code:

You might be wondering how you can type the “✔” mark right? There are many methods that you can do it but I simply go to this amazing website for help! Check out Fsymbols.com

You will find bunches of other useful icons, which you can just copy and paste into your code editor.

Now you should have the tick mark showing up when you clicked on the box:

Once you have this, you can set its position using CSS, and viola! Your check boxes is now more stylish than ever!

Week 18:

It’s the last week of work before Songkran Holiday and you can feel the anticipation for the crazy water festival beginning to boil up. People started wearing the iconic bright floral shirt and you can hear the classic Songkran song playing on TV, radio and pretty much everywhere you go. Too bad I didn’t get to stay in Bangkok to enjoy all the madness on April 13th, but coming home and visiting friends and family is also not such a bad idea.

Agency Portfolio Update:

It’s been a few months since we get to update our agency portfolio. I think this is a common problem that many agencies have, which is spending too much time working for the customer and not enough time to work on their own website! One of the things that I’m very proud of is the fact that I can add the website that I’ve developed onto the agency’s list.

Placeit.net is a fantastic tool to create computer or mobile screen mockups, but only the smallest file size comes for free – you have to pay for higher resolution images. However, there are also many amazing mockups available online for free so here is a good list that I’ve found, make sure to check them out!

Tractus

I spent a lot of time this week checking out this website after it has gone live. The theme used for the website proves to be quite a challenge to work with as the page builder keeps messing around with the alignment every time you click update. Furthermore, the logo slider on the homepage also didn’t work properly on IE (surprise surprise…) as only half of the logo is being displayed.

The solution that I use for this problem is using media queries to target only IE, and wrote some CSS to style the dysfunctional area. Please note that this method will only works for IE 10+, you would need to use an alternative solution for an older version of IE.  Here is the magic code that fixes the problem:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

/* IE10+ CSS styles go here */

}

Please check out this article that provided me with this fantastic code.

And here is the final result:

 

Internal Training: PSD to html (session 02)

This is a follow up class from our first session back in week 13. In this lesson we learned how to use the images that we acquired from the slicing tool on our website. Additionally, Carl also show us how to keep our style sheet looking clean and organized by separate our code into sections and emphasized that we should always commented our code.

In this exercise we only focus on the html and do not yet concern about the CSS of the page. The goal is to add all the required elements onto the page in the most reasonable and organized way. One of the good practices is to wrap each section of your page with a separate container so that it is easier for you to style using CSS. Although the page doesn’t look very impressive, you can see that the overall structure of the code is very well organized.

Until next time, Happy Song Kran 2015

 

 

 

Week 17:

This week one of our fellow interns, Audrey, finished her internship I was very happy for her but also sad to see her leave. The office will definitely feel a little different next week, especially without her as an office DJ. This also makes me realized that the end of my internship is approaching very soon. I don’t know what will happen after the internship but my goal is to learn as much as I can from this experience in these last couple of weeks at the school.

Internal Training: PHP

This week Carl got some times to train us on PHP. Since I have the opportunity to work with PHP in the past I found this class to be very helpful as it makes the code makes more sense. One of a small but very useful thing that I’ve learnt today is the use of a concatenater

A concatenater is basically a “.” that you can place before/after/ the variable to link them together.

In the example below, you can see that my code is working quite well and it is showing what is expected

However, when I tried to add the space between the first and last name this seems to be more problematic.

The solution is to use a concatenater, and you can see now that there is a space between the first and last name

iFlyChat: Cool Chat plugin for WordPress and BuddyPress

I was asked by Mr. Singh to help him find a chat plugin which support both WordPress and BuddyPress. After several searches I found iFlyChat which works perfectly to what we are looking for. The plugin chat feature also has a very similar look to Facebook messenger, so it wasn’t hard to become familiar with it. So I’m going to share how to quickly set it up on your website

After installing the plugin, you need to sign up for an account on their website. Once registered, log in and click on “Dashboard” button locating around the top right corner of the screen

Once inside click on the “Generate a New API Key” button and you will be taken to a page where you are asked to put in your website domain name. You don’t need to put the “http://” or “www.” In front of your domain name, it won’t work if you do. Click on “Generate API Key” once done and you should be brought back to the dashboard and can now see the API key for your website.

Next, go to the back-end of your website and look for Settings >> iFlyChat Settings on your WP dashboard. On the setting page, you should see a box for “API key” and this is where you can put in the API key that you’ve acquired earlier. Now you can start setting up your chat feature and see it pops up on the bottom right corner of the page.

I also had quite an amazing service from their customer service team, who work fast like lighting and has been very helpful while I was trying to get the installation to work.

Audrey Farewell Party

After work on Thursday we went to a bar called Fatty’s on Rama 9 to give Audrey a farewell dinner party. It was a very nice experience since we haven’t gone on any company’s party for a while. Singh also invite one of the ex-WCB intern, Andrew, to come and join us, so it was almost like a mini school reunion.

The next day, Carl also threw Audrey a lunch pizza party (which I completely forgot to take picture). We finish off those good ol’ pizzas in matter of seconds and top it off with some ice-cream.

Week 16:

And that’s a wrap for my fourth month at WCB. It still felt like yesterday that I walked through the door with my computer and wrote my first article for the school.

One exciting thing happening this week is our Visa Course has finally got approved by Thailand ministry of education, which make us the first accredited web design school in Thailand! Very exciting time for us!

Photoshop Tutorial: How to Get Out of a Hairy Situation

It’s been quite a while since I wrote a new material for the school because I have been quite busy with agency projects, so this is a good break from working on a website. Tutorial is quite fun to do because I get to learn new things as well as sharing what’ve learn with other people. One challenging things about tutorial is that it is very easy to skip on some steps because you thought that it is a common knowledge e.g. the location of the tools in Photoshop. However, for some people who are new to the program it could take a few minutes with a bit of frustration to find that one particular tool, so I try to be as detailed and instructive as possible.

The tutorial is about how to extract a person’s hair from a background without making it look like a magazine cutout using “Mask Edge” tool. I’ve work very hard on it so please make sure to check it out!

Cut & Paste (Cont.)

The project has progress much slower than I’ve plan partly because I don’t have a full content for the website and two of the purchased woocommerce extensions didn’t seem to work correctly with my theme. So I have to do some more follow up with the plugin developer next week… very frustrating.

Apart from that the website has been going quite well, I’ve just recently completed the “About Us” page, which also has its own challenge. In my opinion, I found the visual composer that comes with “Salient” theme to be much easier to use than this one on “Mr.Tailor”, but it could be that I’m familiar with the Salient visual composer.

I first tried to add a full-width page divider but faced a bit of difficulty. With the “full-page template” selected and content set to “full-width” I was not able to get the divider to be actual full width because the theme default automatically adds a small left-right padding to the container.

My solution was to write a new CSS to override the default padding, but only specify it to affect the “About Us” page so it doesn’t affect the rest of the website.

Design Contest

This has been dragged on for so long and I’ve really want to get it up and running very soon. Now that I’ve got Heba to help me we should be able to get this up and running by next week. I got some time to finish off the variations for the poster, which will be used on our Facebook fan page and school website, so here is what it will look like.

Keep in mind that the info on the poster needs to be update; obviously the date of the competition needs to be change, so please keep an eye out for it!

Also a quick reminder that I’ve been putting a lot of new content on our agency fan page every day, so please don’t forget to check them out for some daily quick tips on web design & development.

Until next time.

Week 15:

With Glasford out of the way I am now moving onto my second project, Cut&Paste. The more I get to work with web development, the more I realized how similar it is to creating an artwork. No matter how well you can use the paint brush, the next painting will pose you with a new challenge. Very much like web development, every time you start on a new project, you will always run into problems with the themes, plugins, or even WordPress itself. Therefore, it is not enough for a web developer to just know about the code, but one should also have a good set of problem solving skills, endurance, and a LOT of patience (otherwise you will ended up with many broken computer screens.)

Cut & Paste

I actually started on this project before Glasford, but only have the chance to work on its home page. At the moment, my main goal for the website is to set up the online shop functionality, which is something completely new to me. I spent a lot of time learning how to set up Woocommerce and was having quite a bit of difficulties at the beginning. However, just like anything in life, the more I familiarize myself with the plugin the easier it becomes.

One of the biggest challenges when working on this website is the content. With an incomplete list of product it is quite difficult to set up the purchase functionality.

I also run into another problem with the plugin that is the key functionality of the website. According to the plan, each product was to have multiple variations. However, Woocommerce only allows you to upload one picture for each variations and that is why it is important for me to use the “Multiple Upload” plugin. But lady luck wasn’t on my side, after the purchase of a plugin it crashed with my theme and caused all the product pictures to disappear when activate. I have sent multiple emails to the plugin developer and still have not get any reply from them. So it is also something that I need to follow up on Monday.

First line of PHP and working with Advanced Custom Field!

Another major thing that I’ve learnt from working with Cut & Paste is the use of “custom field”. It was really exciting when I first get it to work because it involves writing some PHP. I was fully satisfied to see my first line of PHP in the code and it does not cause the page to crash. For this week I’m going to share how I added the sub-heading menu on the product page, so here is how I did it.

At default, Woocommerce does not have a field that let you put sub-heading under your product title. Using a custom field I was able to add such item onto the product page.

First download a plugin called “Advanced Custom Fields” by Elliot Condon.

A “Custom Fields” icon should be added onto your dashboard option once the plugin is activated. Click on it to enter the custom field setup page.

Click on “Add New” and you should be on a page similar to the one shown above. Enter the name of your custom field; in my case I called it “Product Sub Heading”.  You will notice that the “Field Name” get automatically changed to matched with your “Field Label”. The Field name is very important as you will need this later when writing your PHP. Next, select your field type and don’t forget to choose whether or not it is a required field.

Scroll down the page and you should see “Location” and “Options” panels. In location you can choose what type of page you want your custom field to appear e.g. I set my custom field to only appear on all of the product page. On the “Option” Panel you can choose where and how you want the field to appear on your back end. In this case, I set my field to be right after the title and choose a “Seamless” style. After the setup, scroll up and “Save” your new custom field.

Go to the edit page of any of your product and you should see your new custom field! Pretty cool right? but there are still some more works to do.

In order for your form to work you need to tell WordPress where you want it to appear on the page. For this example, we need to look for a file named “content-single-product.php” because it is a file that’s responsible for the content and functionality of the product page.

Open up the file in your text editor program and find the portion of the page that you want the content of your field to show up. Since I want it to appear under the product title I need to place it somewhere under the “product_summary_top” area.

Now it is time for some PHP! First I need to set up a variable and this is where the “Field Name” that you setup earlier comes into play.

$productsub = get_field( “product_sub_heading” );

This tells WordPress where to get content for your custom field.

Next you need to tell it to display on the page, therefore a simple “echo” command is all you need:

echo $productsub;

Don’t forget that those two commands must be under a PHP tag in order for it to work. Save your file and see your first custom field showing up on your website!

 

Week 14:

I spent a lot of time this week working on Glasford and finishing off some school projects that I’ve been setting aside. I’ve also got help from Heba, our new team member, to work on the design contest because I simply don’t have enough time to do it. She is now currently styling the competition rules and regulation so we will have the contest open up really soon. I am also now responsible for our agency Facebook fan-page, which recently has not been very active. I will be posting up some updates on our new projects and activities as well as some useful articles and resources on a regular basis, so please don’t forget to make a frequent visit to our agency Facebook fan-page starting next week. Glasford!!!!! It’s a wrap!!! Like seriously this time!!! As much as I enjoy building up the website, I must say that working out the responsiveness is really not my cup of tea. The process is just hours and hours of fine-tuning the code, resizing the screen, and viewing the website on different devices (Mobile, tablet, Mac, and PC.) But with all that said, I also felt that I have learnt so much from it. It’s really exciting to now be able to see some of the mistakes that I did with Glasford and learn not to do it again for the new website. Apart from the responsive issue, I have also figure out a way to style the infamous “choose file” button that initially seems impossible to do. The beast has now been tamed and is ready for my command. I found out this amazing method from this article by geniuscarrier and have great success with it. So please check the original article for a more detailed explanation of how this method works. The first step is to copy this line of JavaScript and placed it under your footer.php file Note that the code needs to be inside JQuries script Next is to add the button onto your html, or in my case a contact form. After that it is easy CSS work. The code essentially create a new text area that will echo whatever shows up on the original “choose file” text area. This means that you can now use the original “choose file” button as the upload button and the new text area to show the name of the file that you just uploaded. Here is the pic of the final product Happy Restaurant This is one of the projects that I have to put on halt while working on Glasford, but now that that’s out of the way I manage to finish it off and got Carl’s approval on it. The most difficult part is the page layout as the content on each page comes in different length. One section could be four lines of text and the next one is over twenties! Additionally, I have to put an appropriate picture into the document so I was quite a tough assignment to do, but I am regardlessly happy with the final result.