Changes to Files not Immediately Applied on WordPress Blog

A few days ago I got a project to setup a WordPress blog on the client's website. Most of my work included editing and adding codes to re-design the look of the blog, so editing, saving and viewing is a normal process. But I found a issue of changes not updating on site immediately after I updated the files.

I have worked on WordPress many times, but this project required me to work in a different environment, by different environment I mean editing theme and other PHP files only through the WordPress interface and the Web Host was Yahoo which still provides a quite older version of WordPress for their customers.

As the primary job was designing the blog I had to edit and reload the blog page to see the changes on the live blog. Many times the changes didn't appear immediately on the blog, especially the header.php and other page template files.

While I was working on it, I didn't had much problem because of this issue but when the client tried checking the changes I made they complained about the blog not updating. I thought it was a problem with the web host but the actually cause of the problem turned out to be something else.

WP-Cache is what causing the problem

I didn't even think about it. I knew there were cache plugins for WordPress but my mind never focused on it. After exchanging messages with the client he sent me a link to a forum where the cause of the problem was mentioned and it was WP-Cache plugin.

Fixing it is easier than you may expect, just login to your WordPress Dashboard -> Settings -> WP-Cache

When you are in the settings page for WP-Cache plugin, click the "Disable it" button to disable the plugin.

Once you disable the plugin, any changes you make to your WordPress files will be immediately applied to the live site. That's a good idea when you are working on a re-design and you need to preview your changes again and again.

If it's not WP-cache..

If you don't have WP-cache plugin for your site then something else or other cache plugin is causing the problem. Look for other cache plugin for your WordPress blog, you will find all your plugins in the Plugins tab. If you find one then just disable it to solve the problem.

If it's not even a plugin then you might need more help with your blog's technical details, so it's a good idea to try WordPress Support Forum.

Hiding Newer - Older Post Links Below Posts in Blogger

The older - new post links or blog pager links are one of the most basic part of a blog. It provides an easy access to other blog posts on the blog. If you want to remove it then continue reading the tutorial.

In this short tutorial you will learn how to control the display of the three links below each posts called Blog pager (Newer - Older Post and Home link).

There can be many reasons you want the the Newer - Older post links to be removed from your blog. One can be that you are using your blog for just a single paged blog and in that case any blog pager links are not necessary.

Hiding it with CSS

The blog pager has three links Newer Post, Home and Older Post, if you want to remove only a specific link(s) I have provided the code for that too. Let's start with the code to hide the all the three links.

To learn how to add the CSS codes in your template, see this tutorial:
How to add CSS to Blogger

Hiding All Three Links

Hiding elements on web pages is not a rocket science, all you need is a small snippet of code. To hide the pager links we need this a one line CSS code

#blog-pager {display:none;}

Hide the 'Newer Post' link

To hide just the "Newer Post" link in the blog pager use the following CSS code

#blog-pager-newer-link {display:none;}

Hide the 'Home' link

Using this code will hide the Home link in the blog pager

#blog-pager .home-link {display:none;}

Hide the 'Old Post' link

And use this for hiding the "Older Post" link

#blog-pager-older-link {display:none;}

A little note..

Using CSS to hide these links wouldn't remove the links from the HTML document but it will simply hide it from view, this is easier than and safer than removing it from the root. But if you still want to entirely remove it then try this
http://blogging.nitecruzr.net/2007/08/removing-newer-post-home-older-posts.html

Encrypt Your Personal Details with JavaScript

When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying problem. What if you could save your passwords and other details in a simple text file on your PC ?

That makes sense but if your PC is accessible to others it is not a good idea to explicitly save your personal account details in a text file available to every user on your PC.

There are many other ways to keep your account credentials safe on your computer but they are often a folder password software or something like that, but it is a waste of time and most of the times those software are malware itself.

Another option is using an encryption/decryption software on your PC but you won't be able to decrypt your details if you don't have that particular software on the other PC too. Say you downloaded the encrypted file from your Dropbox on a public PC, now to decrypt it you need to install an extra software on it, and it's not a good idea though.  

Let's Start Encrypting/Decrypting

There's an inbuilt encode and decode function in JavaScript that takes in an string and output the result. The function we are talking about are btoa and atob, in JavaScript these functions are generally used for transmission of data that may cause communication problems.

But I found another use of these functions and when I found myself saving my account details on my PC accessible to anyone. I then used those function to encode the details, save it in a text file and when I needed it I used the decode function.

Open the JavaScript Console

First we need to open the Developer Tools with JS Console in the browser. If you want to learn how to open developer tools in different browser check this tutorial.
http://www.stramaxon.com/2013/10/developer-tools-in-browser.html

If you don't want to read that tutorial then just use these keyboard shortcuts to open JavaScript console on your browser :
Chrome - CTRL+SHIFT+J (CMD+SHIFT+J on Mac)
Mozilla Firefox - CTRL+SHIFT+K

Encode it first

Finally when we have the Console open, we are ready to use it for encoding any text we like. The function that encodes any text is btoa("Text you want to encode") if you run this in your Console it will output this VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU= .

We now know what the function does now see how can you use it

btoa("Something here");

The text between the parentheses and double quotes is the text you are encoding so replace it with your personal details you want to encode and once you run it the console will return the encoded version of it, now you can save that text in your file and no one be able to read it (if you don't have any geek or programmer kind of people near you, can be worry free).

Here's a screenshot

Time to Decode

Encoding is of no use if you can't decode it for later use. As btoa() encodes a string similarly atob() decodes the encoded text.

Try running this code in your open JavaScript Console

atob("VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU=");

This will output "Text you want to encode". You use this function in the same way but you just need to pass encoded data in the parentheses.

Tip: If you want extra protection, you can encoded the encoded data too but you also need to decode it the times you encoded it.

Bonus Tool!

Even before writing this article I had written a small JavaScript tool you can use to encode/decode data without worrying about the Console and function codes. Click the link below and start using it.

JS Data/Encode Tool

Sometimes it's fun to to a work in the difficult way ;)

How to Open Developer Tools in Different Browsers

Developer tools or shortened DevTools are set of tools used for debugging web pages which is important tool for web developers and also general users who wants to inspect a page, make changes to the site on the front-end or analyse network usage by the webpage.

It is a all-in-one tool for a person who wants to learn what happening behind the scenes of a website. If you are new to it you may want to learn about, I wrote a post about using Chrome Developer Tools but if you need a more brief information about it see this
https://developers.google.com/chrome-developer-tools/

Chrome and Safari's developer tools are very much the same. But Mozilla Firefox has it's own unique developer tool set but using it is almost same as using any other developer tool.

Google Chrome

Google Chrome in my opinion is the best browser for web debugging using DevTools. DevTools are frequently updated and are simple to use.

Starting DevTools on Chrome

Starting DevTools on any webpage is very easy. There are three ways to open the console :

1. Select the Chrome Menu  > Tools > Developer Tools

2. Right click on a blank area of the page and from the list of options click on "Inspect Element" at the bottom. To inspect a particular element right click on the element and then select the inspect element option.

3. Another way to open the console is keyboard shortcut. Press Ctrl+Shift+I (Cmd+Shift+I on Mac) and the developer tools will appear.

Starting JavaScript Console in DevTools

JavaScript Console is used to run JavaScript codes on a page. It's often used to test scripts on a website to check if the code works well or not. But you can use it as a calculator or just try out JavaScript functions using it.
To directly open the JavaScript Console select the Chrome Menu  > Tools > JavaScript console or use the keyboard shortcut Ctrl+Shift+J (Cmd+Shift+J on Mac).

When the Developer Tool is opened select the "Console" tab on top to switch to JavaScript console.

Mozilla Firefox

If you are using Firefox make sure you have the latest version, as older versions don't include developer tools or if they do, they are old. Developer tools of new Firefox is way better than the older version and got some extra tools too.

Starting Developer Tools on Firefox

You can it by various ways. The most common way is to open it using Inspect Element option. Right click on a blank area on the web page and from the list options select "Inspect Element", the Firefox Developers tools will open.

Or if you can open it by going to the Tools menu > Web Developer > Inspector, this will open the developer tool in page inspector mode.

Opening JavaScript Console

Accessing JavaScript console in Firefox is similar to opening the page inspector. Open the Developer tools by right clicking on a blank area and then selecting the Inspect Element option. Now just switch to the "Console" tag on top of the dev. tools.

Or you can also open it through the tools menu. Click on Tools > Web Developer > Web Console or use the keyboard shortcut CTRL+SHIFT+K.

Apple Safari

Accessing developer tools on Safari is similar to as in Chrome. Some keyboards shortcuts might be different. Simply right click anywhere on the page and press Inspect element.

If you have any question ask it in the comments.  

Expandable Section in your Post on Blogger

Did you ever wanted to have sections inside your post body which is optional for the reader to read or see ?

In some cases you might feel need for a section of your article to be hidden and only visible when the readers wants it to be. But in basic option we get in Blogger or any other WYSIWG editor this is not possible. But wait, it doesn't mean it can't be done.

Before you proceed to the tutorial, check this demo :
Expandable Section Demo

There's nothing special, it just a hide/show box inside which you can put content of your choice. It's not something that everyone might need for their blog posts but when you need it isn't easy to find easy-to-follow instruction on the Internet so I decided to create such a box and put up its instructions for blogger.

Let's start

This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad.

Including the jQuery Library

This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps

1. Go to your Blogger Dashboard -> Template -> Edit HTML
2. When inside the code box press CTRL+F to open a search box
3. Search for </head> in the template
4. Once you find it in the template, paste the following code immediately above </head>
   

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

That is how you add jQuery to your blog.
Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuery.

JavaScript/jQuery Code

The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need :

<script type='text/javascript'>
$(document).ready(function(){
  $(".sh-section-btn").on("click",function(){
    $(this).parent().children(".h-section-cont").slideToggle(200);
  });
});
</script>

The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides.

To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save.

Adding the CSS

The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box.

/* Expandable Box CSS */

.hidden-section-container {
  background-color:rgba(187, 187, 187, 0.93);
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.sh-section-btn {
  font-size:18px;
  color:#fff;
  text-shadow:1px 1px 0px rgba(0,0,0,0.2);
  padding:5px 10px;
  cursor:pointer;
}

.h-section-cont {
 padding:10px 10px;
 background-color:#eee; 
 display:none;
}

If you aren't sure how to add this CSS to your Blog, check my tutorial on adding CSS in blogger.

HTML for the box

After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box.

<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
    
     <p>All your content here</p>
    
    <!-- All your text/html above this -->
  </div>
</div>

You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it :

1. Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title.
2. Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.

Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 

Open your Post Editor, now select the HTML tab next to the 'Compose' tab to switch to HTML mode. Now you can paste your code anywhere you want the box to appear.

This is how simple it is to get such cool features in Blogger. If you face any difficulty while implementing this widget feel free to comment here or email me for help.

Creativeness with Box-Shadow CSS Property

Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages.
Almost every site you see on the web is writing in HTML and styled with CSS and those languages are way very simple than complex languages like ActionScript or C++, but despite of its simplicity it can be used to create masterpiece.

Following two examples shows what todays web technologies can be used for. What we really showcase here is the use of box-shadow CSS property which is usually used to create shadows on HTML elements <-- Just like on this.

The people who wrote the property's specification may have never thought what it can be used to create. Let's take a look at the amazing.

Mona Lisa in Pure CSS

One of the most discussed and popular portrait now re-created in CSS. CSS as you know is the styling language of the web, the thing using which you  make your website fancy :)
See it in action!

Mona Lisa Painting Recreated in CSS3's Box-Shadow

Now one may think why this is so special, a little experienced Photoshop guy can make that in minutes but note that this is done using a CSS property called box-shadow , the designer who created this wrote each and every pixel of the complete photo to produce this.
Da Vinci would have loved this..

Unicode Person Pixel Art in Box-Shadow

How about something simple ? As being a 90's gamer I always had a love for pixel arts and this caught my example:

Unicode Person Example

This simple image of a cute face raising hands is also created with the same technology that was used to create the 'Mona Lisa' example. And do I need to repeat it ? It's created in box shadow!


Now if you are wondering why this guy is so excited about images created in box-shadow then read about it here and you will understand why : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 

Confirming Facebook Group Membership Request At Once

If you have a popular Facebook group where you receive hundreds of membership requests then it becomes a tough job to accept all of them one by one.

You may already know about the "Select All Friends" code using which you can select all your friends to invite them to a Facebook event. We covered that topic in this post:
http://www.stramaxon.com/2012/02/how-to-select-all-friends-at-once-to.html

Facebook now provides a new "Add All" function for confirming all group membership requests at once, so there's no need to use this trick/code.

I wanted to post less on Facebook's topic but as you know it's a hot topic so one in a month is not a big problem.

Anyways, let's get back to the main topic, how would you accept multiple group requests at once. Actually you can disable the approval system for group request but that will enable everyone to join the group, fake and spam profiles too. Such profiles don't target groups with approval system turned-on.

How do you do that ?

The trick is to manipulate clicks on selected buttons using JavaScript. JavaScript is webpage scripting language and you can manipulated static pages by running scripts.
But to run the script you have to open the Developer Tools in your browser, it's not present in old and even some new browsers. I recommend Chrome, Safari or Mozilla - the latest version.

Code

Update: Facebook recently changed the layout of it's group membership request page, so the old code stopped working. I have updated the code which works with the current site. Thanks to A Suzy Meow for informing us about this change.

Copy this small code :

javascript:var cont = document.getElementById('Group_member_request_pagelet');
var ul = cont.childNodes[0];
var li = ul.getElementsByTagName('li'); // iterate on this

for (var i = 0; i < li.length; i++) {
var btnCont = li[i].getElementsByClassName('rfloat');
var ancHors = btnCont[0].getElementsByTagName('a');
ancHors[0].click(); // make the click
}

The code tells the browser click on the "Add" button next to each item (membership request item) in the list.

How to use the code?

For a person not familiar with scripting consoles, it might be tough for them to run the code. I wrote a step-by-step tutorial to make it easy for you :

1. Open the membership request page of the group in a modern web browser (Chrome, Firefox or Safari)
2. To open script console on different browsers :
   
   • Google Chrome - press CTRL+SHIFT+J
   • Mozilla Firefox - press CTRL+SHIFT+K
   • Apple Safari - press CTRL + ALT + I and when the developer tools appear, press ESC or click "Show Console" button to bring up the Console window
     
     
     
     
     
   • If you still didn't understand how to use the console, this article has more for you to learn and understand how to use Developer Tools Console.
3. Once you have opened the Console in your browser, paste the JavaScript code (provided above) and hit enter. When you paste the code inside the console it would look like this (The code you must enter is not the same as shown in the picture) : 
   
   
   
   
   
4. Just hit enter and the code will start doing it's job. It will automatically click on every "Confirm" button one-by-one on the group membership approval page until the number of buttons becomes 0. 

This was it, this small block of code can save you a lot of clicks and time. That's what code are for, to make the users life easier.  But depending on the number of request it may take some time to complete its job, leave the page opened and it will keep doing its job.

This code is very similar to the code to select multiple friends at once for Facebook events but with a little modification it works like a charm on  membership confirmation.

For any queries use the comment form below :) And thanks for reading.