Posted by

So I've recently finished off the first draft of the website for our Brookes Computing competition. Worst Code Best Design. This post will be about the website it self and it's features. More information on the competition can be seen on my blog post here.

 

When creating this website I first went about and looked for a theme that would really suit the needs for this type of competition, what I was looking for was a nice landing page, with the ability for users to be able to log in and submit there own posts. Although I could find nothing that really suited these needs. So I set about creating my own with the help of 320press

These are the main features I wanted within the website.

  • One Page style landing page.
  • Ability to sort submissions by vote.
  • Users can log in to submit their own posts and add the information they wanted.
  • Only users who are logged in can have the ability to vote.
  • Restrict registration to a @brookes.ac.uk email.

Landing Page

For the landing page I decided to take snippets of design from other free templates out there, (Just the design I didn't copy any of the code just the layout of it). The submissions page I will need to give the credit to essential grid plugin, its really great and allowed me to hook into my own custom meta ( The votes of a post) to then sort the pages. 

Sorting Submissions

The submission of the posts did take me a while to come up with the design I wanted. To start with I design a fancy form submission on the page which would then require us admins to create the posts for them. The benefits of this is it would be easy to do and thats about it. In the end I decided that I would kill two birds with one stone.

Submitting a post

To submit a post the users would need to first register (This makes sure they are from brookes) then once logged in they could create there own post! This means they can then come back and edit the information test out how it would look on the website. Once they had submitted it, it would going into a pending review tray and would require a committee member to then scroll through make sure it applies to the rules and is tagged under the correct categories.

Voting 

This was the main work of the script for me at least. I had worked with Ajax alot in the past but never directly with wordpress. Although once I had it figured out it did not take long to create a toggle script which would allow a user to vote on a website once. Then later if they choose to they can remove the vote. I decided to store the votes I would create a hidden field on each submission which would store the post. Then to store which posts the users had voted on I would create a custom field on each user. All of these scripts can be seen in the Functions.php on github.

Restricting user Logins.

This was a easy solve by using a whitelist to only allow brookes.ac.uk. The plugin can be found here.

 

Let me know in the comment below what you think of the site!

Sources:

https://obcs.jack.com

 

https://github.com/jackdh/Brookes-Computing

 

Submit Page
Submisson page
Home Page
Contact Page

Leave a Reply

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