Link is an adaptation of the “Link” theme by Blacktie.co for WordPress. It is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections. The navigation is a toggle menu fixed to the top of the page. When clicked, the menu flies in from the right. It also lets you add your social media links.

The Link theme is a child theme for Flat Bootstrap.

It automatically adapts for desktops, tablets, and phones. It is based on the standard WordPress starter theme (_S) and the Twitter Bootstrap CSS framework. The theme was inspired by the HTML/CSS themes from Blacktie.co and color schemes from Designmodo.com’s flat UI.

Features include a fixed toggle menu, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more.

This theme is designed to have a “static” home page and so when previewing the theme and when you first install it, a sample page is displayed. The theme is perfect for showcasing products or photos with a midnight blue page header.

Theme Features

  • Fully responsive theme that changes layouts for desktop, tablets, and phones
  • Navbar fixed to the top of the page for easy navigation
  • Modern, “flat” style theme with beautiful color palette
  • Big full-width featured images on any page
  • Full-width colored sections
  • Hundreds of icons from Bootstrap and Font Awesome
  • Variable column footer with 1 to 4 columns

WordPress Features Supported

custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, fluid-layout, full-width-template, left sidebar, light, one-column, responsive-layout, right sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

Page Templates

  • Full-width page with colored page header
  • Full-width page without page header
  • Full-width page with three (3) most recent posts (in columns on desktop)
  • Page with right sidebar (default)
  • Page with left sidebar
  • Page without sidebar
  • Site Index with search, pages, categories, tags, and recent posts listings

We’ve even included the ability to have individual posts be full-width as well.

“Shortcodes”

Our “shortcodes” aren’t really shortcodes… you simply use the standard Bootstrap markup, such as < div class=”whatever”>. If you really like shortcodes instead, you can download either of these plugins. They both work just fine with this theme.

  • Colored buttons
  • Colored message boxes (alerts)
  • Tabbed content areas
  • Collapsible content areas
  • Sliders (carousels)
  • Everything else that the Bootstrap CSS framework has to offer!

Sample Usage

Link Theme Sample

Demo and Download This Theme

Demo this theme Demo

Download this theme from the WordPress.org Theme Directory Download

More Information

Be sure to check out How to Use Our WordPress Themes and our Theme “Shortcodes” Page. You can also check out other other themes that should be ready for release soon as well on our WordPress Themes page.

78 comments on “Link WordPress Theme”

  • Hi. I am trying desperately to figure out how you’ve created that grid in your “Sample Usage”… Do you have any links that would help me out? I’d specifically like to craft an area like that with tweets from different timelines, video stills linking to YouTube videos, etc.

  • Absolutely awesome theme. But I cannot for the life of me figure out how to make my new posts go anywhere but the home page. Ideally I’d like them to post to the home page and another page of my choosing. Is that possible? Is there a plugin I need? Thanks!

    • In WordPress, when you set the home page to be “static”, it makes you also select a second page to be used as your normal blog page. So I would create one page called “home” and another called “blog” or “news”. Point WordPress to those two pages.

    • To add a custom logo, its probably easiest to edit the header.php file. Look for the navbar-brand section and replace the site name with an img tag. You could probably do this with CSS instead, but it would be harder to do.

    • There are theme options under Appearance -> Customize. You can change thinks like site title and tagline, background color, header image, background image, etc. I don’t understand what that has to do with you modifying the PHP directly, though.

  • Hello,
    Can’t complete the installation. WordPress’ theme manager says: “The parent theme is missing. Please install the “flat-bootstrap” parent theme.”
    What do I need to do to install this theme? Thanks in advance.

  • Hi, I’ve used link on one of my personal sites, and all is good, great theme. I’ve activated it on another of my personal sites, and no fa bar ‘icon’ (i.e. the stack of plates icon) is showing, just a square, either empty or showing fa, c9 (in a ‘cube’), depending on the browser. The only difference maybe a wordpress version increment, or a flat-bootstrap version (i can get back with those). Any ideas as to the problem? Many thanks for the theme!

  • Great theme. Like Cody I am trying to place logo in header.php
    Does the img tag need to go in here somewhere/
    //.get_bloginfo( ‘name’ )

    .( function_exists(‘xsbf_spot_replace_oh_with_dot’) ? xsbf_spot_replace_oh_with_dot( get_bloginfo(‘name’) ) : get_bloginfo(‘name’) )
    .’‘;

  • Hello, Thank you so much for these beautiful themes. I am not a developer, but I really like the Flat Bootstrap Developer theme and want to use it. How can I modify the call to action section at the bottom of the theme? If I need to hire a developer, is there some id/pw they will need to know?

      • Yep that was it. Somehow I missed the update link on the Flat Bootstrap theme but it was there when I looked after reading your reply. Thanks for liking the site. Still working on it.

        I was looking into doing a side bar on the right for my facebook and twitter feeds but I only see options for a left side bar. Do I have to change the css to make that happen or is that an addon/plugin/widget?

        Thanks again.

  • Okay, so I’ll preface this comment with the fact that I’m not a designer–just a teacher trying to set up a course website. I love your theme, but is there a way to change the default lightgreen color scheme (for fonts, headers, etc.) across the site? I’ve read through the documentation and haven’t been able to find a place to do so (though I’m GREAT at adding colored boxes now, so there’s that.)

    Any guidance you might have will be greatly appreciated!

    • You can change the link colors by adding CSS like this:

      a { color: #16a085; }
a:hover, a:focus { color: #19B798; }

      Note that links in the footer, copyright section, or any colored sections you’ve added to a page will still use their original link colors. This is so the links look good and don’t have conflicting color combinations.

      I’ll add this to the online documentation here and have already added it to the readme.txt for the next version of Flat Bootstrap.

  • Hello Tim,
    I’m a beginner that just started to use your theme (link), it’s awesome, a lot of potential, at the moment I’m having a hard time trying to customise it so my ideas can fit to it, but I think I’ll eventually get it done.

    Just a couple begginer questions:

    1. In the front page I just want the header image and the three social media buttons that come with the original demo. I’ve taken out all the widgets that come with the demo but there’s a “Leave a Reply” box that I still can’t delete . It get’s between the image and the buttons so I really wish I could get rid of it.

    2. I’ve been reading all of your answers here and I figured out how to put the social media buttons of the original demo on the one I’m working on, but I wanna edit them, I wish I could use other color (on the whole website honestly) and I need to change the icons, cause I want to add Linkedin instead of Google plus.

    If you could tell me how to do this it’ll be awesome. And sorry for my english, I’m from the caribbean and I’m not very very fluent.

    THANK YOU

    • The “leave a reply” is the standard WordPress comment box. Go into your home page and uncheck the box “allow comments”.

      For the social footer, here is the code that you can place in a text widget and then edit it from there. To change the colors, refer to theme’s color palette.

      </div></div>
<div id="sidebar-pagebottom-content" class="sidebar-pagebottom">

<aside id="sample-text-3" class="widget widget_text section clearfix">
	<div class="container"><h2 class="widget-title">Stay Connected</h2>
		<div class="textwidget"><p>Join us on our social networks for all the latest updates, product/service announcements and more.</p>
		</div><!-- textwidget -->
	</div><!-- container -->
</aside>

<aside id="sample-text-4" class="widget widget_text section nopadding fullwidth clearfix">
	<div id="sf" class="textwidget social-footer">
		<div class="row">
			<div class="col-md-4 bg-darkgreen padding-top-bottom">
				<h4 class="ml">FACEBOOK</h4>
				<p class="centered aligncenter"><a href="#"><i class="fa fa-facebook icon-lg"></i></a></p>
				<p class="ml">> Follow Us</p>
			</div>
			<div class="col-md-4 bg-lightgreen padding-top-bottom">
				<h4 class="ml">TWITTER</h4>
				<p class="centered aligncenter"><a href="#"><i class="fa fa-twitter icon-lg"></i></a></p>
				<p class="ml">> Follow Us</p>
			</div>
			<div class="col-md-4 bg-darkgreen padding-top-bottom">
				<h4 class="ml">GOOGLE+</h4>
				<p class="centered aligncenter"><a href="#"><i class="fa fa-google-plus icon-lg"></i></a></p>
				<p class="ml">> Add Us to Your Circle</p>
			</div>
		</div><!-- row -->
	</div><!-- social-footer -->
</aside>

</div><!-- .sidebar-pagebottom -->
<div><div>

      • I’m having a hard time putting a link the social logo.. can you help me?
        Do you have a code that look really the same to the sample one? gray style… I don’t like the style of the social logo code above that you give… And even If I like it I don’t know how to put a link..

        • I want to have the kind of logo on the sample… a simple logo.. not like the given code above.. the logo box by a green color.. and a word say Follow.. 🙂 can you give me the code of the sample, I like your theme so much.. And I want to use it even though I can’t remove the Copyright Theme by… Hehehe.. Thank you for the theme…

          • If you just want one simple logo with the words follow us, then just use this part of the above code:

            				<h4 class="ml">FACEBOOK</h4>
				<p class="centered aligncenter"><a href="#"><i class="fa fa-facebook icon-lg"></i></a></p>
				<p class="ml">> Follow Us</p>

  • hi,

    nice looking theme. you promote it as responsive, however when I open on a screen smaller than computer, the header image is still wider than the screen. Is there something I need to do to engage responsive styles?

      • I don’t believe overflow hidden will work. There is CSS that will truncate text to a single line, but in general people will want it to word wrap. If the issue is with a wide feature image added to a page, you can just wrap your text in <small></small> to shrink the font a bit so it fits.

    • All my themes are fully responsive, but what can happen is that if the text being overlaid on the header image or page-specific featured image is a really long word where normal CSS word-wrapping doesn’t work, it may extend beyond the size of a smartphone screen. If you break apart the text overlay into words, it will be responsive. If for some reason you need a really long word to fit on a single line, you can add a line of css code to reduce the font-size. There are posts here that tell you how to do that, but if you need help let me know and I’ll add more info here.

  • Hello Tim,
    I like the LINK theme very much! Thank you for making such a fine work!
    There are a few things to report/ask:
    1. On one of my websites [ http://rueckfuehrungstherapie-frankfurt-web.de/ ] the sidebar does not disappear in the smartphone display mode, so that the header is not centered. Can you help with that, please? (I use this theme on two other sites and this does not happen there.)
    2. Is it normal that when the page builds up, before the appearing of the header image, a green header background is appearing first!?
    3. It would be nice if one has more options to decide where the widgets (for example in the page bottom) can be placed.
    4. The menu in the sidebar is bottom up in terms of the page order.
    5. When you use pictures in the widgets, it would be fine if you could choose from the already uploaded media. Otherwise you always have to exit the theme adaptation, go into media, copy the link, go back in the theme and paste……
    Sorry to bombard you with all this. I can live and sleep very well with all this, I would not want to change the theme! 🙂
    But it would be fine if you could solve the first issue for me, for the sake of responsiveness. Thanks in advance for any hint!
    All the best to you
    Ulf

    • Dear Tim, I have more information about the error in 1. of my message above.
      I think am responsible for the error myself. I activated the LINK theme after bootstrap was activated and, as I remember, AFTER choosing my header picture. So then the theme / header was getting confused, I think 😉 .
      And it is not the sidebar which does not disappear, but obviously the header menu. I tried some ideas on my own, but I am a complete lay. So there was not much left than deactivating the menu or the LINK theme and activating it again but that was no solution. I think one has to rehabilitate the right theme code regarding the header / header menu and the thing is running. It is much work for me to set up the complete website newly (even when it is not a big one), so I would be very very grateful for any help to wipe out the mistake. It looks pitiful bad on a non-desktop monitor.
      Sorry to bother you with that. If there was a chance to donate for your efforts I would be glad to do so.
      Best wishes
      Ulf

  • Hi Tim,
    I love the Link theme and have just started to use it. I have two questions that I can’t seem to solve.

    1. I’m trying to add a custom logo instead of the title and have tried adding both: .site-title a { background: url(‘http://www.upbeater.com/wp-content/uploads/2015/03/Upbeater-Logo1.png’) left top no-repeat; display: block; text-indent: -9999px; width: 100px; height: 100px; } and to both the custom CSS and the header.php but I can’t get it to work. Can you please explain again how and where to add my logo over the picture to replace the text?

    2. I’m trying to add two of your transparent buttons just under the slogan (between slogan and arrow) but it ends up on the top of the page pushing my background image down. How can I add the buttons over the picture under the text?

    Thanks!
    Petra

  • Hi, I’ve now spent another day trying to figure out how to change the position of the buttons but nothing seams to work. Would really appreciate if you can help me figure out what I’m doing wrong or missing. Here’s my site http://www.upbeater.com/. As you can see, the buttons ends up in the upper left corner and also pushing the background image down,

    This is what I’ve done:
    1. I added 2x Transparent Button to my header.php file. Have tried both in the and in the section and also tried to add a div: Transparent Button

    2. In my style.css file I added in the bottom:
    #header_buttons {
    position: absolute;
    margin-top: 5%;
    margin-left:75%;
    z-index: 1;
    }
    And also tried different positioning as well as trying to replace the # with a dot and changing the name to ie. “btn btn-transparent” and “page-container-fullwidth ” but nothing will reposition the buttons or place them in front of the image.

    Would be super greatful if you can help me with this as soon as you can.
    Big thanks!
    Petra

  • Hi again,
    I solved the issue of repositioning my buttons. It was just a matter of where in my .css file I added the formatting which have to be placed right under /* Square off our buttons */.

    Best,
    Petra

  • Dear Tim,
    I love this theme so much.
    Is it possible to easily install that each page has different header photos?
    Thanks for your support and this theme!!
    Best wishes
    Ulf

  • Sorry, I am really demanding, I now.
    I would like to use the plugin Easy Custom Auto Excerpt again on my archive page, because then my post photo is shown, I can hide the date, can use a `Read More´-button with custom German text etc.
    Now it is ignored by Link theme.
    Is this in any way possible to integrate that?
    Thanks again, Tim! 🙂
    Ulf

  • Hi!
    I have some troubles with de sidebar (right), I put some widget but I can’t see it in my web then.
    (My english is not good, sorry for that)

    • Try adding a simple text widget with just one word in it and see if that shows up. Also, check to make sure you aren’t using a page template that hides the sidebar or is full-width. Can you post a URL to your site so I can see what’s not working?

  • I’m having an issue removing the blank background colour from between the last of my content and my page-bottom widget…where would I go to remove the

    Thanks

  • Hi,

    Can you describe how I many be able to add a navbar or top sticky menu to my installed Link theme? Can flat bootstrap give me the choice to use different stlye menus?

    Cheers,

    Sam

  • I have a similar question, so I am curious to see what the response may be.

    I got as far as using .container-fluid (=full-width content div) instead of .container (.container in Bootstrap has a set width of 1170px on desktop).

    I removed the width and height from the image, and added Bootstrap’s img-responsive class. But then what? Styling the image with width 100% and a set height of for example 330px will of course distort the image. The only way I could achieve the full width image, was by adding it as a background image using cover

    .large-image {
    background-image: url(“/wp-content/uploads/filename.jpg”);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 330px;
    width: 100%;
    }

    Wondering if there is a better way to do this?

    • I’m unclear as to where the images are that you are trying to change. In general, the theme treats images wider than the maximum content area (1170px) as background images. They are padded and cropped as the focus is on sizing to fit the text that is overlaid on them. Images less than 1170px wide are “responsive”, meaning they automatically resize keeping the proper aspect ratio and filling whatever container (div, etc.) they are in.

  • Hi, thank you for this theme. It is cool avec clean but I have a problem.
    I don’t find how can I change my home page. I will add a preview of my post for example but I don’t find the right folder. I create a new page .php who’s name “Home” with the “page-fullwidht” propriety but when I add a test text it’s doesn’t work. So I don’t understand how it’s work. How can I change my home page ? How does it work ?

    Sorry for my english ! I don’t speak very well.

    Thanks you for answer me,
    Elodie?

    • If I understand correctly what you are trying to do, you shouldn’t have to mess with any .php files. The ability to set a page as your home page instead of your blog is built into WordPress. See here. Then if you set the page to “page-fullwidth” (or “page-nosidebar”), our theme will alter the layout of that “static” home page.

  • Good day

    Just installed your theme and it looks great, however i just have one question.How can i remove or disable the bottom page sidebar .i want to remove the following , social sites links,map,address,call to action and the awesome clients section.

    I just want to remain with the header and have that for all my pages.?

    Your help will be greatly appreciated.

  • This is an amazing theme! I have only one issue with it so far: i’m using this theme on my github webpage and the lato and raleway fonts are not being displayed. Can you help me?

    • I’ve not yet built out a “pretty” (HTML) page for my github. Those fonts load directly from Google’s servers, though. Can you check what kind of error message you are getting in the browser? Take a look at the functions.php file in the parent Flat Bootstrap theme.

This site uses Akismet to reduce spam. Learn how your comment data is processed.