PC Tutorials Online

Setting up a staging environment is fairly straight forward with Wordpress. Copy the files contents to the new site/directory. Duplicate the database and update the wp-config.php file to point to the new db. And the final, critical step is to update the site URL. WordPress presents 4 different ways to do this.

The first option is what I tried. The site loaded, but there were issues with the layout. The site is using the Divi editor for front-end editing. I thought perhaps there is a rouge absolute URL somewhere, so I tried a find/replace search to point to the new staging URL. No luck.

The solution was to use the second option found on Change The Site URL page. This updates the database to point to the new URL. After that, all the layout issues disappeared with Divi! Just remember to remove the code from functions file when you’re done!

If you enjoyed this post, make sure you subscribe to my RSS feed!

The JetPack plugin has a nifty featured called “related posts”. Using 3rd party servers, JetPack will analyse your posts and produce 3 related posts that appear at the bottom of your post. When hovering over the related posts, a tooltip is shown that takes a excerpt from the related post. I had a client who wanted this removed. There isn’t a setting to remove this, so I used some jQuery code to remove the tooltip text. You can place the below code in a JS file or if you’re using Divi, this can be entered under Theme Options > Integration > Add code to the top of your posts.


(function($) {
$(window).on('load',function(){
//Remove related posts excerpt tooltip text
$('#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a').removeAttr("title");
$('#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post a').removeAttr("title");
});
})(jQuery);

The $(window).on(’load’) function is used as we need to wait for JetPack to load the content, since it is generated dynamically. And if you don’t want the hover effect on the related post thumbnails, you can add the following CCS to see the opacity to 1:

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
opacity: 1 !important;
}

If you enjoyed this post, make sure you subscribe to my RSS feed!

One of the pains of web development is supporting multiple browsers. Most browsers play nice when it comes to implementing standards, but some of the older variants of IE have a different way of doing things. Hence, targeted CSS “hacks” are needed to ensure the front-end is consistent across all browsers. In a recent example, I had some issues with icons in buttons. Worked fine on Chrome, Opera, Firefox and even Edge, but IE 10 and 11 had the icons well out of place. I tried targeting the IE10 and 11. This appeared to be successful until I realised it caused a regression issue on Edge. What I needed was a CSS selector that would only target IE10 and 11.

Stack Overflow tends to have the answers for these things, but I found some of the answers provided ways of targeting IE as a whole only, or the selectors didn’t work for me. GitHub user zunairmushtaq has come up with an extensive CSS reference sheet for targeting individual versions of IE and Edge. You can add this one to your bookmarks:
https://gist.github.com/zunairmushtaq/aeaa48432d51cad0eb1c

If you enjoyed this post, make sure you subscribe to my RSS feed!

After having a browse through Youtube, I came across a really interesting video. Blaise Aguera y Arcas is an architect at Microsoft Live Labs and has co-created a software called Photo Synth. It’s a little bit tricky to explain in text, but it’s a monumental piece of software capable of assembling static photos into a synergy of zoomable, navigatable spaces. What that means is that the software collects photos from all around the world from end-users that share their photos online and create a 3D navigatable area based on the photos provided on your computer.

Still not making sense? Watch the video, it is truly a masterpiece

Want to try it out? The software is ready to go at Photosynth.net. The speed at which it renders the pictures is amazing.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Many times people ask me online questions such as “what does mean IMO or how do I empty my recycle bin?” These simple tasks can be solved by using Google ! When problems are a bit more complicated, yes it is important to help but for simple things like these, you should ask Google first. So to rectify the problem, you can use LetMeGoogleThatForYou.

Enter in the search query that the person requested and give them the link that LMGTFY gives. When they enter in the url, it will automatically enter in the search phrase and take them to the Google search results. It’s kind of a polite way of saying “Search before you ask” .

If you enjoyed this post, make sure you subscribe to my RSS feed!

Did you know you can increase your Alexa Rank quite easily? I don’t know how the Alexa algorithm works, but many people have reported great success of increasing their rank by installing the Alexa widget on their website or blog. Before I had installed this widget, I was rank 3,569,506. The next day i dropped 300,000 places closer to 1! This is something you should defiantly tryout as it doesn’t cost you a cent. Leave a comment and tell us your results with the Alexa widget.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Hands up all those who have notepad! That is probably most of you if you’re running a windows OS . Back when I first started my Bachelor of Technology, my first unit was Introduction to Information Technology, and as a part of the unit, we had to design our own basic website. We were not allowed to use a WYSIWYG (What You See Is What You Get) editor, because it was to help our learning. We could have used notepad, but that could lead to headaches. So, a suggested program was UltraEdit.

UltraEdit is the ideal text, HTML and HEX editor, and an advanced PHP, Perl, Java and JavaScript editor for programmers. An industry-award winner, UltraEdit supports disk-based 64-bit file handling (standard) on 32-bit Windows platforms (Windows 2000 and later).

In my case, I used it to build a HTML website. And to break it down, I could easily navigate between HTML documents I was working on through its tabbed interference , similar to that of FireFox. Tags were highlighted automatically, and it was easy to spot open tags. I could keep rambling on about it, because it has been so helpful to me, even today when i work on WordPress theme’s, I still use it. You can get a list of features at the Ultra Edit website if your interested.

The only catch is, it does cost $50 bucks. But all i can say is, it’s 50 dollars well spent. Maybe you know of a free text editor or similar that you like. If you know of one, please share it .

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you’re website owner, you know it’s important to have visitors, and with the right information, you can improve your visitor statistics. These statistics can tell you a lot of things, such as the number of unique visitors you’ve had, where they come from, what they look at, and the time they spend visiting. Chances are you’ve got a nice stat counter from your web hosting provider; if you haven’t, I’ll show you how to add one for free.

You may think that because you don’t sell any products, you don’t need to log stats. This is untrue. For example, my blog provides tutorials and tips for PC’s. With statistic information, I can see which tip or tutorial is popular, and then use that to my advantage by providing more tips or tutorials on that topic.

So how do log these statistics? What you need is a visitor tracking service. The service operates by giving you a code to stick on your website so that they can track the information for you. The service that I recommend is StatCounter. The service is free for small websites and the depth of data recorded is very good. Everything is set out well and is easy-to-read. With this service enable, you’ll be able to see what popular and what’s not, therefore able to provide better content.

If you’re using interested in obtaining statistics, here’s how to add a counter to your site:

1. Visit www.statcounter.com and click ‘Register Now’ to open a free account and create a project for your current site.
2. Configure the specifications for your counter. You may wish to set the counter invisible or otherwise choose another option. StatCounter will provide you the code you need to copy and paste into the body area of every page on your website. Edit the files and re-upload them.
3. To view the statistics for your Website, visit www.statcounter.com and log in. Click the ‘My Projects’ link and click the project for the Web site to track. You’ll see a summary page with current visitor numbers – you can select other dates if desired and choose other stats from the list down the left of the screen.

If you’re using Wordpress like me, follow the previous steps until you get to the part of setting the counter invisible. Instead of pasting in a code to your Web site, StatCounter have provided a plugin for you to use:

1. Click here to Download a zipped version of the StatCounter Wordpress Plugin
2. Unzip this file and upload the enclosed PHP file “StatCounter-Wordpress-Plugin.php” into your “wp-content/plugins” folder
3. Go to your Plugin screen in your WordPress admin console
4. Fill out the details, as per the instructions.
5. Switch the plugin over to Enabled.

If you enjoyed this post, make sure you subscribe to my RSS feed!