Recently, I've been working on a new feature for my website: tags. On my wordpress blog I can automatically put my posts in a category, and I decided to implement this on my website as well. In this post I'll explain how I did that. If you don't know how to code, but would like to understand what I'm talking about, you should check out Codecadamy, Udacity, or Coursera and take an introductory coding class :)

The way in which I post my blog entries on my website is by filling in a form, where I enter the title and content for my post. For adding tags I had to, first of all, adapt the form to include an option of selecting which tags apply to the post. I decided to restrict my tag choice to Fashion, Food, Life-style, Technology, and Travelling, and added checkboxes for each of these categories. So when I write a post, I can check the checkboxes for the tags that apply to the post, which can vary between no tags or all of them. 

Then I had to include a function in my Python code that gets the value of the checkbox, when it's checked the tag will be added to the post.



When it's checked I want the tag to appear underneath the post, otherwise it shouldn't show. So I had to make sure the checked tags actually appeared underneath the post by adding some lines to the HTML.



What this code does, is that it adds the value of each tag that has been acquired by the Python code above. So if I have checked the 'fashion' checkbox this line: fashion = self.request.get('fashion') will find that the box has been checked and then this line:

p = Post(parent = blog_key(), subject = subject, content = content, password= password,
#TAGS:
fashion = fashion, food = food, lifestyle = lifestyle, technology = technology, travelling = travelling)

will put the value fashion = 'Fashion', and this will be then added to the post.

Of course, I didn't just want the tag to appear, but I wanted it to look pretty too, so I styled it in CSS and added a tag icon in front of the tags which I found on Font awesome.

I tested my code on my local host and everything looked great. Unfortunately, this wasn't exactly the case when I deployed my code. The problem was that for all my old posts (the ones I added without tags)  it showed the tag icon with None None None None None.. What happened was that my code was checking whether I had checked any checkboxes or not, but at the time I wrote those posts I didn't have the checkboxes yet. So I figured the code was showing "None" to indicate that the checkboxes weren't present. I solved this by creating a couple of if statements that checked whether there was a value for p.fashion at all. p.fashion will have the value 'Fashion' if the checkbox has been checked and it will have no value if the checkbox hasn't been checked or if there wasn't a checkbox at all. 

You might say it would've been easier to just edit my old posts and add tags to them, but unfortunately it seems like you can't edit old database entries with Google app engine. It's a problem that I keep running into (when I restyled my website) so if someone has a solution for this, please let me know!

I managed to get it all working, so now I just had one other step to finish: get posts with a certain tag to appear on a page dedicated to that tag. For example, all posts that have the fashion tag should be on the fashion page as well as on the home page. I did this by creating an HTML page for each of the categories and also added these to the menu. Then on each of the pages I added code to make sure that all posts with the belonging tag appear on that page. This is the code for the fashion page:

Specifically the line  {% if p.fashion %} checks whether the post has the fashion tag and if it does it should appear on this page.

I was quite happy with the result at this point, but I still wanted to somehow get my older posts without tags on these pages as well. One option, was just to copy the posts' content into the HTML, but that isn't a very elegant solution, and it makes the HTML quite lengthy. So I decided to make a horizontally scrolling bar with a picture of each old post belonging to that category, and linking that picture to the whole post. Which I did like this (of course the LINK TO PAGE should be an actual link and IMAGE OF POST an actual image):





And now you're looking at the result! I'd love to hear your opinion on this new feature, so let me know in a comment :)

Follow me on: Bloglovin - Instagram - Twitter