Category: Tips

Add Bootstrap to your WordPress site

So, you want to add a bit of Bootstrap to your WordPress site and have heard about different ways to do it.  The Bootstrap site and most tutorials tell you simply throw it in the <head> tags and you are set. For a static page that works fine but WordPress has its own way of doing things.  And although you can just add something like this inside the <head> tags:

It is better the use the WordPress functionality known as enqueuing. Bottom line is that there will be <script> and <link> tags added to your <head> section, but by using enqueue, you’ll allow WordPress to ‘know’ all the scripts that are being used and to sort them out in the right order.  If in the future you might want to add more scripts (which you probably will), it’ll be apparent that script order is very important and enqueuing will help that out.  When you enqueue scripts they are added by the wp_head() and wp_footer() functions into the <head> and <footer> sections of the page respectively.

Now to the point of this post (if you want to read all about enqueuing scripts checkout this and this and this) which is how to enqueue.  You have two choices (there are others but keeping it simple):

Download Bootstrap CSS and Bootstrap JS

Download both of them from the Bootstrap Site. A common practice is to install the CSS in a folder you name ‘css’ and the JavaScript in a folder named ‘js’ but it doesn’t matter what you name them as long as get the path to each correct in the next step. Once you have that ready, open up the functions.php file and paste this snippet in there.

Use the Bootstrap Content Delivery Network (CDN)

Get the CDN link from the Bootstrap Site. Look for where it says Bootstrap CDN and copy the urls, open your functions.php file and paste them into the code below.  .

This is how you properly add Bootstrap to your WordPress site, know go and learn Bootstrap!

No More Popups on Mobile Devices

Google, our (benevolent?) overlord, has decided to punish popups on mobile devices.  This will start in January 2017.  We have enough time to set our media queries or for the popup plugin designers to set an on off switch on the popup depending on screen size.  Personally, I am glad to see them go on small devices, and even wish for a better way to curb their rampant use on all devices.  However, I don’t like how Google has become the internet policeman or rather judge, jury and executioner of things.  Sooner or later it will backfire and bite Google in the ass.

So, really, no more popups?

Barring the staging of mass demonstrations outside Google offices, there are some ways to accomplish what your popups accomplish on a small screen and not suffer for it.  Google will not punish these three cases:

1. Your cookie police statement

2. An age verification check for you owners of naughty sites

3. A small banner “that uses a reasonable amount of screen space”.  You can see the image below, taken from Google’s site that a form to collect emails could theoretically be used there.

Popups on Mobile Devices

I plan to use that space for my mailing forms.  If I hear of any changes before the new year, I’ll be posting updates here.

If you are interested you can read Google’s announcement here.

 

New WhatsApp privacy settings

So, WhatsApp abandoned its promised policy of privacy.  Surprised? Since Facebook bought WhatsApp it was just a matter of time that the WhatsApp privacy settings would change.  When you turn on your phone today you will be asked to agree with the changes.  If you don’t mind WhatsApp sharing your info along with your phone number to advertisers go ahead and click “Agree”.

To keep your old WhatsApp privacy settings

DO NOT TAP ON “Agree”, Tap on “read more” and by all means read it!

Switch the green switch to off and then tap “Agree”

All done.

All is not lost if you have already clicked AGREE

If you inadvertently accepted the WhatsApp privacy settings this morning, you still have 30 days (till September 25, 2016) to change them.  This is done by simply going to Settings > Account > Share my account info and unchecking the box.

WhatsApp privacy settings

WordPress – How to Set the Homepage

When you first create a WordPress site your homepage will display your latest posts.  Unless you will use your site only as a blogging platform you most likely will want a static homepage.  Here I will show you how to set the homepage to whatever you like.

Step 1 – Create two pages

Go to Pages –> Add New and make two pages.  You can name them as you like but for this example name one “Home” and the other “Blog”.  As the names imply, you will use “Home” as your static homepage and “Blog” will hold your posts.  NOTE: Even if you will not include a blog on your site, WordPress still needs a location to index posts, so you need to create this page.

Step 2 – Set the homepage

Go to Settings –> Reading

Set “Front Page Displays” to “A static page” and set the field “Front Page” to “Home” and “posts Page” to “Blog”.  Click on “Save Changes and you are done.

Set the Homepage

Step 3 – Permalinks

Once you have set the homepage go to Settings –> Permalinks and under the common settings select “Post Name”.  This will make your page cleaner looking your homepage address will appear as http://www.example.com and not http://www.example.com/?p=342.  It looks better, it is easier to remember and is also search engine friendly.

Step 4 – Add your homepage to the menu

Go to Appearances –> Menu.  If you don’t already have a menu, create a new one by clicking on “create new menu”.  Give it name and save it.

On the left of the screen you will notice “Pages” option, select “View All” and look for the page (or pages if you want to include the blog) that you created earlier. Select it and click “add to menu”.  One they have been added you can drag and drop and arrange the menu as you like.  Normally you set the homepage as the first menu item but that is up to you.  Click “Save Menu” and view your website.

Now we learned how to set the homepage in WordPress and the fun begins.  We can customize the front page and the choices are limitless from now on.

FURTHER READING

https://codex.wordpress.org/Creating_a_Static_Front_Page

 

 

 

 

 

Loop through specific pages in WordPress

Sometimes you might want specific pages to be displayed on your site. If you want to display specific posts you can place them into the same category and loop though them by cat.  However, you can’t do that with pages.  In order to solve that, this is what you have to do if you want to loop through specific pages:

Copy this code where you would like to use it and in the assignment of variable $args modify the array with the IDs of the pages you want to use. In case you don’t know how to find your page ID, simply open up the editor for the Page you want.  In the URL area you will see the page number mentioned in the http string.  It will look something like this: ‘post=74’. That is your page ID number.  Check out this guide for a visual on how to do this.

Next, add your own content inside the loop. Don’t forget to close out your php tags if your content will include html. For example:

That’s it really.  Here is an example of the code of a loop through specific pages that i created to make a mosaic of images that link to specific pages.

Enjoy, and if you have any questions, leave them in the comments below.

 

How to add a guest author’s name to your post

So, someone has agreed to write an article for your WordPress blog and you want their name to appear next to the article.  There are two ways to add a guest author’s name.  First, you could always create an account for them and they can post their own articles.  This works well, especially if they plan to write again in the future.  The second way does not involve the author at all.  You simply add some code to your functions.php file and add a custom field at the bottom of your post.  This method is ideal when you don’t want to bother the author with dealing with passwords, when they will only write one article, when they have simply sent you the text of an article and will not be going into the WP editor to create the post and for keeping your dashboard clutter free.  On to it then.

Add a guest author’s name to your post

1.  FTP to your site and open the functions.php file in an editor and paste in this code snippet.  If you need a general purpose editor, I recommend Notepad++  it is lightweight, simple to use and free.  Download it here.

2.  Now that you have entered the code, go to your post editor, go to “Screen Options” and make sure that “Custom Fields” are selected.

add a guest author's name
add a guest author’s name

3. Scroll past your post and in the section “Custom Fields” click on “Enter New”

add-a-guest-author's-name-2

4. After that type “guest-author” exactly as I have written it in the “Name” field and type in the name of the author in the “Value” field

add-a-guest-author's-name-3

5.  Enter the content of the post and publish.  The guest name will appear.

messi

For any other WordPress questions you might have or just to discuss things WordPress, drop me a line.

 

Add new email accounts in the Cpanel

Clients often ask me how to add new email accounts in the Cpanel.  We offer unlimited accounts and they deserve to have them!  Creating them is easy but with this quick guide it will be easier and you will probably never have to use it again after creating your first account.  The steps are as follows:

Add new email accounts in the Cpanel

1. Login to your cpanel.  You should have kept the login info somewhere safe when you subscribed, but if you didn’t, you can most likely find it in the introduction email we (or your current provider) sent you when you first subscribed to the hosting package.  The URL is http://www.YOUR_WEBSITE_NAME/cpanel ( For example http://www.barcelona-apartments.com/cpanel ).
Once you are in the cpanel click on Email Accounts.

Add-new-email-accounts-in-the-Cpanel

 

2. Enter the email username.
Add-new-email-accounts-in-the-Cpanel2

3. Use the password generator to create a secure password. Keep the new password in a safe place. Also set the Mailbox Quota to something according the amount of space you have in your contract. For example if you have 1GB of space contract don’t give your email account more than 200MB. If you are the one managing the site and the email address you dont have to worry about this setting, but you will have to make sure to clean out your inbox every now and then because inbox space counts as much as your website space when determining how much of your allocated storage space is being used.

Add-new-email-accounts-in-the-Cpanel3

4. Your new account should now appear below and you are ready to use it. From this new area you can edit or delete this email account.
Add new email accounts in the Cpanel

Hope this guide has been helpful and if you are interested in hearing about our design or hosting services or need any clarification on how to add new email accounts in the Cpanel, contact us here at Winzyweb today!

Customize the WordPress dashboard footer

After a long day of coding, apparently, I like to relax by trying to figure how how to customize the WordPress dashboard footer.  It’s just a little detail but when you add them up you see that they all matter.  I don’t always include a “built by Winzyweb” reference in my client’s webpages, and that is  a topic of debate between me, my partner and colleagues.  However, the inclusion of a discrete footer in the dashboard is a friendly reminder to your clients that you are around.  Some would say it is so discrete that they don’t even recall that there is a footer in the dashboard.  To remind you here it is:

 

footer-before

(HINT: It’s the part that says “Thank you for creating with WordPress”)

How to Customize the WordPress dashboard footer

There’s a plugin for it, but it is so simple there is no reason to take that route.  But if you really want one, I’ll include the link at the bottom of the post.  For the rest of you here are the easy steps:

1. FTP to your site and open the functions.php file.

2. Insert the following code:

3. Modify it for your business or your personal info.

4. Save and refresh the dashboard.

Here is what I put

Customize the WordPress dashboard footer

Hope you found this useful.

Personal admin footer Plugin

 

 

Are you ready for a new website?

Yes, let's start!