My Blogging Tip

How To Add Border, Frame And Shadow Effects To Your WordPress Images?

Do you like to hang pictures around your wall without framing it?

No one does! A picture without a frame doesn’t look cool and it is not even a picture, it is just a plain image. Whether it is your living room or your website, adding border or framing an image will give an enhanced look. Here let’s see how to add border, frame and shadow effects to your wordpress images.

Add Border, Frame And Shadow Effects To Your WordPress Images

In order to work with images, wordpress has a well build in media library. One can simple insert images in to their posts and pages by uploading it, selecting from library or inserting straight from URL. When you insert images into your post or pages you will see several options like adding titles, captions, alt text, alignment and size. All these are basic settings for an image, but do you know that you can add a border, style and CSS class to an image.

How To Add Border, Frame And Shadow Effect To WordPress Images?

Here we will see how to add frames to individual images from wordpress visual editor, adding borders to all images with a little CSS trick and adding border to an image with a shadow.

The four images below will illustrates how an unframed, framed and shadowed picture looks in your posts or pages.

--- The first image is a plain one with no border or shadow.

--- The second image has a thin black border.

--- The third image has a shadow with no border.

--- The last one has both border and a shadow.

Why To Border Or Frame An Image?

People use borders and frames to images in order to enhance the image look. But the actual fact is frames are used to justify the image edge. Let’s us assume that your sites background color is white, now the inserted image looks normal in your posts only that too has a white background.

An image that is incomplete, cropped and that has a colored background looks odd and unnatural like this.

Add Borders To Individual Images In WordPress

In your wordpress dashboard go to posts or page. Now insert image as would normally do from visual editor. After inserting click on that image and you will see an edit icon at the top left corner. Click and when you do that, you will see a pop up window where you can edit your image.

Switch to advanced settings tab which most people don’t notice it usually. Now in advanced image settings you will see a blank field named border. Just enter your number (1, 2 or 3) in pixels and it will add a tiny little black border around your image. This is where and how you need to add border to individual images. By changing the values you can make the border thin or thick as you like.

Also Check Out Below Article!

Change Font Family, Color, Style & Size In WordPress

Adding Frames To All Images In WordPress Using CSS

Adding border to each image individually is not a good idea and it takes time. So with a little CSS code you can add border to all your images that you inserted in your posts and pages.

img {
         border: 2px solid #000000;
}

Add the above code in your theme’s custom CSS file and it will add a tiny black border to all your images.

If you don’t like the look, then add this one below.

img {
         border: 2px solid #000000;
         border-radius:25px;
}

Here the border color and size are same, but the image will have a curvy edge. Try with different color and adjust the border size and radius to make the image more elegant.

Look at another example of CSS code that is much better to use.

img {
         padding: 7px;
         border: 1px solid #1b3041;
         background-color: #62ade6;
}

In all the above examples the border style is solid. You can try different borders by replacing the solid with dotted, dashed, double, groove, ridge etc. Also you can change other properties like border-radius, background-color, etc.

Adding Shadow To WordPress Images

Adding shadows to your wordpress images is same as what you did above for frames and borders, but with a one more line of CSS. Here the below CSS will give a shadow effect to all your images. Change the numbers, color codes and see how it looks.

img {
         border: 1px outset #c8c8c8;
         border-radius: 5px;
         box-shadow: 10px 10px 5px #717070;
}

O.K all done! Here is another try. If you wish to add border, frame or shadow particularly to one or two images then you can specify the class and call it from your style sheet. Here is how you do it.

Navigate to your wordpress posts or pages, insert image as you would normally do. Now click on edit image, go to advanced settings and specify a CSS class. You can name it anything.

In our case we have specified the CSS class as “my_image_styling”.

.my_image_styling {
                    box-shadow: 0 0 20px rgba(0, 0, 0, 10);
                    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 10);
                    -moz-box-shadow: 0 0 20px rgba(0,0,0,10);
                     margin: 4px 0;
                     padding: 4px;
                     background: #b9b9b9;
                     border: 2px solid #716a51;
}

So with the above CSS code the final output is like this one.

If you have a little idea about CSS then you can make an image and your website look outstanding.

I hope this article helped you (especially photographers) in adding border, frame and shadow effects to your wordpress images. If you like this then please take a moment to share it. For more tips and tricks subscribe to our RSS feeds.

How To Change Font Family, Color, Style And Font Size In WordPress?

Changing font family and adding a detail to your Fonts style, fonts color and fonts size will totally give a different look to your site. To make you sites more elegant you should focus on changing the default font family, colors, style and size. In all premium wordpress themes you can look for a themes option panel. In there you will have the options to change font family, color, style and size for your posts, widgets and footer texts separately.

But, how about free wordpress themes?

Here we will discuss on how to change font family, font color, font style and font size in wordpress. No matter what you get, but anyhow the theme does not have the option to change font family for particular text or paragraph in specific post. Recently one of our visitors asked us about changing font family for specific text in a particular post. You can change font style, font size, font color and font weight from your post visual editor, but not font family. Here we will also see how to change font family for specific text or paragraph in a post.

Change Font Family, Color, Style And Font Size In WordPress

Understanding CSS Font Properties

font-family:– This specifies font family for the text (e.g. font-family: Times New Roman, Arial).

font-color:- This specifies the color of text (e.g. red, green, black).

font-size:– This specifies font size for the text (H1, H2, paragraph…).

font-style:– This one specifies the text style that is normal, italic and oblique.

1. How To Change Font Family In WordPress?

Scroll down and you’ll find the theme’s CSS Stylesheet. Fonts are defined in this part of a theme.

If you want to change the font globally across your theme, you can just stick this line of code at the top of your css stylesheet.

/* This Will Change The Font Family To Courier New */

* {font-family:”Courier New”}

/* This Will Change The Font Family To Arial */

* {font-family:”Arial”}

/* This Will Change The Font Family To Times New Roman */

* {font-family:”Times New Roman”}

/* This Will Change The Font Family To Monotype Corsiva */

* {font-family:”Monotype Corsiva”}

/* This Will Change The Font Family To Georgia */

* {font-family:”Georgia”}

Just change the name of the font to the one that you want to use.

After making all changes, finally hit the button "Update File".

Changing Font For Specific Theme Areas

Depending upon the area whose font you want to change, you’ll have to identify the relevant code snippets in the Stylesheet. This can be really painful.

If you want to change the font used in your post’s body, you’ll have to find out where the font style of the body is defined.

Tip:- Some themes use lots of fonts. So it will be very difficult to look for the relevant code. To make this easy, I’d recommend you to download the WhatFont extension (I’ve only used it with Google Chrome).

With this extension installed, just hovering on any text on your website will tell you which font is in use in that area. Simply pick this font and search for it in your theme’s Stylesheet. And then you can go ahead with changing it.

2. How To Change Color In WordPress?

At first look you probably won’t see an easy way to change the text color. This is because, for some reason, the developers of WordPress decided to hide this feature. Here is how to get to it.

1. In your WordPress dashboard go to the “Posts” section and click on the post you want to edit.
2. Once you are on the post editor screen click the “Toolbar Toggle” button just about your post (circled in red below).

3. This will bring up some extra options in the toolbar above your post. One of these options is a “Text color” drop-down box.

4. Use your mouse to highlight the text you want to change and then click the “Text color” drop-down box. Choose whichever color you like.

5. Once you have chosen a color you can click the blue “Update” button on the right-hand side to save your changes.

This is all done with changing the color in WordPress.

3. How To Change Font Style In WordPress?

In today’s world there are lot of people who build their website or blogs using WordPress. Most of the people who likes a particular Theme ends up not liking the font style. But no need to worry, i will show you How to Change Font Style in WordPress Theme. There are plenty of Plugins in WordPress using which you can change font style.

Here are Simple Steps to Change Fonts or Font Style in WordPress Theme.

1. Install WP GOOGLE FONTS Plugin.

Go to Plugins and click on Add New. Type WP GOOGLE FONTS in search and click on Install Now. WP GOOGLE FONTS is the best Plugin to change the Fonts easily in a minute. By using it you can set different Fonts to different elements.

Note:- By Using this Plugin you can only use Google Fonts to your theme.

2. Go To Google Fonts

Click on Google Fonts which is present in the WordPress Menu.

3. Select The Font

After clicking on Google Fonts, select the Fonts which you like or want to apply to your website.

Select Font from Drop Down menu.

4. Select Font Style

After selecting the font now select the Font Style. Select Normal 400 and select the Elements which you want to apply this font to. I recommend to select all the check boxes.

5. Save Your Settings

Select Latin as your character sets. After selecting the Font and the Font styles, click on Save All Fonts to apply the Font Style to all the theme. That’s it New Font has applied to your theme. Open your website to check the Fonts you saved.

By using WP GOOGLE FONTS you can select different Fonts and Font Styles to the different elements you want to assign Font to.

In this Tutorial i have used only one Font and Font style to all of the theme elements in Font 1 ex: For all body tags, paragraphs, Headings. But if you want to set different Fonts to different elements like for a paragraph different font or for an heading H1, H2, H3 etc different font, just Go to Font 2, Font 3, Font 4, Font 5, Font 6 select the Font and select the elements you want to use for and save the settings.

4. How To Change Font Size In WordPress?

How to change the font size in a WordPress post?

How can you make your text size bigger or smaller?

It sounds like a straightforward task but that’s not exactly the case. If you notice in the WordPress rich text editor you have the options for changing the font colour, making the text bold, underlined or italics but you do not have the option to change the font size. What happens if you want to make your text smaller or bigger?

4 Ways To Change The Font Size In WordPress

1. Use Format Option

The format drop down list, available in the WordPress rich text editor, gives you a number of pre-defined text styles. Among the available styles you will see the Heading 1, Heading 2…..Heading 6. Choosing any of those will make the font size bigger depending on how those styles are defined in your theme’s style sheet (css).

SEO Tip:- For best SEO practices a page should only have one Heading 1 tag so if you want to add more headings to your text (recommended) use heading 2 to heading 6.

2. Use Custom CSS Classes

This is not the easiest method but it is the most recommended. You define custom css classes in your theme’s custom stylesheet and use those classes with-in the post. This method requires a bit of technical knowledge but it is the most efficient since the classes can be used across several posts/pages without adding any extra code to each and every page.

1. Go to Appearance >> Editor.

2. Find your custom css file (this depends on your theme but usually this is under Styles on the right menu).

3. Add a custom class like this which makes the text font size with different pixels.
4. Use any one css class according to need of your text size.

/* This will display the font size 12 pixels*/

.biggerText {
                     font-size:12px;
}


/* This will display the font size 14 pixels*/

.biggerText {
                     font-size:14px;
}


/* This will display the font size 16 pixels*/

.biggerText {
                     font-size:16px;
}


/* This will display the font size 20 pixels*/

.biggerText {
                     font-size:20px;
}


/* This will display the font size 25 pixels*/

.biggerText {
                     font-size:25px;
}


/* This will display the font size 30 pixels*/

.biggerText {
                     font-size:30px;
}

5. While editing a post or page click the TEXT button to view the code and use the span tags to format specific parts of the text like the example shown below.

This is some text and <span>This is some bigger text</span>

Note:- In order to view your changes you need to preview the post in your browser as changes made by class definitions are not shown in the rich text editor.

3. Style Text Using In-Line CSS

This is only recommended if you plan to do it on a couple of cases, if you plan to change the font size in many posts/pages then better use method 2 (custom css classes) above.

While editing a post or page click the TEXT button to view the code and use the span tags to format specific parts of the text like the example shown below.

This is some text and <span style=”font-size: 28px;” >This is some bigger text</span>

When you click the VISUAL button you can see your changes (unlike method 2 above).

4. Use WordPress Plugin

If any of the above methods are too complicated or technical for you, then you can easily install a WordPress plugin that will provide you with an easy visual way to change the font size in WordPress posts. One of those plugins is TinyMCE Advanced and you can install it by going to Plugins – > Add new.

After you install the plugin you will notice that it adds several new options in the rich text editor and one of them is the Font Size. All you have to do is highlight the text you want to change the font size and use a value from the drop down list.

For the more technical oriented, you can click the TEXT button to view the html code of the post and see how the plugin formats the text, which is similar to method 3 above. The only advantage from using the plugin is that you do not need to have any knowledge of CSS or html.

I hope this article helped you to change your desired Font Family, Color, Font styles and Font Size In WordPress. Do let us know in the comments section below.

Hoe To Clone WordPress Site To LocalHost – Clone WordPress Site Easily

There are applications like MAMP and WAMP used to create a local server environment and install WordPress so that developers and site owners can build their site in local PC or Mac and then move the backup to live server. But over the period of time your live site may have lot of deviations compared to the localhost site. At this point you may want to sync the live site’s content to local site so that you can test plugins / themes/ WordPress version updates on a local site before updating on a live site. Though there are plugins which can speedup the backup process, in this article we explain how to manually move live WordPress site to localhost environment.

This article explains the process of moving a live content to localhost.

Move Live WordPress Site To Localhost

Before we go to the detailed process here is a summary of the entire process to indicate what are the things you might need to move your live site to localhost environment.

1. Use FTP client and download all your live WordPress site files, generally available under “/public_html” folder.

2. Login to your hosting account cPanel and export live site’s database from phpMyAdmin section.

3. Login to phpMyAdmin of your localhost using the application you used to install WordPress locally and create a new database.

4. Import live database file downloaded in step 2 to localhost server.

5. Run query to replace all occurrences of live site’s URL with the localhost URL.

6. Replace localhost site’s files with the live site’s files from step 1.

7. Edit “wp-config.php” file and change the database name to new database name as created in step 3.

8. View localhost site and login to localhost WordPress admin dashboard to see all live site’s content is available.

Step 1:– Download Live WordPress Site Files

Launch FTP client like FileZilla, connect to your hosting server and download all WordPress files of a live site to local computer. Generally files will be available under “/public_html” folder unless you changed it to another directory during WordPress installation. The entire download may take a while based on the size of your site. Hence we recommend to do this step first so that you can do further steps in parallel.

In FileZilla first choose local site’s location where you want save the files. Under remote site section, select the files and choose “Download” option by right clicking. This will download all selected files to your local computer.

Step 2:– Exporting Live WordPress Site’s Database

The next step is to download the SQL database file of your live site. Login to your hosting account and go to the cPanel. Click on the phpMyAdmin icon and login to your phpMyAdmin section. Select the correct database and click on the “Export” option.

1. Choose “Custom – display all possible options” as “Export Method”.

2. Select all database tables (you can ignore the tables which you don’t want to export by deselecting them).

3. Select output compression as “zipped” or “gzipped”.

4. Choose format as “SQL”.

Click on “Go” button at the bottom to download the SQL database file in a compressed format to your local computer.

Step 3:– Creating A New Local Database

Similar to step 2, login to phpMyAdmin section of your localhost with the URL “http://localhost/phpmyadmin/” and create a new database with the same name as live site’s database.

Step 4:– Importing Live Database To Local Site

Now select the newly created database and then click on the “Import” option. Choose the live site’s database downloaded in step 2 and upload to local server.

Step 5:– Replace Live Site URL With Local Site URL In Tables

Now that you have uploaded live site’s database to local server but the tables will still have live site’s URL references instead of localhost which you need to change it. Copy the below query and replace the site name with your own URL.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.yoursitename.com', 'http://localhost') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.yoursitename.com', 'http://localhost');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.yoursitename.com','http://localhost');

Go to the phpMyAdmin section of your localhost site and select the database. Click on the “SQL” tab and paste the query in the box.

Click on “Go” button to run the query to replace live site URL with localhost URL.

Step 6:– Replace Local Site Files With Live Site Files

Next step is to replace local site’s files with the live site’s files downloaded in step 1. The simple way to avoid mistakes here is to change the existing local folder name with the suffix “_old” and then create a new folder with the same name. Paste all live site’s files inside the new folder.

Step 7:– Configuring Database Name In wp-config.php File

If you open your localhost site now it will probably show the message “Error establishing database connection”. Locate and open “wp-config.php” file in local server and replace the database name with the correct name as you created in step 3. Generally the username and password are same as “root” (unless you changed it) and change it accordingly.

Step 8:– Check Your Localhost Site

Login to localhost WordPress admin dashboard and check all required plugins are activated. You need to check the plugins since some plugins can only work in a live environment. Open your localhost site and check that is now similar to live site.

I hope this article helped you on how to move your WordPress site to a new localhost. If you like this article please make sure to share it to your friends and if you still have any question please ask in comments.

How To Copy Or Duplicate A WordPress Post Or Page?

Duplicate content hurts your site’s SEO and in fact Google hates duplicate content.

So why to copy or duplicate a post?

There are several reasons to clone a post or page, for example let’s say you are writing blog posts in a sequence like part 1 part 2 etc, so you may like to have all those posts appear in a same order that is all having same format and structure, but only with different content. Or for another instance let’s say for some demo purpose you want to duplicate a single post or page into several times, what will you do? Usually you will create a post from scratch then copy all the content including custom fields, categories, tags manually from the existing one and then you start editing which takes a lot of time. Don’t put too much effort; this is not necessary because just by a single click you can clone your entire post. Here we will show you how to copy or duplicate a wordpress post or page.

Duplicate Post

Duplicate post is a free awesome plugin that lets you to duplicate an existing post or page or you can even copy that to a new draft and start editing. This plugin come with various settings where you can control which parts of the post or page to be duplicated (custom fields, postdate, attachments, excerpt, taxonomy) and what kind of users are allowed to duplicate (admin, editor, author, contributor). Also this plugin can duplicate any custom post type for example you can clone the template page without losing any of its function and content.

Let’s see how it works.

How To Copy Or Duplicate A WordPress Post Or Page?

First install and activate Duplicate post plugin and after activation this plugin adds option page under settings >> Duplicate post. You can now start duplicating a post or page. Go to posts >> all posts or pages >> all pages where you will see your list of posts and pages. Now when you hover on any post you will see two additional options added such as “clone” and “new draft”. Clicking on clone option will duplicate the entire post based on your plugin settings and publishes as it is. When you click on “new draft” the post will be duplicated and saved as a new draft, but will not be published. So if you are willing to make any changes to a post then you can use new draft option.

In a same manner when you are in post or page editor you can see “copy to a new draft” option towards your right side that is in publish Meta box. When you click on copy to a new draft option the published post remains the same, instead it brings you the new drafted post with same content and settings where you can start editing.

Other than that you can also clone a post or page from your site’s front end that is from the toolbar that you see when you are logged in. The toolbar that sticks to the top when you are logged in will give you the ability to create new post, edit post, new page, new media, new user, manage comments and more other shortcuts. Just below the Edit post option you can see the “copy to a new draft” option which on clicking brings you to the post editor screen by duplicating all its content.

Also Check Out Below Article!

How To Clone WordPress Site To LocalHost

Alright let’s take a look at option page of this plugin. From your wordpress dashboard go to settings >> Duplicate post and at first you will see few settings to tweak that is what type of content to be copied and what not.

First option is Copy post/ page date which will copy the original post date and time and if it is unchecked then the cloned post will have its current time. Next copy post/ page status, as I already told you that when you click on clone, the entire post will be published duplicating all its content and settings. In a same way if you clone from a drafted post then you will get another drafted post will all its setting. If you want you can un-check this option so that all your cloned post will be saved in draft. Similarly you can also copy post excerpt, post attachment and post children if you want.

Next is fields and taxonomy’s, if you do not want any single taxonomy to be copied that is categories, tags or format then you can check that option. You can also exclude Meta fields by separating it using commas.

Then the remaining options are title prefix, title suffix, rolls allowed to copy and show links in. Title prefix and title suffix is nothing but adding set of letters before and after the title for your reference purpose. For example if you add “copy of” table prefix then the cloned post title will have “copy of” at the beginning. Next is user roles who allowed to perform this task which you know it very well.

That’s it! This plugin will save your time and effort by duplicate pages, posts in just single click, especially if you have a large number of posts to duplicate. I hope you found this article very helpful, please share and comment below.

How To Customize Scrollbar Style In WordPress Using CSS?

With CSS you can beautify your entire site, do you remember or not that once we have posted about adding details to your wordpress site. Here it is changing the font family, color, font style, font size and changing the default text selection color in wordpress, all that is based on CSS.

Have you ever seen some websites using custom scrollbar?

To match their site looks, design and color they will customize the scrollbar. Adding custom scrollbar to your site is very simple, all you have to do is apply few lines of CSS.

Here let’s see how to change or customize scrollbar style in wordpress using CSS as well as with a plugin.

::-webkit-scrollbar {
                                   width: 14px;
}

::-webkit-scrollbar-track {
                                   background-color: #b46868;
                                   border-radius: 9px;
}

::-webkit-scrollbar-thumb {
                                   background-color: #6c8927;
                                   border-radius: 9px;
}

If you look at our blog scrollbar then you will come to know that it is a default one. Each and every browser has its own styles and so applying CSS also varies greatly. The above CSS code works on webkit based web browsers such as Chrome, Safari etc, but not on other popular browsers like Firefox and Internet Explorer. Due to such compatibility issues you have to write CSS code supporting each browser. This will not be the right solution if you really want to customize the scrollbar. So to achieve this you can better go on for a plugin.

Also Check Out Below Guideline

Add Border, Frame And Shadow Effects To WordPress Site

How To Customize Scrollbar Style In WordPress?

There is a free plugin called Dewdrop custom scrollbar that will help you in customizing the scrollbar and moreover you can achieve stylish responsive scrollbar for your site. Just install and activate it and after activation go to settings >> Dewdrop scrollbar options were you will have bunch of settings.

First you will have the option to change the scrollbar color which you can select depending upon your site color. Next you can select the width of the scrollbar, height of the scrollbar, scrollbar border width, border color and border radius. Other than that you will have auto hide scrollbar option and you can also choose scrollbar speed that is you can make the scroll speed slow or fast.

Custom Scrollbar WordPress

Here is another plugin called Custom Scrollbar WordPress which is more elegant than the free plugin.

The good part is it supports all major web browsers. It is easy to setup, you will get unlimited color option, responsiveness, light weight and all that you get for just 5$. After customizing the settings take a look at your website scrollbar where you can see it in action.

I hope your wordpress site now got an elegant look with custom scrollbar. Please share it to your friends and subscribe to our blog for latest updates.

Complete Guide To WordPress Basics – WordPress Made Easy

Are you a new blogger in the digital era?

Then for a complete guide to wordpress basics you should read this article.

Why you have to choose wordpress?

When there are lots of open source CMS (Content Management System). You know why because wordpress is free and widely used blogging platform and it has many features. It is easy to install, customize and to use.

As a beginner you will be needing all the single steps to be explained briefly. This is a complete guide to wordpress basics. Yes but I am not going to do that in this single article. As it is lot to tell you will just learn the features and navigation of wordpress in this post, so you can understand what is what.

WordPress Front-End

Here in the image below you can see the site structure. This type applies to most of the sites not only for wordpress sites.

Header:- Here comes your site logo along with tagline, next is header menu for your page navigation.

Content Area:- All your post and page content goes here.

Sidebar:- You can place all your widgets here.

Footer:- This place is for copyright content and for footer widgets.

WordPress Back-End (Editing & Managing Your Site)

Dashboard:- In dashboard you can see wordpress welcome message and a short detail about your site (number of pages, posts, category & comments).

Posts:- Publish, edit & delete all your blog posts and category.

Media:- In media library you can add your images and other media files.

Pages:- Same as posts add, edit & delete all your pages. Here is the guide for adding post & pages.

Comments:- You can see your approved and pending comments.

Appearance:- Here it comes ! In appearance you can totally change the look and feel of your site.

Themes:- In appearance 1st thing you will be seeing is themes here you can Install and manage your themes.

Widgets:- This place is unlimited you can place anything you want in your widgets like calendar, Ads, images, pages, categories, plugins.

Menus:- Add your custom menus with pages and categories. Brief about themes, widgets & menus.

Header & Background:- This option’s will preview your header and background. You can change Site’s logo and background by selecting an image and has the feature of changing colors.

Editor:- This part is only for intermediate’s and pro’s and not for beginners. It contains all PHP files and CSS.

Plugins:- Add, delete & manage your plugins. Here is the Guide to install plugin for beginners explained.

Users:- Manage your profile. Add, edit and delete users. Set privileges for users only administrator can do that.

Settings:- Manage your site title, tagline, e-mail for user notification and in-case you forget your password, blog settings, comment/media settings and your site’s URL structure.

In this article I have tried to cover complete guide to wordpress basics. Make use of this article so that you can get a complete idea on wordpress. Please share it to your friends and subscribe to our blog to get latest updates.