Life has been nothing but busy lately, but I thought of it as a better way to keep my mind away from things that keeps me stressed (ie. Negativity, Harsh Reality, and Idiots). Recently, I got into a side project wherein I have to design a website. This website is for E & E Professionals, a company that seems to be engaging in real estate business. I was told it should be easy… it’s just WordPress they say, you just have to install a theme and a plugin, it would be a cakewalk they say… Well, they sound simple indeed… just install and that’s it… it’s simple until you customize it! You see, our client here wants us to make his website look like Brookland Capital’s website, which uses a custom theme designed by The Lab Creative Studio. I’m not gonna kid here, The Lab is made up of professional web designers. The theme they created is something you can’t just download from somewhere and install. It’s custom made specifically for Brookland Capital. Designing something like this alone takes considerable amount of time, and I’m just one person. I’m multitasking here, pretty much under time pressure as well. Thankfully, I was given 2 weeks to complete the project. Still, this is not an easy feat.
So before I start the project, I made a plan. It has to be completed as soon as possible so in order to make it up on time, I had to find a way to speed things up.
Now, creating a WordPress Theme from scratch would take approximately 3 weeks of development. You need to create the structure, the javascripts, the PHP pages, the functions, and hook it into WordPress. And oh, you also need to delve into WordPress’ documentation to understand how WordPress works. This is obviously not the way to go if you are in a rush. So what I did is look for a theme that resembles Brookland Capital’s. I found a theme and this is shown to have a slider background just like Brookland’s, but alas! When I installed it, they required us to purchase the theme in order to make use of the slider. OK, so we are kinda cost cutting here, so I had no choice but to hack and modify the theme and install a slider. Also, the slider has to be easily manageable considering our client here doesn’t have much technical knowledge about websites. So, we have to make a user interface (UI) that’s easy to understand and easy to manage. This is where the slider plugin comes in. Unfortunately, the plugin doesn’t create slides that behave the same way as the other website’s. I want our slide image to resize with the page, but only until a certain minimum width. From thereon, it should begin hiding both sides of the image leaving only the center of the picture. However, our slider plugin generates slides that are in the form of listed image (img) tags. You could only float it either left or right, and while we can definitely create an overflow css rule that trims the picture once minimum width has been reached, this can only trim from right to left. In the end, only the left side of the image can be seen. The only way to make the image trim from the sides and leave the center of the image behind is to make the image a background image and set background position to center. Our plugin doesn’t do this, so I hacked the plugin and modify its code so that instead of generating slides that uses img, it would generate divs with background images of the slides. Being a background image, we can finally center the image and make it trim from the both sides instead of trimming from right to left when our window’s size has been reduce below minimum width.
After solving the slider issue, we ran into another issue. This time, the menu. We wanted to create a menu that transforms into a sliding side menu when opened in smartphones. The theme’s original menu is a dropdown menu, so I had to hack the theme again and make some changes to the page and the CSS. After installing the side menu, our next problem is that the menu doesn’t have a close button and when the side menu opens, it would cover the toggle button, making it impossible to close it. Also, the menu doesn’t slide when opened. This is due to a Javascript that switches the inline styles of the menu container whenever the toggle button is press or when a certain minimum window width is reached. To add the close button, WordPress menu template has to be modified and I don’t quite understand these things yet. Having no time to read the documentation and understand how their menus work, I just created a hack on the page instead. The hack I made was that I enclosed the wordpress menu in a custom div container. I added an image of the close button inside the div and anchored it to a javascript toggle action. Problem solved! Now, our menu has a close button. As for non-sliding menu when opened problem, I modified the Javascript responsible for the toggle effects and add some custom-made javascript actions that switches the css of one of the containers when the toggle button is clicked.
After solving all the issues, another issue came out. This is the funny thing about web development. After you fix one problem, another problem comes out. It’s like cancer. This problem may not be that bad though as this problem can rarely be spotted since it only happens when you are resizing a window. Supposedly, when the menu reaches a certain width, the menu was suppose to switch from a standard menu into a sliding side menu, which it does actually using some CSS and Javascript rules. However, there is a certain width where both styles appear. The toggle button, which is suppose to only appear once the standard menu disappears is appearing along with the standard menu at a certain width but then goes away when it goes below or above this width range. It’s as if there is a middle ground. This bug was so elusive that I failed to find what the problem is. I tried tweaking the javascript and changing the window width condition, but the problem won’t go away. I was only able to discover the cause when I seek the help of Vasilii Shpilchin. Man, I gotta say, this guy’s very good. He found out that the one causing the problem is the scroll bar of the browser. When the scrollbar appears, the window width seems to be affected and the window width condition in our javascript screws up. Vasilii modified the Javascript and changed the condition from relying on window width to using a css class property so that when this property changes, the menu switching action takes place.
The website is almost done. Perhaps, the only hurdle that’s left is to install the Google Map into the website. We are using a plugin for this, but the important features of the map the client wants is not available in the free version. He wants a tooltip to mark the different projects he has. We have a choice here, either just buy the plugin or spend more time on development because I’m going to hack the plugin again and add the missing components. Also, Google Maps now require users to use an API when using the map on the website. This also comes with billing. Without these two, development at this moment, is pretty much impossible so I have no choice but to suspend it until client comes to a decision as how we wanted the project to be pushed.
Follow me at:
