Blog entries

Informative blog articles from Blogger IQ

How to Create Custom CSS Buttons in WordPress

June 23, 2016 by Arun Sarathy Leave a Comment

Sometimes we need a call-out button or a ‘Go here’ button but designing a button in WordPress has never been easier. Just follow the steps given below and you will have a shiny new button created in no time.

This is accomplished using an external button creator website so there is no need to install any plugin as well!

How to add custom buttons in WordPress using CSS, HTML.

Go to http://www.bestcssbuttongenerator.com/
Choose a button design to modify.
Modify using the color options given at the bottom of the button.
Use the sliders on the right to adjust the dimensions, font size, etc
Click on Get CSS button, paste to a text file – we’ll come back to this
Click on the Get HTML button, paste to another text file – we’ll come back to this as well
Now go to your WordPress > Appearance > Editor > Style.css.
You’ll paste the CSS code at the bottom of Style.css that you copied from Step 5 above.
Save
Then go to your Post or Page where you want to add the button.
Paste the HTML code copied from Step 6 above.
Edit the HTML code’s href link from # to the URL you want the button to take you when clicked.

And you’re done.

Here’s an example:

My First Custom Button using CSS

How To Add A Menu Link To Show Random Posts In WordPress

June 20, 2016 by Arun Sarathy Leave a Comment

Our online behavior is random, just like the events in our lives sometimes.

We will be reading one thing and then next thing we see is we move on to something else totally different in context – thanks to all the distracting plethora of information available online.

The fact is, it is not the problem with the internet, but that’s the way how our mind works too. Similarly, I wanted to show you how to add a menu item to a WordPress blog and make it go to any of your blog posts…in a random fashion.

In WordPress, there is a cool way to show random posts with a click of a button.

There is a neat plugin created by the creator of WordPress, Matt Mullenweg called Random Redirect. This can be accomplished by adding codes to your theme too, but if you prefer a neat to-the-job plugin, then Random Redirect is the way to go.

Step 1: Download the plugin from here. Install and activate it.

Step 2: Add a menu item with whatever name you want. E.g. ‘Random’, ‘Surprise me’, ‘I am curious’, etc. from the Appearances > Menus

Step 3: Add the link as yourdomainname.com/?random=

(replace the yourdomainname with your actual domain name)

That’s all you have to do to add a menu item to show random posts from your WordPress site.

In case you want to accomplish this without using any plugin, then there is a wonderful post written by Syed Balkhi and his team at wpbeginner.com.

How to Disable WordPress Visual Editor

June 20, 2016 by Arun Sarathy Leave a Comment

Is your WordPress visual editor not working?

Chances are that the visual editor for WordPress got disturbed with any of your editor related WordPress plugins.

However, WordPress’s ‘Visual editor’ is quite useful while writing the posts or pages. This helps in formatting the text when we write in real-time. The editor is one view and then we also have the HTML (Text) editing tab in which we can put in the code for ads, etc. People who know and understand HTML can also use the Text editing tab.’

People who know and understand HTML can also use the Text editing tab.

But sometimes it so happens that the text we write with formatting done in real-time goes haywire and looks messy while swapping between the visual editor and the text editor.

Here’s how to fix this issue:

How to remove Visual Editor in WordPress:

Go to Users > Your Profile and check the box that says ‘Disable the visual editor when writing‘.

This checkbox will take care of the rest. Save changes and go back to your editing area and you will see that the regular formatting toolbar is gone and you see only the bare minimum buttons like this one in the screenshot:

This is how you can disable WordPress visual editor.

If you prefer to get the formatting options back, then you can any day uncheck the checkbox in the User Profile page.

Although, people comfortable writing using HTML can find this a child’s play, even if you don’t have much knowledge in HTML, you can still play around with the buttons and see it for yourself on what the buttons can do and learn it that way.

How to show last modified date and time in WordPress?

June 19, 2016 by Arun Sarathy Leave a Comment

Users tend to usually click on blog posts and pages which are recent and relevant in the SERPs.

This way it makes more sense for users to be updated in knowledge with recently updated or written blog posts. But as bloggers and writers, it’s hard for us to update and show every time on all our blog posts that we have recently updated it. Though search engines can easily find it out using their juicy algorithms, readers don’t really see the last modified date.

But as bloggers and writers, it’s hard for us to update and show every time on all our blog posts that we have recently updated them. Though search engines can easily find it out using their juicy algorithms, and sitemaps, readers don’t really “see” the last modified/updated date of a blog post.

Here’s how to show a last modified time stamp on your blog posts, pages, and even custom post types

For this purpose, I am going to use a WordPress plugin that also comes along with a shortcode. It’s a simple one.

Download Last-Modified-Timestamp WordPress plugin from here, and activate it.

Once activated, go to the blog posts that you’ve updated recently and then add a shortcode at the top of your posts.

The shortcode for this plugin is “last-modified” in square brackets without the double quotes. I intentionally didn’t put the square brackets here as it might get picked as a shortcode itself.

Now, with every post you write, you can go ahead and add a last modified date at the top of the post to improve reader base and ultimately search rankings too. This works particularly well if you have review or tutorial kind of posts on your blog.

Thanks to the developer of Last modified Timestamp, Evan Mattson, for creating such a lovely plugin!

How to resize PayPal button?

June 19, 2016 by Arun Sarathy 1 Comment

PayPal usually allows you to customize the look and text on their buttons. Once done, it gives you the HTML code that you can copy and paste on to your website. But your PayPal button might sometimes look huge or abnormally big which covers your website’s entire page, which calls for us to resize PayPal button.

Here, sometimes the default settings for the CSS of your buttons in your website’s theme settings is usually the cause for the PayPal button to show abnormally big.

However, we can customize the button’s HTML code individually to make it appear normal.

Editing HTML to resize PayPal button is the answer.

Don’t worry it’s not difficult. Anyone without HTML knowledge can also easily make this change.

Here’s how:

<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_SM.gif"  name="submit"
alt="PayPal - The safer, easier way to pay online!" 
style="border: 0px none ; padding: 0px; width: 96px; height: 21px;"/>

The code shown in Red font above is what we need to add. The ‘style’ attribute ensures that the PayPal button shows normally on your blog or website. Feel free to adjust the width and height dimensions as needed.

This way we can resize PayPal custom button that shows normally.