WordPress Tips and Tricks for Beginners

Wordpress Tips and Tricks for Beginners

WordPress can be a frightening lion or a gentle lamb, depending on how much experience you have. This platform gives you the opportunity to incorporate many useful plugins and code to manipulate your website to function exactly how you want. This is the lamb. The lion comes when a beginner opens the files to complete the Five Minute Installation.

WordPress Tips and Tricks for Beginners

For WordPress beginners, looking into all the files and code for the first time can be overwhelming – I know this because, not too long ago, I was a newbie to the land of WordPress. It takes time to get accustomed to the way WordPress functions and all of the abilities it offers.

To use WordPress, a general knowledge of PHP is needed, but you don’t have to be an expert. Below is a list of the most used and needed WordPress code, plugins and functions to get you started. They’ve been created with examples and use real scenarios to help you understand the process.

(All solutions reference code from WordPress 3.2.1)

Helpful Code Snippets

Theme v. Template

Problem: I don’t understand the different between a theme and a template.

Solution: A theme is the folder that holds all of your files. For example, the new WordPress theme is TwentyEleven.

Many people start with the theme that comes with the WordPress.org download and build upon that. You can rename the folder to be the name of your site, the version number, etc. At the top of your stylesheet style.css, you can change the name as well. This will help you identify what theme you’re using if you have several options.

A template is one file instead of a folder. A page that almost always has its own template is the homepage. To make a template, create a new file inside your theme. Avoid using home.php because WordPress has already set this page up in its functions. Use home-template.php, homepage.php, etc.

At the top of your template put this code:

<?
/*
Template Name: Home
*/
?>

The template name is commented out, but WordPress still pulls the name. In your dashboard, create a new page. On the right side, you will see a dropdown for template name. Choose the relevant option.

Image Source

Problem: I’m trying to put an image into my WordPress site and I keep getting a broken image error. What’s wrong?

Solution: Working in PHP you’ve probably created a variable that’s equal to the URL of your site. For example:

$SITE_URL = "http://www.onextrapixel.com"; 

And then you use the variable like this:

<img src="<?php echo "$SITE_URL"; ?>/images/myimage.jpg" alt="An Image" />

This functionality does not work in WordPress, so you have to use an alternative way to pull the location of the image:

<?php bloginfo('template_directory'); ?> 

Example:

<img src="<?php bloginfo('template_directory'); ?> /images/myimage.jpg" alt="An image" />

Site URL Shortcut

Problem: I link to different pages on my site a lot, and I’m tired of typing in the entire URL. What can I do?

Solution: Just like the previous example, WordPress has created a function that allows you to reference your site URL quickly. This is also helpful if one day you decide to change your domain or if you’re using a test site. By using this code, you won’t have to change the files in the future to the new domain; it will automatically pull.

<?php bloginfo('url'); ?>

Example:

<a href="<?php bloginfo('url'); ?>/about">About Our Company</a>

Breadcrumbs

Problem: I want to put a breadcrumb at the top of my categories that it has a tagline, similar to Slate. How do I do this?

Solution: There is a breadcrumb plugin you can use called Breadcrumb XT, but I prefer to manually put in my breadcrumbs for a magazine style website. I have more control over color, style, links and adding a tagline.

Add the following code into the content-single.php file:

<?php if (in_category('technology')) { ?>

<div id="full-tag">
<span id="title"><a href="<?php bloginfo('url');?>">Home</a> / <a href="<?php bloginfo('url');?>/category/technology/"> Technology</a> /</span><span id="tagline-text"> The future and what to do about it.</span>
</div>
<?php } ?> 

The key piece to this code is in_category. This is a powerful function because you can apply different attributes depending on the category your post is in.

Conditional Statements

Problem: I want to make the stylesheet different depending what page the user is viewing.

Solution: You will need to create a conditional statement in order to make the CSS change. For example, let’s say we want one stylesheet for the homepage and another for the about page. Let’s say you created templates (explained above) called about-template.php and home-template.php.

1. Call to the page template:

<?php if (is_page_template ('home-template.php')) { ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/home.css" />

<?php } ?>

<?php if (is_page_template ('about-template.php')) { ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/about.css" />

<?php } ?>

This particular code would go in your header.php file. You can do this two ways:

2. Call to the page name:

<?php if (is_page ('home')) { ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/home.css" />

<?php } ?>

<?php if (is_page ('about-us')) { ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/about.css" />

<?php } ?>

It’s useful to call to the page template when you have several pages using the same format. For example, if you had a website with a corporate site and smaller sites based on region, you could specify that the corporate site uses one style corporate-template.php and the microsites use a different style microsite-template.php. This saves you from having to call to every single page and instead use the template shared by all.

Post Recent Blogs

Problem: I want to pull my most recent blogs on the homepage, but I don’t want to make my homepage the main blog feed. How do I do this?

Solution: Place following code into your page:

<?php query_posts($query_string . '&showposts=10' ); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			
    <div class="story"> 
	 <div class="story-content">
	     <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<?php the_excerpt(); ?>
	 </div> 
    </div> 				
<?php endwhile; endif; ?>		

The section, &showposts=10 states to show ten of your most recent posts.

How to exclude a specific category:

<?php query_posts($query_string . '&cat=-6&showposts=10' ); ?> 

This means ten of your posts will show, but it will exclude anything in the category with the ID of 6.

To show posts in a specific category:

<?php query_posts($query_string . '&cat=6&showposts=10' ); ?>

This means six of your posts will show, but it will only show posts in the category with the ID of 6.

Helpful Plugins

Featured Image

Problem: I want to display the image I put inside my post as the featured image for the recent posts on the homepage.

Solution: By using Get The Image plugin, you can pull the image from the post, instead of having to set a featured image every time. The plugin will create a thumbnail that pulls from the center of the image. This keeps you from having an unidentifiable photo to go along with your post. If you prefer to choose the photo that will be featured (helpful if you have several photos in your post), you can use the featured image option built within WordPress.

The following example uses the same code to show recent posts (above) and just adds a line of code for the image.

<?php query_posts($query_string . '&showposts=10' ); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			
	<div class="story"> 
	    <div class="story-content">
	 	<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<?php echo get_the_image(array('Thumbnail','My Thumbnail'),'thumbnail');?>
		<?php the_excerpt(); ?>
	    </div> 
	</div> 				
    <?php endwhile; endif; ?>	

Create a Form

Problem: I want to create a contact form on my site, but I don’t want to create a template.

Solution: Formidable is a useful plugin that creates quick and easy-to-manage forms. The plugin interface allows you to drag and drop different types of form elements (select boxes, text areas, text input, etc.) to create your form.

Formidable

To put the form into your site, just put in the following shortcode with the corresponding ID:

[formidable id=2]

Create More Editable Fields

Problem: I want to add a subhead to be below my post title when viewing a single post.

Solution: A quick answer to this problem is to use the More Fields plugin. This plugin allows you to add different form elements (select boxes, text areas, text input, etc.) to your admin screen. Each post or page (you decide where it’s available) will have the new option. To display the new information you paste the following code:

Paste this code into the content-single.php file beneath your title (or wherever you prefer.)

<?php meta('Subhead'); ?>

More Fields

The ID you give the new field within the plugin options is what you put in between the parentheses.

Protect Your Site From Spam

Problem: I keep getting spam comments on my site.

Solution: Akismet is a great resource to protect your new website from unwanted spam. The plugin should already be on the WordPress site under your ‘Plugins’ section. Activate the plugin and then visit the Akismet site to get your API key. Go back to your website and put the API key in. You’re now protected from the spambots!

Akismet

Embed a Vimeo or YouTube Video

Problem: Every time I put in an iframe into the editor, my video disappears.
Solution: The WordPress editor has issues keeping the iframe code that you put into the HTML tab. To fix this issue, use the plugin iFrame. With this plugin, you will use the following format:

[iframe width="100%" height="480" src="http://player.vimeo.com/video/3261363"]

You can change the width and height to whatever you need. If you are having issues seeing the embedded video when you save a draft, click the preview button, view the page and then refresh. This should fix the problem.

Search Engine Optimization

Problem: I want control over my keywords, descriptions and page titles.
Solution: To control your SEO, you can use the All in One SEO Plugin. This plugin allows you to control the meta data on your pages and posts.

SEO

Conclusion

WordPress doesn’t have to be scary for a beginner. I hope some of these quick tips will help you create your first WordPress site successfully!

What are common issues WordPress beginners run into? Are there any important beginner code snippets I forgot to include? Are there other general plugins that a beginner, or any WordPress developer, would find useful?

Stephanie Bane is a web designer and developer working at Well Done Marketing in Indianapolis. She is also the art director at Punchnel's, an online magazine. Stephanie has experience in web and mobile design and development. If she doesn't have her nose in front of the computer, she enjoys backpacking, live music, reading and cooking.

Comments

  1. / Reply

    Great Tips! Thanks for sharing!

    • Nirmal Shah,
    • October 31, 2011
    / Reply

    Quite nice a list of WP tips. Very useful for beginners.

    • Mayya,
    • October 31, 2011
    / Reply

    Love this tutorial! This is what I’m looking for! Thanks a lot!

  2. / Reply

    Neat article, I’ve been using WordPress for some time and I still find most of interesting and useful. Thank you for putting this up. THUMBS-UP!

    • PixelZombieHalloween,
    • November 1, 2011
    / Reply

    WordPress is supposed to be the “easy” CMS, especially relative to clunkers like Joomla and Drupal. Yet, time and again, doing the simplest things in WordPress always requires busting out quite a bit of PHP and coding a ton of crap. Not very promising for designers who need a CMS since they can’t code a whole site from scratch. In this case, it’s odd how the “harder” systems like Drupal do so much more with just installing add-ons and configuring stuff in the admin panel.

  3. / Reply

    oh nice info….thanks for sharing…

  4. / Reply

    Amazing article. I get the fear just thinking about WordPress but once you get stuck in, it all becomes clear! Just found this blog, added to my favourites. Thank you all.

  5. / Reply

    These plugins are really very useful, i have just create my wordpress blog, so this would gonna help me more! thank you for such a posting :)

  6. / Reply

    Thanks for the comments! I’m glad you found these tips useful and relevant.

    • Jacob,
    • November 3, 2011
    / Reply

    Great tips!! WP is definitely an improvement from manipulating XHTML/XML on the fly, but you put together a comprehensive list of useful tips. Thanks for sharing…mas Señorita!

  7. / Reply

    Very nice tips with good explanation.

    If you have time could you please write a new post showing us how to put the “Next, Previous and Random” posts links at the end of the post just like you have on your blog?

    I am sure many of your readers would love to know about it :)

    1. / Reply

      Happy to help! Are you referring to the Punchnels.com website?

    • akik,
    • November 15, 2011
    / Reply

    Thanks For Sharing Such Kind Of Helpful Info.

  8. / Reply

    Nice tips. Saw one solution i needed. Thanks!

  9. / Reply

    I am a newbie in WordPress Design and from this tutorial i learnt a lot of things and very soon I am going to implement all..

  10. / Reply

    This is really great Post.

  11. / Reply

    nice and helpful topics..thanks for sharing …
    please post more helpful topics at my blog myjodhpur.wordpress.com

  12. / Reply

    thanks for such a valuable post for newbie in wordpress.

  13. / Reply

    Great list of tips and tricks for the beginner. All in SEO is now been replaced by Yoast SEO.

    • Karl Fischer,
    • May 7, 2012
    / Reply

    Hi Stephanie,

    Thank you for this great tutorial. I am currently building my personalized WP blog, as part of a project to get a degree. Do you know where I could find some design elements/social icons to finish the design of my site? I am not a professional designer, but I would like my little project to look the best it can. So, can anyone help me with some freebies?

      • John,
      • May 8, 2012
      / Reply

      Hello Karl,
      I’m surprised that you don’t know about http://www.creattor.com, but if you say that you are not a designer I see why. From what I know, creattor is the biggest website where you can find freebies, so, good luck.
      PS: You can also check here: http://www.onextrapixel.com/category/freebies/

      1. / Reply

        Hi John,

        Thanks for the recommendation!

        Cheers.

  14. / Reply

    Thx..!!!! for the awesome tips & tricks, its really useful for me.

    • Abdul Waheed,
    • June 16, 2012
    / Reply

    With the admin’s permission, I found this wordpress plugin by chance. I hope some of you would like u use this plugin, How To Add Adsense Ads Under Post Tittle And Below The Post In WordPress

  15. / Reply

    thanks you for share.

  16. / Reply

    Did askimet helps us more to prevent unwanted spam ? Could you please write an article about wordpess security plugins ? It will be very helpfulll…..I have heard that recovering a website after an attack is very difficult ..

    • Ryan,
    • August 18, 2012
    / Reply

    Great tips for WordPress beginners.
    Thanks for the post.

  17. / Reply

    Thanks for sharing such a great list of WP tips

    • shaji,
    • October 31, 2012
    / Reply

    thanx for this tips…:

  18. / Reply

    Totally tips and tricks that I find looking for.

  19. / Reply

    I’m new in wordpress. this article gives inspiration :)

  20. / Reply

    Very informative and important tutorial for the WordPress user. Thanks for sharing

  21. / Reply

    That’s a useful post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals