“Simple Portfolio Theme – WordPress Theme”

Documentation by “Atypisch (Marten Timan)” v1.0

Created: 21/11/2013
By: Marten Timan, Atypisch webdesign & webdevelopment
Email: marten@atypisch.nl

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

1. Installation instructions
2. Template Usage
3. Changing Featured Images for a full background image
4. PHP File functions and Structure
5. JavaScript
6. PHP Code Explanation
7. About this Theme

A) Installation instructions – top

Just copy the Theme Folder (the entire ‘simple-portfolio’ folder under te ’theme’ folder) into your WordPress plugins directory. Then go to your Appearance -> Themes section in the WordPress CMS and click ‘Activate’.

B) Template Usage – top

The Theme works as is. It has a few extra features which you might want to use, like setting your own full Background Image, adding a Weblog/News Template, edit your Navigation and the use of Widgets.

Editing your navigation

This theme uses your standard WordPress Pages and converts them into a navigation, as well for normal as the Mobile dropdown navigation. No need to use custom WordPress menus, just add and change your pages and you’re done!

The order is set by the Page Menu Order. You can change that by choosing the Order per page (Ascending ofcourse).

Assigning the Weblog/News template

Understanding the need for a Weblog template I built in a Template which gets the latest X posts from any category, X being the amount of posts you specified under Settings -> Reading. It shows the Post Title, your Post Thumbnail (if you assigned a Featured Image to to post), and the Post Excerpt with a ‘Read more ›’ link to the actual weblog post. On the bottom of the page I placed the ‘Previous Posts / Next Posts’ links.

1. Add a new Page or Edit the page you want to assign the Weblog template to.
2. Go to ‘Page Attributes’ on the right sidebar in your WordPress CMS.
3. In ‘Template’ select ‘News’ in stead of ‘Default Template’ and click on the big blue button above (Save or Update).

Once you are logged in, every post and page shows an ‘Edit’ link below for easier editing skills.

Using Widgets

If you want to use Widgets, go to Appearance -> Widgets in your WordPress CMS. There you will see a Widget Container called ‘Sidebar’.
You can drag and drop all the widgets you see on the left side into that container. These Widgets will now show up in your Sidebar below your navigation. Try the Search Box for instance 🙂

C) Changing Featured Images for a full background image – top

You can set a Featured Image for any one of your Posts or Pages.
There is more information on setting a Featured Image in the WordPress support section online here.

A new metabox is added called ‘Featured Image’.

D) PHP File functions and Structure – top

Functions

The Theme consists of several PHP files and a few folders containing all the necessary PHP and javascript functions, css files and images. These are the functions briefly explained;

Plugin functions

	get_the_post_name();
	Simple function to get the Post or Page name.

	add_theme_support( 'post-thumbnails' );
	adds theme support for Featured Images.

Please do not edit or extend these functions.

Structure

Theme

This is the basic structure of the theme and the containing files, starting from the theme folder ‘simple-porfolio’.

• comments-popup.php pop-up comments
• comments.php main comments template
• css folder
  • /css/menu.css CSS file for navigation
  • /css/responsive.css CSS file for responsive elements
  • /css/style-ie.css CSS file for IE 8 or older
• footer.php footer
• functions.php theme functions
• header.php header
• images folder
  • /images/bg_menu-over.png mouse over image for navigation
  • /images/bg_menu.png normal image for navigation
  • /images/bg_submenu.png normal image for sub-navigation
  • /images/bg_widgets.png background image for Sidebar Widgets
  • /images/default_background.jpg Default full-page Background Image
  • /images/paypal-donate.png Paypal donate image
  • /images/profile_atypisch.jpg Atypisch Profile avatar on CodeCanyon
• index.php (main theme file)
• js folder
  • /js/functions.js Javascript functions
• page.php default page template
• screenshot.png Screenshot for Theme selection
• search.php search template
• searchform.php The actual searchform
• sidebar.php The sidebar containing logo, navigation and Sidebar Widgets
• single.php weblog post template
• style.css main CSS file
• template_news.php The News template

Documentation

• documentation (folder)
  • assets (folder)
    • ...blueprint css files and images for this explanation file
  • index.html (this file)
  • screenshots (folder)
    • ... (screenshots 1 to 3)

E) JavaScript – top

This theme imports a single Javascript file and uses a few small jQuery scripts.

1. A jQuery library
2. My custom jQuery scripts

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Custom Javascript functions, all placed in ../js/functions.js.

   preload_images()
   Javascript function that loops through every image in the array and preloads them in the
   header. This function is now only used to preload the Background Images
   and the Navigation background images.
   
   getScreen()
   Calculates the currend window-size in different ways for every browser, and is called
   from the setBackground() function.
   
   setBackground()
   Calculates the size of your image and sets it according to the screen size using getScreen().

F) PHP Code explanation – top

This plugin uses the WordPress built-in Featured Image function get_post_thumbnail_id() to get the thumbnail (for the columns) like so:

	
	<?php
	if (have_posts()){
			while (have_posts()) {
			the_post();
			$the_post_id = $post->ID;
			$post_image_url_info = wp_get_attachment_image_src(
				get_post_thumbnail_id($post->ID), 'full'
			);
			$post_image_url = $post_image_url_info['0'];
			}
		}
	?>

	

Custom Database functions are used to store the default background and Link color. These are all called in the functions.php file. these are the functions used:

	
	<?php
	theme_add_page()  // for adding a Theme Options page in your CMS
	theme_check()  // to see if a default color exists, runs when you submit a color
	theme_createtable()  // create an extra database table called theme_options
	theme_write_db()  // writes entry to the database table
	theme_update_db()  // updates database table
	theme_get_color()  // gets your default color
	theme_admin_head() // calls necessary functions in your header
	theme_options_page() // creates Theme Options page output
	?>

	

G) About this Theme – top

type: WordPress Plugin
languages: PHP, HTML, CSS, jQuery and custom javascript
version nr: 1.0
release date: 21/11/2013
This plugin is compatible with all newer versions of WordPress from WordPress version 2.9.0 up to 3.7.1
Plugin documentation URL: http://www.atypisch.nl/themes/simple-portfolio-theme/

This plugin is entirely written by Marten Timan, owner and founder of Atypisch Webdesign & Webdevelopment currently based in Utrecht, The Netherlands.

Please feel free to make a donation to stimulate further development of this or other plugins.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the “Item Discussion” section.

Marten Timan
Atypisch webdesign & webdevelopment

Go To Table of Contents