Raffa Mele asked 7 years ago
Do you use a page builder?
Do you use a plugin?
Thank you in advance!
;-)
Raffaele
Shawn Hesketh answered 7 years ago
Hi Raffa,
I designed the custom page layouts you see in use on our site, WP101.com. The underlying theme is a Genesis child theme called, Centric Pro.
One of the cool things about Genesis is how easy it is to code custom page layouts, using hooks and filters. Here's an introduction to creating a custom page template in Genesis.
And here's the Visual Guide to all the hooks that are available in Genesis.
Using these hooks, I created a custom page layout, single-tutorials.php that adds a custom function I wrote called, get_video_tutorial to the genesis_after_header section in the page template. Here's a link to the entire custom page layout.
And here's a link to the custom function I wrote to pull in the video on a lesson page, and insert it into the genesis_after_header section.
Now, you won't be able to simply copy and paste this code into your own theme, as it also contains multiple dependencies. This is just a part of the custom theme that I created for this site, and those customizations are part of the unique experiece here at WP101.com. But I'm sharing these so you can see how it's done in Genesis.
While I did not use a page builder like Beaver Themer, you certainly could.
If you want help creating a custom page layout, and you don't want to tackle the code yourself, don't sweat it! You can hire a WordPress expert to knock it out for you at a very reasonable rate. Click here to start a conversation with a WordPress developer: https://wp101.com/help/
Hope this helps!
Raffa Mele
replied 7 years ago Dear Shawn,
this is the best answer, that i never receive before in any forum or group. Very complete.
Sorry about my english, i’m italian and my english could be bad 🙂
Only one question, i have the genesis framework and maybe i can buy the Centric Pro child theme,
the question is if i will apply the custom page layout, and the custom function on that theme, the lesson will be like the lesson on WP101?
Thank you in advance
all the best for you and your business
Raffaele
Shawn Hesketh
replied 7 years ago Happy to hear you found this helpful. You’ll need to remove lines 25-28 in the template file, since those lines pertain to custom functions that I created just for my site. They’ll throw errors on your site, because those functions don’t exist. And you’ll also need to replace line 20 in the functions.php file, since that points to a “non-member” image on my own site. Otherwise, this should give you a good starting point. Remember, it’s only furnished as-is. I won’t be able to provide detailed support for customizations on your site. Hope this helps!
Raffa Mele
replied 7 years ago Last one…..
the template file, i need to upload that in the genesis framework folder or in the child theme folder?
Shawn Hesketh
replied 7 years ago Good question. You’ll upload that template file into the child theme folder. Never a good idea to make any changes to the Genesis framework folder itself.
Raffa Mele
replied 7 years ago Hi Shawn, just to let you know that with the lesson page template, and the custom function, with a bit of css the layout is working good.
thank you again
Raffaele
Shawn Hesketh
replied 7 years ago Hey, that’s great to hear, Raffaele! Happy you were able to put all the pieces together. I’m sure your audience will appreciate the improved layout for watching video tutorials on your site. Cheers!
Shawn
Great tutorial. Can I just ask how the video is being displayed full-width in the custom template? Is that controlled in the video settings or is it a CSS or related setting?
Thanks
Shawn Hesketh
replied 6 years ago Because we’re using the default oEmbed method (just using the video’s URL, not the full embed code furnished by Vimeo), the video is automatically sized to the full width of the container.
Using Fitvids, all good, thanks…
Shawn Hesketh
replied 6 years ago Oh, yeah. That’s an excellent solution I should’ve mentioned. Rock on.