As part of my degree at Bournemouth University, part of the final year project was to exhibit at the Festival of Design & Innovation (FODI) where we can showcase ourselves and our final year projects. With FODI came the need for a website in which each pupil on Creative Technology could upload details about their project as well as some information about themselves, I took it upon myself to set up this site.
Having only done basically image drawing with PHP before, I knew the task ahead would require a lot of learning and delving deep into how PHP is used in conjunction with HTML, SQL databases and with WordPress.
The site started as a blank WordPress site after which I installed a theme which met a few requirements but I knew that many of the features I would need to add in myself.
I found this task extremely interesting, until this point I haven’t really delved deep into other peoples code to analyse how it works and how I can then manipulate and build upon that. While majority of the core WordPress php scripts are documented, the theme I selected to base the site on came with no code documentation so it required some time to read and understand it which I enjoyed.
I did most of my PHP programming in Notepad++ and other photo editing in Photoshop.
A few of the main features added and key features of the project:
- Added ability for users to add personal photo of themselves as well as a featured image.
- On work overview, re-designed how the data is displayed and show the users personal photo.
- Colour coordinate between the two Creative Technology courses (Music and Games) to make the two easily distinguishable.
- Randomizing the order of everyone’s projects.
- Created the CT Class list (http://ct2014.co.uk/creative-technology-class-list-2014/) a randomizing way to browse each person by their course and personal photo.
- Managed a small team to help me with visual media, ideas and gathering users to upload their project data.
CT2014.co.uk will be live until June 2015, you can view it here.
Below is a code snippet a page I created from scratch which randomly displays students from Music & Games technology courses and displays them separately.
<?php
/*
Template Name: Custom Alex Template
*/
// GET SELECTED THUMBNAIL SIZE
$thumb = of_get_option('md_post_featured_img_size');
/// CHECK CATEGORY
if(isset($term)) {
$checkcat = $term;
}
// GET PORTFOLIO POSTS
$args = array(
'posts_per_page' => -1,
'post_type' => 'works',
'post_status' => array('publish'),
'orderby' => 'rand'
);
//ADDED BY ALEX ORDER BY RAND
if(function_exists('CPTO_activated')) {
$args = array_merge($args,
array(
'orderby' => 'menu_order',
'order'=>'asc'
)
);
}
query_posts($args);
?>
<?php get_header(); ?>
<?php
$courseCol = "c9c5c1";
$firstCat = "";
$secondCat = "";
$rndno = rand(1,100);
$maxNo = 50;
if ($rndno > $maxNo)
{
$firstCat = "Games Technology";
$secondCat = "Audio Technology";
}
else
{
$firstCat = "Audio Technology";
$secondCat = "Games Technology";
}
?>
<br class="clear" />
<div class="row fitvids">
<div class="sixteen columns">
<center><h2>Meet Creative Technology 2014</h2></center>
<?php if (strpos($firstCat, "Games Technology") !== false) : ?>
<img src="http://ct2014.co.uk/wp-content/uploads/2014/06/GamesWideTitle.png" alt="Creative Technology" width="920" height="52" class="aligncenter size-full wp-image-192" />
<?php endif; ?>
<?php if (strpos($firstCat, "Audio Technology") !== false) : ?>
<img src="http://ct2014.co.uk/wp-content/uploads/2014/06/MusicWideTitle.png" alt="Creative Technology" width="920" height="52" class="aligncenter size-full wp-image-192" />
<?php endif; ?>
<div style="margin-left:45px; margin-top:15px;">
<?php if (strpos($firstCat, "Games Technology") !== false) $courseCol = "f37c74";
else $courseCol = "eeba53"; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $image = get_field('Photo'); ?>
<?php $nameField = get_field('work-client');
if($nameField == "") $nameField = "Not Set"; ?>
<?php $linkField = get_permalink($id); ?>
<?php
$terms = get_the_terms( $id , 'works-categories', 'string' );
if ( $terms && ! is_wp_error( $terms ) ) {
$draught_links = array();
foreach ( $terms as $term ) {
$draught_links[] = '<a href="'.esc_attr(get_term_link( $term, 'works-categories' )).'">'.$term->name.'</a>';
}
$categories = join( ", ", $draught_links );
}
?>
<?php if( !empty($image) && strpos($categories, $firstCat) ): ?>
<div class="wp-caption alignleft" style="width:160px; border: 3px solid #<?php echo $courseCol; ?>!important; margin-bottom:10px;" >
<a href="<?php echo $linkField ?>">
<img src="<?php echo $image['url']; ?>" style="width:150px; max-width:150px; min-width:150px; height:210px; max-height:210px; min-height:210px;" alt="<?php echo $image['alt']; ?>" />
</a>
<p class="wp-caption-text"><?php echo $nameField; ?></p>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php if (strpos($secondCat, "Games Technology") !== false) : ?>
<img src="http://ct2014.co.uk/wp-content/uploads/2014/06/GamesWideTitle.png" alt="Creative Technology" width="920" height="52" class="aligncenter size-full wp-image-192" />
<?php endif; ?>
<?php if (strpos($secondCat, "Audio Technology") !== false) : ?>
<img src="http://ct2014.co.uk/wp-content/uploads/2014/06/MusicWideTitle.png" alt="Creative Technology" width="920" height="52" class="aligncenter size-full wp-image-192" />
<?php endif; ?>
<div style="margin-left:45px; margin-top:15px;">
<?php query_posts($args); ?>
<?php if (strpos($secondCat, "Audio Technology") !== false) $courseCol = "eeba53";
else $courseCol = "f37c74"; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $image = get_field('Photo'); ?>
<?php $nameField = get_field('work-client');
if($nameField == "") $nameField = "Not Set"; ?>
<?php $linkField = get_permalink($id); ?>
<?php
$terms = get_the_terms( $id , 'works-categories', 'string' );
if ( $terms && ! is_wp_error( $terms ) ) {
$draught_links = array();
foreach ( $terms as $term ) {
$draught_links[] = '<a href="'.esc_attr(get_term_link( $term, 'works-categories' )).'">'.$term->name.'</a>';
}
$categories = join( ", ", $draught_links );
}
?>
<?php if( !empty($image) && strpos($categories, $secondCat) ): ?>
<div class="wp-caption alignleft" style="width:160px; border: 3px solid #<?php echo $courseCol; ?>!important; margin-bottom:10px;" >
<a href="<?php echo $linkField ?>">
<img src="<?php echo $image['url']; ?>" style="width:150px; max-width:150px; min-width:150px; height:210px; max-height:210px; min-height:210px;" alt="<?php echo $image['alt']; ?>" />
</a>
<p class="wp-caption-text"><?php echo $nameField; ?></p>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
</div>
<?php get_footer(); ?>