Set Up A Simple Portfolio Site With WordPress (Part 2)

Now that we have set up our basic WordPress installation, it is time to learn some WordPress basics and customize the theme to make it our own. And finally we will install several plugins to add some additional functionality.

Default Themes

By default, WordPress comes pre-installed with 2 themes, Twenty ten and Twenty eleven. Twenty ten is an older theme used in pre 3.0 WordPress releases. It has been updated to work with the current version of WordPress and will provide a basic user with all the necessary functionality.

Twenty eleven is its younger cousin. It uses html5 standards and was built for more modern browsers. It also has an array of interesting customization options that were not available in twenty ten, such as post templates.

You can customize both themes by going to your WordPress Admin Dashboard (default: http://www.yourdomain.com/wp-admin) and clicking on Appearance > Themes. There you can see a list of all currently installed themes. The top most theme will be the currently active Twenty eleven. You can change that by activating any of the themes below. From here you can also change theme options. Clicking on Customize brings up a new options window where you can preview your changes live. There you can change everything from Site Title to Background image, customize header or switch from a light template to dark, which in my opinion is more suitable for photography.

Free and Premium Themes

Default WordPress themes are not your only options, in fact it is very rare you will ever see anyone use ether twenty ten or twenty eleven as the default theme for their blog/website. One of the benefits of choosing WordPress over any other CMS is the sheer number of Free and Premium custom themes available out there. WordPress themes directory (http://www.wordpress.org/extend/themes) has over 1,500 free themes available for download as well as links to multitude of commercial sites where you can purchase high quality Premium themes. Commercial themes sites generally fall into two categories. Theme depositories where you can purchase individual themes for a set price and Theme Clubs where by paying monthly or one time membership fee you can access all available themes.

It is up to you to decide which solution is best to go with. Free themes generally lack support and maintenance, but they are free. By using premium themes you will probably get better initial support, but may have to pay for future upgrades when new version of WordPress rolls out. Good news is, because WordPress community is so large and active you can always find a review or recommendation with a simple Google search before you make your decision.

Let’s Customize

For the purpose of this tutorial we will be using a free “Responsive” theme by Emil Uzelac available on WordPress Themes Directory (http://wordpress.org/extend/themes/responsive). Navigate to Appearances > Themes and click on the Install tab. Here you can search themes based on color, layout and available features. Since we know the name of our theme just go ahead and type “Responsive” in the search bar. It is one of the top choices at the moment; if this ever changes I have provided a handy link just above. Hit “Install Now” then “Activate”, this will take you back to Themes screen. Alternatively, if you have download a theme outside your WordPress Admin Panel you will need to extract the contents of the zip archive and upload the theme folder to your wp-contents/themes/ directory. Once uploaded, your new theme should immediately show up under Appearances > Themes. You can activate it from there.

Let’s look at the theme options. It looks like this particular theme uses header image to place an image logo in the upper left corner. Default “Responsive” logo is a transparent png 300 by 100 pixels. It works very well for this theme, so we will create our own logo using the same dimensions. Using custom header upload form found under “Logo Upload” or by going to Appearances > Header replace the default logo with our own.

Navigation

If you haven’t noticed already, your new website only has one “Sample Page” in the navigation. Let’s fix that. But before we start tinkering with the navigation we need to create all the pages first. Navigate to the Pages tab found on the left hand side of the WordPress Admin Panel. There you will notice the “Sample Page”, delete it, as we will not need it. Our website needs the following pages: About Us, Services, Portfolio and Contact Us.
Click on “Add New” and in the title field type About Us. Click “Publish” to make the page live. Notice the permalink field directly under the title shows us the URL of the newly created page. However it is currently using page ID number (?page_id=14) instead of simple text address such as (about-us). You can fix that by clicking on “Change Permalinks” and selecting one of the options. Personally I prefer the following custom option: /%category%/%postname%/ as it gives us a nice threaded URL for both posts and pages. There are many other ways to set up your permalinks; you can read all about them on this handy WordPress Wiki page http://codex.wordpress.org/Using_Permalinks. Click on “Save Changes” and go back to “About Us” page. Notice that the permalink field will now display a different address. You can always edit it by changing permalinks or clicking on edit button to fix it manually.

One by one create the remaining 3 pages. Don’t worry about the content at this moment, we will edit it later. Let’s add several subpages to our Portfolio: Glamour Photography, Architectural Photography and Culinary Arts Photography. How you will break up your own portfolio page is completely up to you. Subpages are created by clicking on Add New, then selecting a Parent page under parent dropdown on the right hand side, in this case Portfolio page will act as a parent.

You will notice that our navigation was updating as we were creating pages, however it is a mess. To fix the order of pages we need to navigate over to Appearances > Menus. Create a new menu and give it a title. Something descriptive like “Main Navigation” will work. Hit “Save”, you will then notice “Theme Locations window pop up on the left hand side. “Responsive” theme we are using has 4 separate locations: Top Menu, Header Menu, Sub Header Menu and Footer Menu, select “Main Navigation” under the Header Menu dropdown and hit save. This tells the theme to use Main Navigation for our Header Menu. Let’s populate our main navigation with links. Using “Pages” panel select all of our newly created pages and hit “Add To Menu”. This will populate our navigation with links. You can use your mouse to move to pages around and place them in the correct order. Your final menu should look something like this.

Indenting subpages under the parent page usually creates a dropdown. However, some themes choose to handle this differently.

Home Page

Let’s go back to Appearances > Theme Options and click on Home Page. Here you can edit Home page text for this particular theme. Again, some themes will handle this differently, but it is very common to place Home Page content under theme options. Refer to your themes documentation on how to format and edit home page content.

We will need to edit a bit of html to replace the default home page image. According to the documentation theme uses the following code.

<img class="aligncenter" src="http://themeid.com/wp-content/themes/responsive/images/featured-image.png" alt="" width="440" height="300" />

Navigate to Media > Add New and upload a new home page image. Default dimensions are 440 by 300 pixels. So I will be using an image 440 by 320 pixels. Once uploaded copy the file url and go back to Theme Options. Replace the default image url with the one you just copied and fix dimensions if needed. Your new code should look something like this.

<img class="aligncenter" src="http://www.27pixels.net/wordpress-portfolio/wp-content/uploads/2012/07/home-featured.jpg" alt="" width="440" height="320" />

Copy and paste it into the Featured Content field then hit “Save”.


Let’s take care of the 3 widget boxes below. Navigate to Appearance > Widgets. On the left hand side you will see available widgets and on the right hand side available widget locations. Our Home Page widget locations are labeled Home Widget 1, 2 and 3. From the left hand side drag “Text” widget into the first two boxes (Home Widget 1 and 2). We will use text widget to add custom content and images to both of those boxes. Drag “Recent Posts” widget into Home Widget 3. We will be using WordPress blogging features to post short news updates on our website.

You can use the following html code to add image and link to the first 2 widget boxes, just substitute my image URLs for yours. You can get your image’s URL by uploading it via the Media page (using same steps as when we uploaded featured image above)

<img class="aligncenter" src="http://www.27pixels.net/wordpress-portfolio/wp-content/uploads/2012/07/box1.jpg" alt="" />
<a href="http://www.27pixels.net/wordpress-portfolio/services/">Click here</a> to view different services we offer to our customers.

To populate the recent posts widgets you need to navigate over to Posts. Delete all the sample content and create a few news items yourself. The process is almost identical to creating pages.

Shortcodes

Posting content using WordPress Tiny MCE editor is very intuitive. If you are familiar with MS Word or other editors you should have no problem getting the hang of it. However, I would like to go over something that may not be as straight forward for a beginner user. WordPress allows content creators to insert shortcodes into posts and pages. Shortcodes are little pieces of code that allow editors place dynamic content into post body. The most common shortcode a photographer will come across is .

Navigate to our Glamour Photography page and click on “Edit Page” at the top. Click on Upload/Insert button, this will open up upload panel. Select all the glamour shots you want to showcase on the page. Once upload is done hit “Save All Changes” at the bottom of the upload panel. This will open up a gallery tab which you will be able to access at any time. Notice Gallery Setting at the bottom panel.

“Link thumbnails to” allows you to set whether gallery thumbnails will link to full image or a new page with larger file. Set it to “Image File” for the time being. We will add a plugin at a later time that uses this feature.

“Order images” should be self-explanatory, change this setting to reach desired effect.

“Gallery columns” sets the number of thumbnail columns per page. The most common options are 3 or 4. Wider pages often use 5 or 6. Play around with this option and see what works best for your theme.

When you’re done tinkering with the settings, click on “Insert Gallery”. If you switch over to HTML tab for a second, you will notice the following shortcode in your page body . By moving this shortcode around you can change the position of the gallery on page. You can also insert this shortcode into other pages. However, this shortcode will generate images based on the page you are currently on. That is will generate different galleries on Glamour Photography, Architectural Photography and Culinary Arts pages. If you want to display gallery from one page on a different page you need to specify page or post ID in the shortcode like this:

Shortcode API is heavily used by various WordPress plugins. It is essential to know how to use shortcodes in order to use WordPress and the best way to do this is practice.

You can create content for the other portfolio subpages using gallery shortcode.

WordPress Plugins

If you ever need to extend basic WordPress functionality, plugins is the way to go. WordPress.org offers over 20,000 plugins for various versions of WordPress. If you can think of some additional functionality, there is a big chance a plugin already exist that does just that.

You can install plugins two ways. One is to download a plugin in a zip file. Extract the contents and upload the plugin folder to wp-contents/plugins/ directory. Once uploaded, you can navigate over to Plugins > Installed Plugins in your WordPress admin panel, find your new plugin in the list and click on “Activate”.

Alternatively you can go Plugins page first and click on “Add New”. This will bring you to a search form where you can search for the plugin you are looking for. This search is tied to WordPress.org. If the plugin you are looking for is not listed there you will need to download it manually (see the step above). When you find the correct plugin you can install and activate it from there, just follow onscreen instruction.

Not all plugins are compatible with any version of WordPress. If you look on WordPress.org plugin details page, you will notice Minimum Required Version of WordPress, as well as Compatible Up To Info. This information is provided by the plugin author. If your version of WordPress does not meet the requirements, do not install this plugin. Additionally, WordPress.org users can provide version feedback on the plugin details page, so you can find out whether or not this plugin works with your version, based on the experience of others.

We will install 2 plugins for our portfolio site. Navigate to Plugins page > Add New and search for “Fast Secure Contact Form”. The plugin we are looking for was created by Mike Challis and it will allow us to add a simple email form on our Contact page. Find “Fast Secure Contact Form” plugin on the list and click “Install Now” then “Activate”. From the plugins page you can click on Fast Secure Contact Form settings. Here you can set up emails our form will submit to, as well as add additional fields. See plugin documentation if you need help with a particular setting.

Navigate to our Contact Us page and click on Edit Page at the top. Paste the following shortcode [[si-contact-form form=’1′]] into page body then hit “Update”. You should now be able to see a contact form which submits content to your email (set in plugin settings).

Next we will install a gallery lightbox plugin that will pop up large previews instead of opening them in a different page. Search for the following plugin: “jQuery Lightbox for Native Galleries” created by Viper007Bond, install, then activate it, just like you did with the Contact Form plugin. Once activated it should work immediately. Navigate over to any of the portfolio pages and see if it works. Remember that you need to set gallery to link to file rather than a new page in order for this plugin to work correctly. You can find Lighbox settings in your Admin Panel under Settings > jQuery Lightbox.

List of installed plugins. You can install additional plugins by clicking on “Add More” and searching for desired keywords.

More Editing

You can now start going through your website one page at a time, adding missing content as you go. If you wish to clean up your inside pages, you can go over to Appearance > Widgets and remove some of the boxes from the Main Sidebar. For example: Recent Comments, Categories, Archives and Meta boxes are not necessary for our portfolio site. You can also disable Page comments by going to individual pages, clicking on Edit Page and unchecking Allow Comments under Discussion. If you do not see the discussion box, click on Screen Option at the top and make sure Discussion button is checked.

I hope this tutorial was helpful to WordPress beginners. If you ran into some trouble along the way leave a comment below and I will try to help you as best as I can.

This entry was posted by Alex Gumerov.
 

Leave a Reply

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

  1. I am still awaiting your reply to my situation from the author of the Atlas theme and I cannot find a solution to the problem I have with the created theme.

    I am trying to use your template as advertised, but, I cannot hide my personal media file(s) [ logos,etc.] from my portfolio template. I cannot have a separate place for my logo?, for my used media for creating my pages. I do not want this in my photo portfolio, who would?.

    I am asking how to separate/section my media library so to use it for my daily photography, with out my private media items showing up. ?

    I have had to resort to pluggins to do what is advertised for this theme

    Maybe, hopefully you understand, and can advise accordingly.

    Thank you

    • I’m not sure what you want exactly. But each post or page you make will have its own media gallery, which you can embed on the page. And your media library is sitewide.