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.
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:
1 2 3 4 5 | <?/*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:
1 | $SITE_URL = "http://www.onextrapixel.com"; |
And then you use the variable like this:
1 | <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:
1 | <?php bloginfo('template_directory'); ?> |
Example:
1 | <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.
1 | <?php bloginfo('url'); ?> |
Example:
1 | <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:
1 2 3 4 5 6 | <?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:
1 2 3 4 5 6 7 8 9 10 11 | <?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:
1 2 3 4 5 6 7 8 9 10 11 | <?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:
1 2 3 4 5 6 7 8 9 10 | <?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:
1 | <?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:
1 | <?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.
1 2 3 4 5 6 7 8 9 10 11 | <?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.
To put the form into your site, just put in the following shortcode with the corresponding ID:
1 | [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.)
1 | <?php meta('Subhead'); ?> |
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!
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:
1 | [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.
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?
