Category Archives: Wordpress Design Tutorials

wordpress design, wp themes, how to design wordpress, how to design for wordpress, how to design in wordpress, how to design wordpress theme, how to design wordpress themes, how to design wordpress template, how to design wordpress blog,

How to Add Video Lightbox in WordPress

If you are looking for a better way to display your videos on your WordPress site or are trying to get a better understanding on how lightboxes work, this article is for you.

A lightbox can be a great tool for showcasing both photos and videos on your website or blog. It makes the media truly stand out and captivate the visitor’s attention. It also adds a nice design element to your site, which is both professional and artistic at the same time.

Continue reading

How to Build a Great WordPress Site Using the Twenty Fourteen Theme

With its latest 3.8 “Parker” update a couple of months ago WordPress released a new default theme, Twenty Fourteen. The developers called it a “beautiful magazine theme,” emphasizing its strong visual elements, which make Twenty Fourteen stand out in comparison with the platform’s prior native themes. The bold new approach to the default design meant that the theme won’t work for every site or satisfy every user’s taste, but that didn’t seem to be the idea behind it. It looks like with every new theme, WordPress developers attempt to showcase a different aspect of the content management system, and Twenty Fourteen did just that in showcasing what WordPress can do for magazine-style sites and blogs.

Continue reading

How to Create an Option Page for Your WordPress Theme

You should consider adding a theme options page for your theme in order to make your theme more user friendly. This will help the users of your theme to customize various aspects of the theme by choosing the options from this settings page.

It also enables your user to easily change and update information such design template, color, font family, font size etc. Creating custom options panels in WordPress is very easy and in this article I will show you how to add an option page to your WordPress theme. Continue reading

How to Create an Author Page for Your WordPress Blog

If your blog features more than one author, you may want to jazz it up a bit by adding author pages devoted to each contributing author. Dedicated author pages can make your website stand out and give each individual author their own space to share a little more about themselves. Adding other pages will not only provide details for each contributing author, but it will aslo help expand your blog by offering more information to your viewers. Continue reading

Adding Pagination To Your WordPress Blog Page without using a Plugin

You can add pagination to your WordPress blog home page without using a page navigation plugin. Simply add the following piece of PHP code to where you want to show the pagination (preferably in your “index.php” file near the footer).

The HTML Code

Paste the following code to where you want to show the pagination

<div class="my_page_navi">
<?php
global $wp_query;
$total = $wp_query->max_num_pages;
if($total > 1) {
if ( !$current_page = get_query_var('paged') ){$current_page = 1;}
$perm_structure = get_option('permalink_structure');
$format = empty($perm_structure) ? '&page=%#%' : 'page/%#%/';
$paginate_return_data = paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => $format,
'current' => $current_page,
'total' => $total,
'mid_size' => 4,
'type' => 'plain'
));
echo $paginate_return_data;
}
?>
</div>

The “type” plain parameter will create a simple plain pagination. You can specify type “array” to get all the pagination links so you can display them how you want to.

The CSS Code

Now, all you need to do is add some CSS to your theme’s CSS file (style.css) to make the pagination look prettier. Add the following CSS code to your theme’s CSS file (customize it to suit your needs):

.my_page_navi {margin: 5px 0;display: block;margin:10px 0px;}
.my_page_navi .page-numbers{padding: 3px;border: 1px solid #9E9E9E;background: #EDEDED;margin:0px;font-size:12px;text-decoration: none;font-weight:bold;}
.my_page_navi a{color: #0071bb;text-decoration: none;position: relative;}

Part 1: HTML to WordPress

Creating your own WordPress theme is really just taking your regular HTML website and converting it to a WordPress theme, making it compatible with the WordPress blogging software.

Learning how to convert an HTML theme to WordPress is also a great task to learn if you would like to take your current HTML website or boutique and create a matching WordPress theme so that your Internet Business can also have a blog!

In this tutorial series we will cover the simple steps you will need to take in order to convert an HTML template to a WordPress theme.

Step 1: Set Up Your Files

The first step to creating a WordPress theme is setting up the theme files on your computer.

First you will want to create the main folder that will hold all your theme files. This typically is the name of your WordPress theme.

Next you will want to add the following text files to your new spiffy WP theme folder:

  • Index.php
  • Header.php
  • Footer.php
  • Functions.php
  • Sidebar.php
  • Comments.php
  • Page.php
  • single.php
  • style.css

Note: These are just your basic theme files needed. If you have any additional sidebars you will need to make an php file for these as well.

In Part 2 of this series we start chopping up our HTML theme and placing the code into the PHP files. Be sure to subscribe to this blog in your feed reader or by email so you don’t miss a single step!

Installing WordPress Part 4: Uploading the Script Files

Now that we know how to choose the right website host for our new WordPress blog, upload files via File Transfer Protocol (FTP), and have a database ready to go, all we have left to do is install the WordPress script and complete the set up process.

The WordPress blogging script files should already be downloaded and unzipped to your computer. Now you just need to open your FTP client and browse to find the WordPress files on your computer. In this tutorial we will be using FileZilla as our FTP client.

In FileZilla all computer files are viewed on the left hand side under “local site” – which also means “your computer.” In FileZilla browse your computer to find the WordPress files downloaded from the WordPress website. The left hand side of FileZilla under local site should look something like this:

Next you will want to connect to your website in FileZilla. The information needed to connect to a website via FTP is: website or FTP URL, username, password, and port # (default port number is 21.)

Once you are connected to your website you will notice in FileZilla that your website files are listed on the right hand side under “remote site” which also means “your website.” In the right hand section you will want to browse to the public_html folder or the root domain.

Note: The files located within the root domain is what website visitors first see when they arrive at your website. For example if you install WordPress on your root domain the WordPress blog will appear on the following URL: http://yourdomainname.com

However if you would like to install WordPress in a sub folder of the domain you can do this as well. In order to install WordPress in a sub folder you will want to create the folder within your root domain. Just create a new folder within the public_html folder. Name the folder whatever you would like, for example if you want your WordPress blog to be located at http://yourdomainname.com/blog then name the folder “blog.” Then open that folder and upload the WordPress files within that folder.

Next we are going to upload all WordPress files to the public_html folder. You will want to be sure you have already configured the wp-config-sample.php file with the database information and save it as wp-config.php within the WordPress files located on your computer.

Be sure to upload ALL files, including the new wp-config.php file you just created.

Once all the WordPress files are uploaded you will then want to go to your website URL to run the install script. To run the install script go to the following URL: http://yourblog.com/wp-admin/install.php (replace “yourblog.com” with your actual URL.)

Note: If you installed the blog in a sub directory then you will need to add the folder name within the URL like this: http://yourblog.com/foldername/wp-admin/install.php

Next You will want to enter your blog information:

On the next page you will receive the log in information to your WordPress dashboard. Be sure to write down your password and don’t lose it!

Congratulations you are now the proud owner of a self hosted WordPress blog! Now find a fancy theme, some cool plugins, and start blogging!

WordPress CSS Basics: Changing Body Background Image

Customizing your WordPress theme can be pretty simple once you master some WordPress CSS basics. In this tutorial you will learn:

How to Change the Body Background Image in WordPress

The first thing a lot of people want to customize in WordPress is the background image. With the right background image your blog will certainly stand out from the crowd.

Below is what the typical body background CSS code looks like in your WordPress stylesheet:


body {
background: #fff url(images/tile.jpg) fixed;
}

When editing the background image you will want to keep a few things in mind:

  • Sometimes the background image and/or the CSS styles is located within the header of a theme.
  • Seamless tile background works best when adding it to your theme, and is the simplest form of editing the background image.
  • Be creative by using the background-repeat, and background-attachment properties.

Adding Image URL

As you will notice in the code above, you will see how the image URL is coded into the CSS file. Really all you need to do is create the image, upload it to your sever via FTP to your themes “image” or “img” folder.

Then you can code the image into your CSS file with the following code:

url(images/NameOfYourBackgroundImage.jpg)

Once you have uploaded and coded in your background image to your theme you will want to edit the image properties – this just tells the image what to do.

Background-repeat

The background-repeat simply tells your image which way to go.

The background-repeat property can be added after the image URL in the “background” property before the “;” like this:

background: #fff url(images/tile.jpg) repeat;

Or you can create an entirely new body background property like this:


body {
background: #fff url(images/tile.jpg);
background-repeat: repeat;
}

  • If you want your image to repeat horizontally (across the width of the page) you will code in: repeat-x
  • If you want your background image to repeat vertically (across the length of the page) you will code in: repeat-y
  • If you want your background image to repeat both horizontally and vertically you will code in: repeat
  • If you do not want your image to repeat, then really it’s not necessary to code anything, but if you want you can code: no-repeat

Background-attachment

Background-attachment just tells whether or not the body background image scrolls with the body of the website as someone scrolls the page, or if it stays fixed and doesn’t move. This is great to use if you have an image that needs to cover the background of the page, but it isn’t designed to repeat. Or in other words it’s not a seamless background, or it’s a full body background.

You can code the background-attachment property the same way you code the background-repeat property (see above.)

If you would like to add a totally new body background property you can do so with the following code:


body {
background: #fff url(images/tile.jpg) repeat;
background-attachment: fixed;
}

  • If you would like the image to scroll you will want to code: scroll
  • If you want the image to be fixed you will code: fixed

Thesis Theme Tips

You can certainly use what you’ve learned in this tutorial to add a custom background image to the Thesis Theme. To add the background image to your theme you will want to edit your custom css file.

When editing your Custom CSS file you will want to be sure to add the custom “body” class like this:


body.custom {
background: url(images/tile) repeat;
background-attachment: fixed;
}

Once you add the body.custom class to your custom CSS stylesheet in the Thesis Theme you will then be able to edit your Thesis Theme background!

I sure hope you enjoyed this tutorial. Be sure to leave a comment letting us know you’ve been here!

Disclosure: Some links used within this post are affiliate links.

Check out the how to use a background image for your WordPress theme tutorial.

Installing WordPress Part 3: Your Database

When installing WordPress you will need to have access to at least one database through your website host. The database holds the meat of the WordPress blog. When doing research on a website host, be sure they provide at least one database in so that you can install WordPress on your website.

Setting Up a Database

When signing up with a website host they will provide you with information to log into your client control panel. Most website hosts use what is called Cpanel, and this is where most web masters manage their website files, databases, and email accounts.

We will be using the Cpanel interface as a base for this tutorial.

Step #1 Create a Database – After you log into your Cpanel, find the icon that says “MySQL Databases” and click on it.

On the next page you will see a box that says “Create New Database.” There you will enter the name of the database that will be used for your new WordPress blog. After you enter the name click create database.

Step #2 Create a User – In order for the database to work you will need to assign a user and user privileges. On the page you created the database you will find a section that says “Add New User.” Here you will pick out a username, and a password for the new database user.

Please keep write down the password assigned to the user as you will need this information later on when configuring WordPress for installation. It is a good idea to create a strong database password to avoid being hacked.

Next you will want to add the new user you created to the database you created. This can be done on the same page in the section titled “Add User to Database”:

On the next page you will need to assign user privileges. Just click “All Privileges” and then click make changes.

On the page where you created the database you will now see your database, and the user name. Write down the database name, and database user name. Keep this information together with the password you wrote down in a previous step.

Step #3 Editing Your Wp-Config.php File – The wp-config.php is how you will connect your WordPress blogging script to the database you just created. If you haven’t already downloaded the WordPress script to your computer then now is the time to do so. The latest version of WordPress can be downloaded here: http://wordpress.org/download/

Once you have downloaded the files to your computer you will want to unzip the files. Next open up the wp-config-sample.php file in your text editor. Edit the following fields with the database information you wrote down in the previous step:

Save this file as wp-config.php within your WordPress folder that holds all the other WordPress script files. In the next tutorial we will work on uploading the WordPress files to the website and finish the process of installing a self hosted WordPress blog on your domain name.