Creating ‘Training Times’ section with WordPress/relationship databases

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

7YClE2aF

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.

332

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

orYLm-SU

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.

(Source: http://www.techrepublic.com/article/relational-databases-defining-relationships-between-database-tables/)

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.

lQc4j18x

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.

333

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.

334

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

xv2Ne754

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.

335

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.

336

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’ –

337

(Source: https://gist.github.com/Shelob9/7832561#file-2-related-fields-example-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.

TqcG1Efm

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.

O2O9x9ps

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 https://gist.github.com/Shelob9/7832561#file-2-related-fields-example-php and copy it into the file ‘page-services.php’ like it was done earlier.
337

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.

338

Go to https://gist.github.com/Shelob9/7832561#file-1-pods-loop-general-example-php and copy line 9-12 from the code and place it above ‘$related = $pod->field( ‘relationship_field’ );’  –

 

339

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 –
340

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.

xNw92iu2

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’.

yn5gfZpa

It has changed correctly so it looks all fine.

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

yUYipspH

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 –
0h_0nBgd

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 –
341

Next step

Make outputted data look like they suppose to –
7YClE2aF

Sources:

 

 

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 –
328

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

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.
(Resource: https://codex.wordpress.org/Class_Reference/WP_Query)

Refresh the page and see the result –
330

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.
319
To make this area dynamic, simply add this piece of code –
320

(Resource: https://codex.wordpress.org/Function_Reference/wp_get_recent_posts)

This is what static code looks like –
321

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

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

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.
312

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 –
313

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

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

315

Check results on the page –
316

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

317

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 –

302

Images of staff need to be added into red area.

Create a new pod –

274

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’ –
303

Fill in fields –
304

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

305

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

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

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

Go to code and add this code –
309

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 –
310

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

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 –
296

Create a new pod –

274

Fill in information –

297

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 –
299

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

Refresh the page and see the result –
301