The other day one of my clients wrote to me, “Anita, can you build me something like this?” Attached was a screen shot of page which had the website name and little black boxes centered down the middle. The boxes were actually menu items. She landed on that page when she clicked the link in the Profile on Instagram which led her to a Squarespace website. I mentioned to her that she could create an account with Linktr.ee. which provides a way to add a unique URL to your profile that will render a personalized menu system similar to the one she saw on that website. But she said she wanted it right on her website.
Now, you could just create a page and list out all the things there, but that can get too cluttered and not too special looking.
If you are using a child theme of the Genesis Framework, just follow these instructions to create a really simple landing page that you can customize at any time.
Keep it nice, neat and simple?
This is going to take several steps.
Files being added or modified:
- Instagram Landing Page (Add)
- Functions.php (Modify)
- Stylesheet.css (Modify)
Create the Instagram Landing Page Template
We will be creating a Widgetized Instagram Landing Page Template. First, you might be asking, “Why didn’t you create a custom Instagram Template?” The answer to that is because depending on your child theme and how it has been coded, there may be hooked-in areas that I don’t know about that would need to be removed. As such, the best way is to make a copy of your theme’s Landing Page Template and go from there.
If you don’t have a page_landing.php file in your child theme folder, download this file, unzip and place in your child theme folder. Your can then Skip the remainder of this area and go to “Create the Widget Area.”
- Using your FTP program or in your File Manager of your hosting account, browse over to your Child Theme Folder (i.e., Refined Pro, Pretty Creative, Gallery Pro, etc.).
- Duplicate or make a copy of the page_landing.php file.
- Rename the new copy – instagram_landing.php.
- Open the new file to edit it.
- Look for the line that says – *Template Name
- Change the word from Landing to Instagram Landing
Next, look for a line that starts with: //* Add custom body class to the head
Replace the contents of that area (which should only be several lines similar to below) with the following code. This file add the Instagram Landing page body style. Then save the file.
[gist]https://gist.github.com/cre8tivediva/1aa85612877a67cdcae842bf6b6596ec#file-landing-page-php[/gist]
Create the Widget Area
This next step will register the Instagram widget and create the output. The original code for this was created by Andrea of Nuts & Bolts Media. In her code, she shows you how to create a widget for a single page using the page ID. I have modified her code to use it with our new page template.
Open your Functions.php file. Copy and paste the following code to the very bottom. Then save it.
https://gist.github.com/cre8tivediva/1aa85612877a67cdcae842bf6b6596ec#file-functions-php
Style it Up
The last thing we need to do is style it up.
Copy and paste the following to the bottom of your Style.css file. Or if you are using a Custom CSS plugin, you can add the code there. If you need to create a background color, remove the opening /* and closing */ from Line 5 and add your HTML color code.
https://gist.github.com/cre8tivediva/1aa85612877a67cdcae842bf6b6596ec#file-ig-landing-css
When you are all done, go to Appearance > Widgets and you will now see the “Instagram Menu” widget.
Add Your Widgets
- Genesis Author Profile widget – draft that over, select the larger size image that comes with your theme. In the caption add your Instagram ID, i.e., @cre8tivediva.
- Custom Menu – create a custom menu with the page/posts that you’d like Instagram followers to see when they click your link.
- Genesis Simple Social Icons
- Genesis eNews Extended
You can pretty much add what you want, but most of the ladies want a custom menu and a few Call-to-Action items.
Create Your Page
- Create a New Page
- Name it Instagram or IG
- Select the Instagram Landing Page from the Page Template Dropdown
- Save it. You don’t need to add anything else to the page.
The widgets will automatically show up when you view the page.
Then just share your new link on your Instagram Profile.
If you have trouble doing this or would like help, just send me a note here.
