Creating ‘Training Times’ section with WordPress/relationship databases

This is what ‘Training times’ section looks like static –


Next step is to turn this static section into dynamic with WordPress.

First of all, this section will be created with Pods therefore decision on what the structure of Pods is going to be like, needs to be made.

First thought about the structure of Pod

Create a Pod called ‘training times’ and then in there create fields such as start time, end time and session.


Then go to actual pod and create Monday, Tuesday etc. and assign start time, end time and session to days of the week.


However, this initial thought about the structure of Pod has a problem as there are more times and sessions in one day (most of them are 3 different sessions). Therefore this is not going to work. Another potential idea will be to create more start – end time and session (all together 3 for each day).

After further thinking, conclusion was made that this is also not a good way of solving the structure out as no one can guarantee that the club is going to have maximum of three sessions per day, i.e. the club may decide to run a 4th session.

Next solution would be to create two Pods with a relationship (relational databases).

Creating Pods with a relationship (relational databases)

There are relationships like

  1. one to one – one order may have one invoice
  2. one to many – one person may have many orders
  3. many to many –  the same session running on multiple weekdays

This section needs to have one to many relationship as one day needs to have many sessions. Even on the days were there is one session, it will still be a one to many because it has the possibility to have many sessions.


Next step is to create two Pods as one weekday will have many sessions –

  1. Weekdays
  2. Sessions

In ‘Weekdays’ pod create field called ‘Weekdays’ and in ‘Sessions’ pod create field called ‘Weekdays’ too. Then link them through relationship.


By linking them through relationship, one to many relation has been created. i.e. one weekday has many sessions.

‘Start time’ and ‘End time’ has been created in ‘Sessions’ pod so when session is created, the client will be able to set the date and time, along with a tickbox to select the day. krts8SWP

The post title will be used for session description to tell users what type of session is available.

However,  a few sessions run more than in once a week, i.e. kadets (5-9) are on Monday and Thursday. This is change that needs to be made in Pods Admin area.

Go into the ‘Additional Field Options’ tab of the ‘Weekdays’ field in ‘Sessions’ pod. Change ‘Single select’  to ‘Multiple select’. Also Format of the field can be changed but this time is Checkboxes right.


By setting ‘Multiple Select option’ there is no longer a one to many relationship, there is many to many as the same session can run on multiple weekdays.

Now that it is all set up, days of the week need to be created. Go to Pod ‘Weekdays’ and create Monday, Tuesday, Wednesday etc. At the moment all sessions of the club run on all days of the week apart from Friday and Sunday but these two days will be still created as the club may decide in the future to run sessions on them days.


This is what it looks like after opening one of the days –


Session tickbox says ‘Weekdays’, it should say ‘sessions’, but this is a small change that can be done any time by editing the label in the pods admin.

Now, go to ‘Sessions’ pod and create all sessions that are run by the club.


However, there are a two sessions that are run on different days in different time therefore, decision to create session with the same name just assign it to different day and time has been made. This is because training times are going to be loop through each weekday. Then, from each weekday, loop through the sessions that belong to that weekday. This means that the right session is going to be pulled in by certain day. Also weekdays are not going to be in alphabetical order therefore this will need sorting out later on.


After creating sessions, all the work in back end is done, now it is time to add code in order to display the content.

Creating loop to display the content

This is the code that needs to be add to the code in ‘page-services.php’ –



Copy and paste the code into own code and change ‘pod_name’ to ‘weekday’, ‘relationship_field’ to ‘sessions’ and ‘some_field’ to ‘weekday’ in order to match names of fields and pods with the ones that has been created in Pods Admin.


Save and check the result on the website. However, it is not displaying anything on the website therefore there must be some kind of error. Also noticing that actual days of the week like Thursday – at the bottom, there should be 3 sessions ticked as that is what it is set up in Sessions but there is only one.


Further investigation about why this code is not working and why there are not more sessions ticked in certain weekdays will be done.

Investigation of occurred problems

First of all, lets sort out why there are not more sessions ticked in certain weekdays.

This may be happening because ‘multiple select’ on both sides of the relationship (on weekday and sessions) has not been selected. However, after check, this is not the case as multiple select is on both sides of the relationship.

Next question is ‘What happens after ticking multiple sessions and save, do they just untick after it is saved?’
After testing that, ticked sessions stayed ticked after saving so this suggest that it is working as it should be so this problem is solved.

Next step is to find out why the code is not working.

Go back to code on and copy it into the file ‘page-services.php’ like it was done earlier.

The ‘get_the_id()’ is only there if this is used on a specific page, so delete that and replace it with $params = array(); For now, params will be empty, this should go above $pod = pods( ‘weekday’, $params ); . Pod_name will be replaced with ‘weekday’ as this is name of the pod. ‘relationship_field’ will be replaced with ‘sessions’ and ‘some_field’ with ‘start_time’. Also copy the full line and create new one called ‘end_time’.

$someField = get_post_meta( $id, ‘start_time’, true );
$endTime = get_post_meta( $id, ‘end_time’, true ); Zjx_jmZz

Save the code and check the result.
Unfortunately, it is not outputting anything.


Go to and copy line 9-12 from the code and place it above ‘$related = $pod->field( ‘relationship_field’ );’  –



Also the copied code needs ‘s’ removing from variable ‘&pods’ to ‘&pod’ in order to match already existing variable in the code.

Another step is to add curly brackets at the end of the full code because if statement and a while statement was opened when the lines 9-12 were copied and pasted into the code and the statements need to be closed otherwise it will error. Simply add two closing curly braces for both the while and if under the code within the while loop, so it will look like –

Save the code and check the result.
Unfortunately, it is still outputting nothing.

Next step is to check if relationships are working. To do that ‘echo $pod->total();’ bellow ‘$pod = pods( ‘weekday’, $params );’ to see if it is outputting any content.

After checking on the website, there was number 7 outputted. However, possibility of having white text showing on white background were there and this could be the reason why there is only number 7 displayed, therefore the viewing source code was necessary to find out if that was the case. Source code contained only number 7 so this was not the case.

This suggested that the relationships may not be working therefore adding ‘var_dump($related);’ under ‘$related = $pod->field( ‘sessions’ );’  This is useful function to check if relationships are working right.


Result showed that there is an empty array which suggest that something is broken on the weekday relationship to the session.

Next step is to try and edit one of the weekdays posts in Weekdays pod – for example Monday has been changed to Mond. Go to ‘Sessions’ pod and check if anything changed in field ‘Weekdays’.


It has changed correctly so it looks all fine.

Go to ‘Weekdays’ pod and click on any post to check fields –


Here is the problem as one of the field has been named incorrectly. Click ‘Pods admin’ on the bottom left, then find ‘Weekdays’. There is a field called ‘weekdays’ which should be called ‘sessions’. Edit that.

Check the result on the website and it should work now –

This is displayed because there is still ‘var_dump($related);’ under ‘$related = $pod->field( ‘sessions’ );’. Delete ‘var_dump($related);’ and it should all work fine –

Next step

Make outputted data look like they suppose to –




Displaying 3 blog posts on the front page with WP_Query

There is ‘Our recent post’ section on the front page that looks like this –

To make this dynamic, open ‘front-page.php’ and find ‘Our recent post’ section. Then add –

To display only three latest posts on the page add 327

and after that follow adding the variable “$the_query” to if and while statement.

Refresh the page and see the result –

At the moment, blog posts are all different sizes but once the client starts to upload the content, it’ll be all one size.

Making recent posts in footer dynamic with WordPress

Footer area consists of social media icons, some pages area, recent posts area and join us button.
Recent posts area is the only place in the footer that is not dynamic yet.
To make this area dynamic, simply add this piece of code –


This is what static code looks like –

This is what the code looks like after adding php code –

The code is posting only 5 most recent posts from the blog and displaying title. The result –

This matches titles of blog posts however, there are only testing blog posts therefore titles do not make sense.

Changing the way of adding images of staff into ‘About’ section

The previous post described process of adding images of staff into ‘About’ section in great detail. However, there was finding out that that is not the right way to add and echo out images.

Adding images into content box is not the correct as there is a high risk of website crashing when adding more images as it might not recognise format of uploaded photos. Also, echoing images was done wrong as content was trying to be echoed out in image tag which is completely wrong.

Therefore adding a new field for an image in Staff photos pod is needed. Simply go to ‘Pods Admin’ and choose ‘Staff photos’ and create a new field there. Notice that there are two fields that has been already created earlier.

Save pod. Go to Staff photos in menu and click on one of the staff there. Notice that there is new field that has been created – Image –

Delete the image from content box and add image through the field image –

Click on ‘Update’ and go to code.
Create a new variable to be able to echo out the images.


Check results on the page –

Add images of all staff the same way in admin area. Then check result on the page.


Last two images are still in not right layout however, ending tag that was there in not there anymore.
This is the right way of adding images into the website.

Next step

Add images of boxers to the website the same way.


Adding images of staff to ‘About’ section with Pods

This is what About section looks like at the moment –


Images of staff need to be added into red area.

Create a new pod –


Fill in information exactly the same way as described in previous posts.

Fields need to be added for this section as every staff has different job role and mobile number.

Click on ‘Add field’ –

Fill in fields –

Add phone number field and for field type choose phone option –


Click on Save button and this is what it looks like after fields has been created –

Go to ‘Staff photos section’ that has been just created and click on ‘Add New’ –

Fields that has been created are added at the end. Fill in information and click publish.

Go to code and add this code –

Notice that new variables were created in loop in order to display created fields. Then just simply echo them out.

Save and refresh the page, check the result –

Go back to ‘Staff photos’ section and add all members of the staff. Then refresh the page to see result –

Next step

Last row of photos are apart therefore the next step is to find out why it is doing that. Also find out why there is closing tag visible under every image.



Creating ‘Contact’ section with Pods

Section is red needs to be dynamic just in case contact details for the club changes –

Create a new pod –


Fill in information –


Go to ‘Contact section’ that has been just created and click on ‘Add New’. Add text that needs to be dynamic so after it’s added, it will look like this –

Go to file ‘page-contact.php’ and in the place where the content will be displayed, add code –

Refresh the page and see the result –



Creating Sponsors section with Pods

This is what ‘Sponsors section’ looks like at the moment –
There are no logos of sponsors, only empty spaces.

Go to Pods Admin and press ‘Add New’, then choose ‘Create New’.


Create a new pod and save it.

Then go to ‘Sponsors’ shortcut on the left and add new fields to it by clicking on ‘Add New’. Then add title and click on ‘Add Media’ button in order to add image. Once the image is added, it will display in text editor. Then click on ‘Update’.

Next step is to add code to file.

Open ‘front-page.php’ file and find ‘Sponsors’ section. In the place where there is code for logos, place this code –

Loop is created there again. Name of the pod is called out and also setting to display all content in order that it is in pod is set up. All content is stored in variable $content and echo out.

Save this and check the result on the page –

In this case, all logos were added into pods first and then has been echo out therefore all logo images are visible.




Editing short video for the website

On last client meeting, short boxing video was filmed with the purpose of adding it to the website for the effect and advertorial purposes. The video will be added to Our services section instead of image. Editing of the video is needed to add more effect and create better experience for the users. Adobe Premier Pro CS6 is going to be used for editing the video.

Editing process

Open Adobe Premier Pro CS6 and create a new project. Choose name of the project and location of files.


Choose required settings for the video.


Go to ‘File’ and ‘Import’ to import the video. This is the working screen.


First of all, the video needs transforming as it was filmed on the side.

Go to ‘Effects’, ‘Video Effects’ and find ‘Transform’.


Expand ‘Transform’ and drag ‘Camera View’ option to the video on the timeline.


Go to ‘Effect Controls’ and choose ‘Camera View’ and then ‘Roll’ option. Adjust ‘Roll’ option to 270 and the video should be in the right position now.



However, more adjusting is needed as the video is too zoomed in. Choose option ‘Distance’ below ‘Roll’ option. Set it to ‘500’ and also ‘Focal Length’ to 380.

113 112

Background colour is white however, black is required. Click on ‘Fill Color’ option and change it to black.


Once that is done, delete the sound from the video as it is not needed.

Right click on video timeline and select ‘Unlink’. This will unlink video from the sound.


Then highlight sound part and press ‘Delete’. Now there is only video.


Even thought the background has been changed to black colour, there is also another background that needs to be turned black as there is gym environment around the boxer. Further research has been done on how to select the boxer and put it to black background. Unfortunately, there is no software accessible that could do that and even if there was, it would take too much time to do it. Therefore the decision to leave the video out of this project has been made because of lack of technical skills and also missing software that is required for this editing.

Alternative solution

Alternative solution to the video is going to be advertorial image promoting the club –

Services section on home page – making icons dynamic

In the previous posts, possible solution on how to add different images to the service section was discussed however, after trying to add icons dynamically as images, it did not work.

Another way of doing it

The icons are powered by Font Awesome therefore there is different way of pulling them in. To do that, relationship needs to be created. There are different relationships that can be set ‘Custom defined list’ is going to be used.
(To read more, click here)

Go to Pods admin > edit ‘Services’ > edit ‘Icon’.
Under ‘Field type’ choose ‘Relationship’ and then ‘Related to’ – Simple (defined custom field).
In ‘Custom Defined Options’ add exact names of

  • <i class=’fa fa-trophy‘></i>
  • <i class=’fa fa-comments‘></i>
  • <i class=’fa fa-pagelines‘></i>
  • <i class=’fa fa-users‘></i>


Template is “value|label” – “trophy|Trophy”
this means “what is in code”|”what user see”

Save it and go to ‘Services’ and add Icon names to each text as required –

Go to code and add <i class=’fa fa-<?php echo $type_of_pod->field(‘icon’);?>‘></i> instead of <i class=’fa fa-trophy‘></i>

Now, all icons are pulled in dynamically with CSS. Refresh the page and see the result.