WordPress Tutorials about Wordpress Tutorials
Cropping & Resizing inside WordPress
December 7, 2011
WordPress now includes quite sophisticated tools to crop and resize images without leaving your website or having to purchase any special software. This is especially useful for reducing the size of photos from your digital camera and cropping just a selection of an image.
- Crop your image to an exact size for your slideshow or sidebar images
- Scale your image (keeping dimensions) to reduce the total file size (a great idea to keep loading times and hosting charges to a minimum)
- Rotate images or flip images vertically or horizontally
- Crop the thumbnail only to show the best square section
- Crop everything except the thumbnail
THIS IS A FREE TUTORIAL
Cropping an Image
If you downloaded an image and you only want to show part of it on your website, you can crop a section of your image.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click on the image and drag a crop box over the section you want to show
- Adjust the cropped section by click on the points and dragging in or out
- Click on the crop tool above the image to complete the crop
- Click the ‘Save’ button to save changes
Scaling Your Image
Option #1 – keep same dimensions, reduce file size
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click Scale Image link top right
- Type either a width (first box) or height dimension
- Tick apply changes to all except thumbnail
- Click the Scale button
- Save Changes’ and close window or insert image
NOTE: If you need to crop and re-size your image, crop first, save your changes, then click the show link on the right of your image in the popup window and click on the edit image again to start resizing.
Option #2 – Scale to Exact Dimensions
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Drag your mouse over the image and as you drag you will see the dimensions change on the right
- Once you have the right dimensions, click the crop tool to crop
- Apply changes to all except thumbnail
- Click the ‘Save Changes’ button and close window
See screenshot above under “Cropping an Image”. You can see the width and height on the right as the crop box is being dragged on the left.
Using Your New Image
Adding your image to your website:
If you were editing your image on the post you want it on, just click insert once you’ve finished editing, otherwise
- Edit the page or post where you want your button to appear
- Click the ‘Add Image’ icon above the post content box
- Add a new image or click the Media tab and find your finished button image if already uploaded
- Click on show to see details and make sure you have a relevant title and alt title on the image
- Select size and image alignment
- Click ‘Insert’ button
Using your image on another website
- Go to Media , then Library on your admin sidebar
- Click edit under the image you need
- Copy the link url for that image
- Paste into another website as html
- OR Click view under the image you need then right click and save the image to your computer to use at a later date.
For example. PayPal custom payment page banner, ads on other websites which need to be a specific size, slideshow images for your homepage slideshow which need to be an exact size.
Improve Your WordPress Search Box
November 5, 2011
An effective search box makes sure your website visitors can always find what they are looking for.
Find out how to super charge the WordPress default search box on your website to include tags, categories, wp e-commerce products, comments and excerpts as well as all your pages and posts in your search results.
You can further customize the look of your results to show featured images and highlight search terms. You can also specify any pages, posts and categories which you don’t want included in your search results.
Keep reading to find out how to add a search box to your website, how to customise your search results and your search page. Special instructions for those using the Genesis framework or the WP E-Commerce plugin. Alternatively you can create a Google Custom Search Engine for your website.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Uploading PDF Files to WordPress
October 23, 2011
If you have files created in Word, Excel, Powerpoint, or graphic design programs, you are best to save them as PDF files before uploading to your website.
Once in PDF format, anyone can download them online and view exactly as you saved them without needed a special program to open them. I am assuming that everyone has Adobe Acrobat on their computer these days.
I wouldn’t recommend using pdf files instead of actual website content for search engine optimisation reasons but for brochures, manuals, advertisements, minutes and an alternative to online application forms, it is the perfect solution.
Keep reading to find out how to upload a PDF file to a WordPress page/post, adding a screenshot of the file and different ways to link to your file. If you have a lot of files, you are better off creating a media library with the Download Monitor Plugin so you can upload all your PDF files into categories and display on one page.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Create Easy Maps Inside WordPress
September 23, 2011
The MapPress plugin lets you create multi-location Google Maps inside your WordPress admin without visiting Google at all. You simply create a new map, add locations one by one, customise the details on each marker, set the map preview to show all your markers and insert into a page or post.
Website visitors can view your maps, find out more about locations and get directions all without leaving your website. This is a great way to add real value to your website and give customers the benefit of your local knowledge. Imagine the possibilities for visitors using a mobile device. View demo map…
There is also paid version of this plugin (MapPress Pro) which lets you really customise your maps – adding unique markers, photos, listing locations under each map and mapping your blog posts using custom address fields as well as a special widget for your sidebar. I will cover using this in another tutorial.
This tutorial covers how to create and add maps to your WordPress website using the free version of the MapPress plugin.
You need to be a member to view this tutorial. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Already a Member?
Design Custom ‘Call to Action’ Buttons
July 28, 2011
Learn how to crop and re-size professional button images from Fotolia inside WordPress (no special software required).
A ‘Call to Action’ button is an eye-catching image on your website telling your visitors to take action. These buttons should guide your visitors through your website and help you achieve your website goals – things like making a sale, generating an enquiry, getting a newsletter signup.
Examples of effective ‘Call to Action’ buttons are: Apply Now, Register Now, Signup Here, Subscribe Now, Add to Cart, Book Now, Enquire Now, Download This Tutorial, Find out more. Your button should match your branding but also needs to stand out on the page. The wording should be appropriate to the information on the page, short and sweet and self-explanatory. The button should be clickable, taking the visitor to a shopping cart, enquiry/signup form or a page with further information.
This is a FREE TUTORIAL!
Finding a Button Image
Fotolia is a royalty free photo website with hundreds of professional icons and buttons for use on websites for as little as $1 per image. You will find finished ‘call to action’ buttons complete with text, button backgrounds only so you can add your own text and button sets with a variety of ‘calls to action’ placed on similar buttons. The later is great for keeping buttons consistent throughout your website when different actions are required.
- To find the image you need, go to the Fotolia website
- Sign up for a free account and stay signed in while browsing for images
- Enter a search phrase like ‘booking button’ or ‘website buttons’
- You might also add additional keywords like a particular colour or shape to narrow down your search
- When you see a button you like, click ‘add to shopping cart’ below the image
- When you have a few to revise or have found the right one, click on the ‘My Shopping Cart’ link to view them all
- Decide on an image and select the smallest option checkbox beside that image
- At the bottom of the page, buy credits
- Download your chosen image to your computer
Crop Images Inside WordPress
If you downloaded an image with lots of buttons on it, you will be able to crop each button inside WordPress.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your Fotolia image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Click on the image and drag a crop box over the button you need
- Adjust the cropped section by click on points and dragging in or out
- Click on the crop tool above the image to complete the crop
- Click the ‘Save’ button to save changes
Re-size Images inside WordPress
If you downloaded a single button with text already on it, you will be able to re-size your image inside WordPress.
- On your WordPress admin sidebar, go to Media/Add New
- Browse your computer and upload your Fotolia image
- While the popup image window is still open, click on ‘Edit Image’ under the image preview
- Choose the ‘Scale Image‘ option on the right hand side
- Enter a width for your image (I would suggest approx 200 pixels)
- Apply changes to all except thumbnail
- Click the ‘Save Changes’ button and close window
NOTE: If you need to crop and re-size your image, crop first, save your changes, then click the show link on the right of your image in the popup window and click on the edit image again to start resizing.
Add Custom Text to Button Images
If you downloaded images with no text, follow the above steps to crop and re-size your button. Once your button background is as it should be, go to Media/Library. Hover over your image and click on the ‘View’ link. Right click on the image on your screen and choose ‘Save Image As’ to save the image to your computer.
If you have a PC, there is a program called ‘Paint’ where you can easily add text to your image.
- Go to All Programs, then Accessories, then open Paint
- Click the top left arrow and select Open
- Find the button file you saved
- In the Tools section, click on the ‘A’
- Click on your button and type the text you need
- Highlight text and use the options at top to change font, size, colour etc
- Drag the edges of your crop box to move the text into the right position
- Go back to top left arrow and choose ‘Save As’
- Save as a png file
Add buttons to a Page/Post
- Edit the page or post where you want your button to appear
- Click the ‘Add Image’ icon above the post content box
- Add a new image or click the Media tab and find your finished button image if already uploaded
- Click on show to see details and make sure you have a relevant title and alt title on the image
- Select full size as the size for your button and image alignment as none
- Click ‘Insert’ button
Add a ‘Call to Action’ Link
Click on your button once to select it, then click the unlink icon to make sure it isn’t linking to another version of the button. Then click on the button again and click the hyperlink icon to add a link. Enter a website address or choose another page on your website from the list.
Related Tutorials
Typekit Fonts for WordPress Headings
June 7, 2011
Typekit allows you to use a huge variety of fonts on your website so you are no longer limited to web safe fonts like Arial and Verdana which the majority of people have installed on their computer.
In the past, interesting fonts have been created in design programmes and inserted into a website as graphics. The problem with this is that search engines can’t read graphics so your SEO rankings suffer plus with a lot of graphics your page can take longer to load. Typekit now gives you the best of both worlds.
Keep reading to find out how to add typekit fonts to your WordPress website, get tips for choosing the right fonts and see some examples of typekit in action.
You need to be a member to view the rest of this page. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Download Tutorial
Purchase this tutorial – “Typekit Fonts For WordPress Headings” for US$4. Available to download as a pdf file immediately.
WordPress Websites Get Mobile
May 28, 2011
The WPtouch Pro Plugin lets you create a mobile friendly version of your WordPress website so when people access your website using their iphone, ipad etc, they see your information and graphics easily on their small screen and can quickly navigate to other areas of your website.
Some of the features that set this plugin apart from other mobile plugins are:
- You can choose which page users see first so you can create a special homepage just for mobile users
- You can easily upload your logo to appear at the top of every page
- You can select a custom menu showing just the pages and categories you want
- Use your featured images/thumbnails as icons on pages and posts
- Upload custom icons for your menu as well as using the preloaded selection
Keep reading to find out how to use this plugin, what to put on your mobile website, how to add the features listed above and examples of other websites using this plugin.
You need to be a member to view the rest of this page. Membership Options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Download Tutorial
Purchase this tutorial – “Create a Mobile Version of Your Website”.
Available to download as a pdf file immediately.
Member Login
If you are already a member, please login below to view this page.
How to Improve Your Website Forms
May 10, 2011
Online forms should make life easier for your customer and your business and are a great tool to add value to your website.
There are a lot of ways you can improve your online forms so they are more intuitive, better formatted and (most importantly) more likely to be filled in by a potential customer.
Keep reading to find out which fields to use when and how to make your website forms more user friendly…
You need to be a member to view the rest of this page.
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Download Tutorial
Available to download as a pdf file immediately.
Member Login
If you are already a member, please login below to view this page.
Create a Customer Only Section
May 6, 2011
You can use the Cart66 membership and e-commerce plugin to create a section on your WordPress website which is only visible to people who login with a certain access level. Create one access level for all your customers or multiple access levels such as one for each of your products.
A customer section on your website should add value for your customers and save you time explaining and sending the same information again and again. If the information you add is useful, your customers will keep returning to your website and this will ultimately increase your chances of continuing to do business with them in the future.
This is the first in a series of tutorials on using Cart66 to create different types of membership and e-commerce website including paid membership sites, wholesale pricing shops and event registrations.
Keep reading to find out how to setup access levels, create customer only pages, add a login form and create customer login accounts plus creative ways to use this plugin and what to put in your customer sections.
You need to be a member to view the rest of this page. Membership options below…
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
Member Login
If you are already a member, please login below to view this page.
Embed YouTube Videos in WordPress
April 16, 2011
WordPress makes it easy to embed YouTube videos in a Page/Post as well as in a widgetized section like your sidebar or homepage.
However, if you don’t do it the right way your video code will probably disappear completely the next time you go to edit your page. You can also create a YouTube playlist (a collection of video clips) and embed this on your website.
YouTube Video of New Zealand
Keep reading to find out how to setup WordPress and how to add videos to the pages, posts and widget sections on your website.
You need to be a member to view the rest of this page.
One Month | 3 Months | Lifetime |
| Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website | Unlimited Access to ALL 100+ Tutorials on this website |
| 1 month | 3 months | Forever |
| US$10 | US$30 | US$100 |
| More info... | More info... | More info... |
