How would you like to make use of WordPress' Links Manager? You'll find it is quite useful, if used for the right reasons.
I'd like to show you a way to add links to your WordPress website that not only make use of Links Manager, but also create more content for your website with a quick and easy workflow.
What You'll Be Building
Let me start off with a quick review of Links Manager for WordPress. Links Manager allows you to store a set of external links, also known as your blogroll. These links can be put into categories, imported, exported, added, deleted, and edited. The link categories can also be added, deleted, and edited. You can find the Links Manager in the links section of the WordPress administration panel.
As of Version 3.5, the Links Manager and blogroll are hidden for new installs and any existing WordPress installs that do not have any links. If you are upgrading from a previous version of WordPress with any active links, the Links Manager will continue to function as normal.
If you would like to restore the Links panel to your install you can download and install the Links Manager plugin.
A useful way to make use of WordPress' Links Manager is to display a daily compiled list of external links, such as favorite websites, affiliate partners, songs, funny videos, etc.
The options are limitless, but keep in mind the strategy behind your website. So for example I'm going to compile a list of links of my favorite songs, which hyperlink to the song in iTunes, where they can hear and/or download the song.
1. Creating the Link Categories
Before we start developing the links page template we need to determine what the link categories will be. This can be determined in a number of ways. Some examples are by genre - such as reggae, rap, country, metal - by 5 star rating or by alphabetical order. Since I'm compiling a list of favorite songs I'll organize the link categories in alphabetical order.
Start off by logging into WordPress, hovering over links and clicking "Link Categories". To properly add a link category, make sure you have a name and slug. The description is not necessary. The name is how it appears on your site. The slug is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens. If a slug is not entered when creating a link category, Links Manager will automatically create one based on the name.
Since we are organizing the songs in alphabetical order, make the name of the first link category "#", second link category "A", third category "B", and so on until you reach "Z". Don't make any extra link categories or else they will show up in your navigation on your links page template. So be sure to delete any existing link categories.
2. Building the Links Page Template and Scrollable Menu
Now that all of the link categories are made, we can start building the links page template. So let's start off by copy and pasting an already built page template in your WordPress theme, renaming it to links-page-template.php, and opening it in your favorite text editor.
The reasoning for copy and pasting an already built page template is because you want the links page template to have the same design as the rest of your site.
If you're having trouble finding an already built page template in your WordPress theme look for a set of files that is named consistently like page-contact.php, page-portfolio.php, page-full-width.php, etc.
It's common for WordPress themes to have multiple page templates which are named consistently so they keep organized. You can also open up a file to see if the file starts with the page template identifier, like the example below:
<?php /* Template Name: Links */ ?>
First thing you'll want to do is change the template name (see code above) to "Links". The above code lets WordPress know that it is a template, so it will be available in the drop down menu via the page editor by the template name of which you give it, in this case named "Links".
3. Adding the Scrollable Menu
Now look for the code the_content(). This code retrieves the page content, the content that is added to the WYSIWYG editor for the page.
This is a great spot to put your scrollable menu and a great spot to show your links, which won't appear until you add a new link to one of the link categories you just created. We will get to this later. Below the_content() code in your template add:
<!-- scrollable menu -->
<div id="scrollablemenu">
<?php $cats = get_categories( "taxonomy=link_category&hierarchical=0" );
foreach ($cats as $cat) {
echo '<a href="#' . $cat->cat_name . '" class="scrollablemenubutton">' . $cat->cat_name . '</a>';
}
?>
</div><!-- end of scrollable menu -->
The code $cats = get_categories( "taxonomy=link_category&hierarchical=0" ) returns all the link categories created and displays the category name by using the value ' . $cat->cat_name . '. If you'd like to learn more go to get_categories in the WordPress Codex.
The id="scrollablemenu" is connected to some JavaScript (which I'll talk about next) to make the menu function properly and the class="scrollablemenubutton" is some CSS that will give your buttons a very basic style. I encourage you to be more creative with the CSS, but the basic style will work for now.
To see the basic CSS download the files for this tutorial. Soon I'll show you how to add the stylesheet (and JavaScript) to your page template so it only loads when your page template is loaded by using wp_enqueue_*.
For your id="scrollablemenu" you'll want to add the properties:
position: fixed; top: 10px; /* Make sure the top property has the same value as the javascript file */ padding: 20px; width: 90px; margin-left: 500px;
The position: fixed; and top: 10px; keeps the menu fixed in the location you pick. The top: 10px; style can and may need to be changed to get the results you are looking for.
If you were to put top: 100px; it would give your menu a top padding of 100px from the very top of your website, so if you gave it 0px your menu should be touching the very top of your website. Keep in mind any time you change the top style you also need to change the JavaScript code to match.
Don't worry - we will get to the JavaScript code in just a bit.
I wrapped the menu in a div with a margin-left style to position the scrollable menu on the right hand side. This is because the menu floats on top of the content, so if the menu wasn't pushed to the right the links would get lost behind the scrollable menu. The margin-left: 500px; will most likely need to be changed to fit your website's width.
I also made the scrollable menu as a vertical menu instead of horizontal by making a width of 90px. You can easily change the menu into a horizontal menu by deleting the width: 90px; margin-left: 500px;, but know your content might get lost behind the menu.
Let's talk about the JavaScript file that makes the scrollable menu work. Download the files for this tutorial and open up the JavaScript file called scrollablemenu.js.
$(window).scroll(function(){
$("#scrollablemenu").css( "top", Math.max( 0, 10 - $(this).scrollTop() ) );
});
The two important parts in the code are #scrollablemenu and 10.
#scrollablemenu needs to match your id="scrollablemenu" or it won't work.
Earlier we were talking about how if you change the top: 10px; style you'll need to change it in the JavaScript file accordingly. You can do this simply be changing the 10 amount to whatever amount you changed your top style.
4. Adding the Files
Now that you have an understanding of how the JavaScript code works, let's add it and the stylesheet to the page template so the menu will scroll and the buttons will have some style.
An easy and organized way to do this is use wp_enqueue_script and wp_enqueue_style; it makes it so you don't have to add CSS to another stylesheet or JavaScript to your header.php file. It loads the files only when your page template is loaded, which keeps your website running quicker.
Let's first add the JavaScript file. Take the below code and add to the beginning of your page template (below the template name).
<?php
function scrollablemenu_script() {
wp_register_script( 'scrollablemenu_custom_script', get_template_directory_uri() . '/js/scrollablemenu.js' );
wp_enqueue_script( 'scrollablemenu_custom_script' );
}
add_action( 'wp_enqueue_scripts', 'scrollablemenu_script' );
?>
Now FTP the scrollablemenu.js file to your website hosting. Be sure to change the /js/scrollablemenu.js location to the folder you uploaded the JavaScript file to. Now let's add the stylesheet file right below the code you just added.
<?php
function scrollablemenu_style() {
wp_register_style( 'scrollablemenu_custom_style', get_template_directory_uri() . '/css/scrollablemenu.css' );
wp_enqueue_style( 'scrollablemenu_custom_style' );
}
add_action( 'wp_enqueue_scripts', 'scrollablemenu_style' );
?>
FTP the scrollablemenu.css file to your website hosting. Be sure to change the /css/scrollablemenu.css location to the folder you uploaded the stylesheet file to. Now the JavaScript and stylesheet files will load when the links page template loads.
The main difference between the two codes are the functions wp_enqueue_script and wp_enqueue_style. If you're wanting to learn more about wp_enqueue_* take a look at the tutorial How to Include JavaScript and CSS in Your WordPress Themes and Plugins.
5. Adding the Link Categories
Now let's add the most important part to your links page template... the link categories.
Add this code below the scrollable menu code.
<!-- link categories -->
<div class="linkcategories">
<?php $cats = get_categories( "taxonomy=link_category&hierarchical=0" );
foreach ( $cats as $cat ) {
echo '<a name="' . $cat->cat_name . '"></a><h3>' . $cat->cat_name . '</h3>';
echo '<ul>';
$books = get_bookmarks( "category=$cat->cat_ID" );
foreach ( $books as $book ) {
echo '<li>';
echo '<a href="' . $book->link_url . '">' . $book->link_name . '</a>';
echo '</li>';
} // end books loop
echo '</ul>';
} // end cats loop;
?>
</div><!-- end of link categories -->
Again we are using $cats = get_categories( "taxonomy=link_category&hierarchical=0" ), the code returns all the link categories created and displays the category name by using the value ' . $cat->cat_name . '.
The important part of the code is how ' . $cat->cat_name . ' returns the category name as the anchor name (a name="'.$cat->cat_name.'"). This makes it so the scrollable menu works, so when a visitor clicks on the scrollable menu it will link to the correct section on your page template.
The rest of the code displays the link URL by using the value ' . $book->link_url . ' and displays the link name by using the value ' . $book->link_name . '. This is all accomplished by using the function get_bookmarks( "category=$cat->cat_ID" ).
You can learn more by going to get_bookmarks in the WordPress Codex.
Each line of code is inside a div with the class="linkcategories" (which is added to the scrollablemenu.css file) and each line of code will display the title (name of category) with a h3 tag, the title will also be the anchor name and the links created in Links Manager will be wrapped in li tags, hyperlinked with the link URL.
So you know the code is wrapped in a div with a width of 490px, that way no text will get lost behind the scrollable (vertical) menu. The width: 490px; will most likely need to be changed to fit your website width.
If you do change the width remember to change the scrollable menu div style margin-left: 500px;. It's pushed over right 10px more so the scrollable menu div won't overlap the link categories div.
Your links page template is finished! Be sure to FTP the links-page-template.php file to your WordPress theme root directory.
6. Create a Page With the Links Page Template
Now that the link categories have been created and the links page template is built and uploaded, let’s add a new page using the template.
In your WordPress admin section under pages click add new. First add your page name, second select the Links template in the drop-down menu under Page Attributes (right hand side). Publish and let’s move on to the last step.
7. Add New Link to Link Category
If you already previewed the page you just created and noticed only the vertical scrollable menu was showing that is because you have to add links to the link categories you made earlier. If the link category doesn't have any links, then nothing will show up.
So, let's add a link by clicking add new under Links in your WordPress admin section. Enter the name, such as Daniel Lee Kendall – Lost In The Moment, web address and select the category. Right hand side, click add link, and now you can check your page to see the results. You're all finished!
Conclusion
If you're not getting the results you hoped, play around with the width of each div, and/or create a better stylesheet for the scrollable menu.
Comments