Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you've been working your way through the chapter, you've seen how we can include dynamic content in a WordPress template page. In this video I am going to show you two ways to link to that content. First, we'll take a look at the technique for creating a static link from a post or other page. We'll need one bit of information before we can code that link, the page ID. We will find that in the Dashboard's Page section. WordPress gives you a variety of options for discovering that value. So let's switch back to the Dashboard and then go to Pages.
Now if you hover over any of the pages here, down in the bottom of the screen in the Status Bar, you'll see the path to the page, and it includes post= and a number. In this case, for the All Planets page, it's 78. For the Disclaimer page, it's 93. And for the Membership Benefits page, it's 130. Now if I go in to edit that page, you will also see it listed here, where the page_id=130. It's the same value, and that's the identification number for the page within the WordPress system.
It's important to keep in mind that the page_id on your testing server may be different from the one on your live server, especially if like me, you create a fair amount of dummy posts in the development phase. Always verify the page_id on the live server before entering final links, when you're using this static link technique. So, how do we link to a specific page? Keep in mind that WordPress does everything off the basic homepage. So essentially you link to the homepage and add appropriate URL arguments. Let's try it out.
I am going to go back to my pages. Now let's say we want to create a link to our Planetary 411, and we want to show the information from, say, Mars. So first I need to get the page_id for Planetary 411, so let me just click on it. It's a little easier to see up here in the center of the page. And we see that the page_id is 142. Okay, so let's head on over to Posts and choose Mars is Open for Business! And then we will add some text in right at the end of the first paragraph.
See detailed info on Mars. Now I am going to double-click on Mars to select it and go up to my little toolbar where I can click Insert/edit link. And although by default WordPress puts in an http:// prefix, we don't need to go with that. We can just put an index.php, which is the homepage, and then a question mark for following arguments, and the key term page_id= and our page value, which was 142.
Now, this will get us to the basic page, but it doesn't pass the needed argument to populate our recordset. So let's add that id=4 string, because Mars is the fourth planet in our database, as well as in our solar system. So &id=4. All right let's add that link, update the page, and let's view that post. Okay, Mars is Open for Business! There is our link. Click on the link and there is our Planetary 411 page with the information from Mars.
That technique works well for static links, but how do you handle a more dynamic situation, where you have a list of links generated from the database on the fly? Dreamweaver has the answer. We'll first create a page that lists all the planets and to do that, I am going to start with my planet.php that we developed in a previous video, and I am going to save it as planets.php. So File > Save As, and let's just add an s.php there, click Save. And now we want to change the template name from planet to planets, so add an s there and now we are ready to do some work on the dynamic side.
The cool thing is, once you've set up the database connection and recordset in one template, you can very easily adapt it in all the others. Let's modify a record set so that we see all the planets. So let's open up the Server Behaviors panel and double-click on the recordset. You can ignore this splat that you see there. That's because we have our PHP template name up top and typically Dreamweaver prefers to have its PHP code upfront. But it can handle it.
So double-click on Recordset to open up the dialog box, and let's remove the filter by setting Filter to None so that all of the records in our database, all of the planets in other words, are returned. And let's go ahead and change the sort order so that it's sorted by planetName. Click OK. Next, let's change our data output from a table representing info about a single planet to a list of planets. So I am going to go down to find my table by going into Split view for a moment and then locate the code for the table.
Use Select Parent Tag to grab it all and delete it, and now we are ready to insert our dynamic data. So let's switch to the Bindings panel and choose planetName > Insert. And there you see the PHP code for the planetName. I am going to replace my cursor right after that and then do a Shift+Return, which will bring in a line break tag. You could of course just also type in the code, but that's a little faster. Okay, so now I want to select all this new code and then one more time switch over to the Server Behaviors panel and from the dropdown list choose, Repeat Region.
Now the Server Behaviors panel will not work with Code view, so you have to click in to Design view. But once you do, you'll see your dynamic information there, and we can extend the selection to include the line break by holding down Shift and pressing your right arrow once. So now all that new code is selected and we can click on Add Server Behavior and choose Repeat Region. We only have one recordset on the page. If there were multiple ones, you can choose the one you want from the list, unless of course get all of the records, in case we go over 10 planets in some future date.
I will click OK and our repeat region is added. Now unfortunately, Dreamweaver is not without a little gotcha here. Several times it's happened to me that after I've changed a recordset or added a repeat region, if I go back up to the top of the code, I would find another require once here. Now while it doesn't happen all of the time, it does seem to be something that you want to keep an eye out for. We are ready to test our new template page, to make sure we're getting all of our planets. So I am going to go ahead and save it, and let's head over to WordPress, and let's create a new page. Enter a title.
After entering the title, you can, if you want, also enter in some intro text-- I will put in a little placeholder here--and change our template from Default to Planets. And now let's publish the page. Okay, we are ready to view it, so I will click View Page. And there is my intro text and all of our planets alphabetically.
Looking pretty good. All that's left is to create a link. So let's head back to Dreamweaver. I am going to select the planetName code, and let me open up my Property Inspector and choose Browse for File. And then I am going to navigate to the index.php file, which is in our template folder, not the one on the site root. And then let's add our parameters. Click the Parameters button, and the first parameter is going to be page_id, page_id, and the value is, if you recall, 142, which was a page_id for our dynamic page.
Press Tab again, twice, to go and enter another parameter. So now we'll enter id in the Name column, press Tab twice, and this time click on the lighting bolt, because we are going to add dynamic data. And from the recordset choose id. Click OK and then OK once more to close out the Parameters box, and there you can see the entire string is built up for us, and click OK one more time. Okay, let's save that page, and now let's head back to our browser. I'll click refresh.
Now we have links for all of our names, and let's see if we can get to Neptune. There is Neptune. All right, it looks like everything is working perfectly. You can use this technique to build master detail page sets right within WordPress. How's that for cool?
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.