Build a Drudge Report website in WordPress

By all measures, the Drudge Report website is impressive. If you trust the on-site statistics, Matt Drudge’s news site gets almost 25 million hits per day, or 750 million hits per month. If you trust average cost per 1000 impression stats, this is good for over $2 million per month in ad revenue … per ad. For a site that is, effectively, a single page, this kind of traffic and revenue is almost unheard of.

The Drudge Report combines editorialized headlines with links to other sites to create one of the most up-to-date sites on the web, particularly on political topics.

 

drudge_report_website_screenshot

 

While not a paragon of design, the Drudge Report format is an important one. This site was one of the first examples of curation on the web, a one-stop shop for conservative-leaning news without any real content of its own. It’s the first, and sometimes only, place many people go as their primary source of news. If you want to create a site for news aggregation and curation, you can do a lot worse than looking to the Drudge Report.

I created the WP-Drudge WordPress theme for just that purpose, to emulate the Drudge Report format, and style if you’d like, to create authoritative sources for news in specific niche topics. The format is proven and there is no better content management system (CMS) out there then WordPress. Combine these two together and you have a powerful tool for curation.

This post walks through how to get your WP-Drudge theme up and running with the exact style and format of the Drudge Report website. Using theme settings and specific widget configurations, you can have the Drudge Report look and layout setup in less than an hour.

1) Get the WP-Drudge theme up and running

The first step is getting all the technology in place that will power the site.

First, purchase the WP-Drudge theme here. If you’re just setting up a single site, purchase the single site version (you can upgrade at any time). If you’re planning on building several sites like this, the Developer version allows for that.

Next, install and configure WordPress on the host of your choice. Steps are here along with a recommended web host. This is the most technical part of the process but if you choose a web with a WordPress installer, like Fused, it’s very simple, no technical expertise involved at all.

Once you’ve reached the end of the steps linked above, you will have WordPress and the WP-Drudge theme installed. Congratulations! The hardest part of this process is over.

2) Set up link categories for each section

The Drudge Report has two general types of links on the site: “temporary” links pointing to news stories that fall off the home page after a certain amount of time (they remain in archives) and evergreen links to major news sites and columns that stay up  for a long time.

The first type, the time-ordered news links, are called Posted Links in WP-Drudge. These use the title text and a link to create a linked headline to another site (or to a page on your site). They are ordered by publish date, from most to least recent, and are set to show only a certain number; the rest are archived and can be viewed on archive pages. On the Drudge Report, these are not really categorized in any way but appear in 3 columns near the top of the site.

The second type, the links to major sources, are called Static Links in WP-Drudge. These use a title text and a link as well but are ordered any way you’d like: alphabetically, by rating, or random. On the Drudge Report, these links appear at the bottom of the columns, grouped roughly by type.

Posted Links and Static Links each have their own categories which can be used to organize the links in different places. First, we’ll add Posted Link categories:

  1. Log in to the wp-admin of the site and go to Posts > Categories
  2. You will see a form on the left to add a new category. We’re going to add 3 of them here: Column 1, Column 2, and Column 3
  3. Enter the category name in the “Name” field and click Add New Category at the bottom of the form. Repeat for all three categories
  4. Add one more category called “Top Links” to power the links on the top left of the site
  5. You should now see those four plus “Uncategorized” in the table on the left

Super easy! Now you have the 3 containers for the three places links will appear on the homepage.

 

drudge_report_website_categories

 

Now we need to add containers for the Static Links.

  1. In the wp-admin, go to Links > Link Categories. The interface here is similar to the post categories.
  2. The easiest thing to do here is to again add 3 categories for the 3 columns. If, however, you’re going to be grouping these links together based on type, add a category for each type.
  3. Enter a name in the “Name” field and click the Add New Link Category button.
  4. Repeat for all the Static Link categories you’d like to use.

Just as easy. You should now have a table similar to the one above with all the Static Link categories you’ve added. You’re on your way to your own Drudge Report website!

3) Add Posted and Static Link widgets to the site

The homepage of your WP-Drudge website is broken into columns and each column accepts little blocks of dynamic content called “Widgets” in WordPress-speak. The WP-Drudge theme comes with several widgets that make displaying different types of content very simple.

We’ll add the 3 Posted Link  widgets first, then the Static Link widgets to create the look we’re going for here.

  1. In wp-admin, go to Appearance > Widgets
  2. If this is a brand-new install, you’ll have several widgets in the Left Column already; click each one, then click Delete to remove them. They can be added later if you’d like
  3. Scroll down to the block of WP-Drudge widgets and look for “WP-Drudge Posted Links”
  4. Click on that widget box, click on Left Column, then click Add Widget; you can also click, hold, and drag the widget into the “Left Column” area on the top right
  5. Leave the “Title” field blank and click the “Show Title” checkbox to deselect it
  6. For “# of links to show,” enter 20
  7. For “Category to display,” make sure “Column 1” is selected
  8. Leave the rest of the settings as they are and click Save
  9. Now, start over at step 2 and add another Posted Link widget, this time to the Middle Column section
  10. For “Category to display,” select “Column 2”
  11. Again, start over at step 3, adding a Posted Link widget to the Right Column section and selecting “Column 3” for the category

Now we’ve got our Posted Link widgets in place on our Drudge Report website. Don’t look at the homepage quite yet as you won’t see much of anything. Let’s get the Static Links in place and we’ll move on to the settings that make the site look how it should.

  1. Still in the Widgets section, look for the WP-Drudge Static Links widget
  2. Like with the Posted Link Widget, click and select the Left Column section or drag and drop it there
  3. Leave the “Title” field blank and click the “Show Title” checkbox to deselect it
  4. For “Category to display,” make sure “Column 1” is selected or select the category you’d like to use here
  5. Leave “Order By” as “Alphabetical”
  6. Click Save
  7. Repeats steps 1 through 6 with your other Static Link categories, placing them by column or wherever you’d like if you used descriptive category names

We now have all the widgets in place to display your content. Not too bad, right? Let’s move on to the fun part: settings!

4) Setup the theme for the Drudge Report website look and feel

While certainly not beautiful, the Drudge Report definitely has a specific look to it. The options page is where we set this all up.

  1. In wp-admin, go to Appearance > WP-Drudge Options
  2. Click the Header tab and make the following changes:
    1. Featured box location: above
    2. Top link listing: Posted Links – Top Links
    3. Top link limit: 6
  3. Scroll down and click Save changes
  4. Scroll back up, click on the Borders and colors tab, and make the following changes:
    1. Header color: #000
    2. Link color: #000
    3. Visited link color: #000
    4. Text color: #000
    5. Vertical borders for columns: medium
    6. Horizontal border for widgets: medium
    7. Horizontal borders for links: medium
  5. Scroll down and click Save changes
  6. Scroll back up, click on the Typography tab, and make the following changes:
    1. Featured box font: Arial
    2. Featured link size: 48
    3. Header font: Arial
    4. Header text size: 32
    5. Header bold: yes
    6. Posted link text size: 13
    7. Post and page text size: 13
    8. Underline posted, static, and featured links: yes
  7. Scroll down and click Save changes
  8. Scroll back up, click on the Images tab, and make the following changes:
    1. Featured image size: 450
    2. Posted link image location: top
    3. Posted image size: 200
  9. Scroll down and click Save changes
  10. Scroll back up, click on the Other tab, and make the following changes:
    1. Content width and layout: fluid (full)
    2. Overall spacing: tight
  11. Scroll down and click Save changes
  12. Scroll back up, click on the Advanced tab, and make the following change:
    1. In the “Additional CSS” box, paste this:
      #header #logo-or-name {font-family: impact; text-shadow: #ccc -1px 0, #ccc -2px 0, #ccc -3px 1px, #ccc -4px 1px, #ccc -5px 1px, #ccc -6px 2px, #ccc -7px 2px; font-size: 80px; font-weight: normal; font-style: italic; text-transform: uppercase; color: black; text-decoration: none}
  13. Scroll down and click Save changes

Once this is complete, you’ll have styles and a layout in place that mimics the Drudge Report website. Now, let’s add some content.

5) Add links, headline text, and images

Arguably, what makes the Drudge Report so popular besides breaking news very early is the editorialized headline text attached to the links. This gives the site a consistent feel and tone while pointing to websites that might not share the same viewpoint. In this way, the Drudge Report creates a unified viewpoint supported by sites all over the web.

You might not have a tone or a viewpoint in mind when you start your site but writing the headlines for each link will infuse your site with a voice: yours. Just this in itself can add value, particularly if you’re well-read or a professional in the field that the site is centered around.

So, let’s walk through the process of creating a few links on the site. This first batch of steps is for creating the links directly in the wp-admin. These steps are covered in more detail on the documentation page here, including a video.

  1. First, as always, make sure you’re logged into your site’s admin area
  2. Go to Posts > Add New in wp-admin
  3. In the first field at the top, write your headline text. This will be the black text that links to the article you’re posting. Be creative but keep it succinct. You want to allow people to quickly scan the site and find what they’re looking for.
  4. Scroll past the content editor (which you can turn off on the Advanced tab of the options page) to the “Outbound link” field. Paste the direct link (URL) to the article you’d like the text to link to. This should start with “http://” or “https://” to be considered a valid URL.
  5. If you want this post to appear at the top of the site with a large image and text, select the “Featured link” checkbox. For the first few links on the site, let’s leave that deactivated.
  6. If you want an image to be posted, there are two options covered here.
  7. Finally, we want to indicate where on the homepage that the link should be displayed. In the right-hand column, look for a box titled “Categories.” In that you’ll see the 3 columns added before. Just pick a column and you’re ready. If you’d also like the link to appear in the block of links at the top left of the site, choose the “Top Links” category.
  8. On the top-right, in the “Publish” box to make this link live on the site.

If you go to the homepage of your site and refresh the page (click the site name on the top right in the wp-admin screen), you’ll see your brand new link and settings at work:

 

drudge_report_clone_stage1_screenshot

 

Take some time to add a few more links following steps 2 through 8 above and you’ll start to see the site really come together:

 

drudge_report_clone_stage2_screenshot

 

The Drudge Report displays additional links on the top left of the site and in large text above the logo to attract attention to specific breaking news. For the links on the top left, add a few of the posts to the “Top Links” category. For the large featured story at the top, check the “Featured link” checkbox, mentioned above. With those in place, the site should have that distinct “Drudge” look:

 

drudge_report_clone_stage4_screenshot

 

Links take less than a minute to add and publish immediately (or in the future, if desired). If you want to post links directly from the article you’re viewing, you can use our modified Press This plugin to post even faster.

This how the bulk of the content will be added to your own Drudge Report website. Next, lets add our Static Links.

6) Add Static Links

Static Links are the evergreen links to sites and blogs that you want to promote. This helps to make your site a “one-stop shop” for your topic of choice. These are probably the site where you find most of the Posted Link content.

Static links are as easy to add as Posted Links using the steps below.

  1. First, as always, make sure you’re logged into your site’s admin area
  2. Go to Links > Add New in wp-admin
  3. For “Name,” add the text for the link, usually the site or blog name. The Drudge Report adds these in ALL CAPS
  4. For “Web Address,” paste or type in the direct link (URL) for the site to link to
  5. For “Categories,” pick the location of the link
  6. Scroll up and click the blue Add Link button

And that’s it! The Static Link widgets can support a link description and an image, if you’d like, but to keep the Drudge Report aesthetic, we’re going to keep it simple. Add a few of these links for each column and the site will start to look quite familiar:

 

drudge_report_clone_stage3_screenshot

 

7) Add advertising

The WP-Drudge theme comes with a simple advertising manager that allows you to add linked image ads (typically used if you’re selling your own ads) or snippets of code (typically used if you’re signed up for an advertising network like AdSense or BuySellAds). Selling ads or signing up for an ad service is a bit beyond the scope of this tutorial so we’ll assume that you’re already signed up for a service (we’ll cover ad services in a future post).

The Drudge Report typically uses 3 common locations for its ads (listed with the width x height of each placement):

  • Top of the site (300 x 250 or 728 x 90)
  • Left column, in between the news and static links (300 x 250)
  • Right column, in between the news and static links (300 x 250)

Once you have images and links or code snippets for these placements, add them using the steps below:

  1. In wp-admin, go to WPD Ads > Add a new ad
  2. Follow the steps

    here to create this ad and show it on your site. For locations

    1. For the ad at the top of the site, choose “Site top” from the “Location” drop down
    2. For the ad in the left column, choose “Widget – 1” from the “Location” drop down
    3. For the ad in the right column, choose “Widget – 2” from the “Location” drop down
  3. Once you’ve added these 3 ads, click on WPD Ads in wp-admin and make sure all 3 are listed
  4. The ad at the top of the site is now live but the column ads have to be placed using widgets. In wp-admin, go to Appearance > Widgets
  5. Find the “WP-Drudge Ads” widget, click on it, select “Left Column,” and click Add Widget
  6. In the widget that was added, click Save, then drag it to the space between the Posted Links widget and the Static Links widget in that column
  7. Find the “WP-Drudge Ads” widget again, click on it, select “Right Column,” and click Add Widget
  8. In the widget that was added, select “Widget – 2” from the “Choose the widget ad group” drop-down, click Save, then drag it to the space between the Posted Links widget and the Static Links widget in that column

With these 3 ads in place, we’ve got the layout complete:

 

drudge_report_clone_stage5_screenshot

 

8) Tweak to your heart’s content

This tutorial gets us to the basic Drudge Report website layout that we were looking for. The WP-Drudge theme, however, can do a whole lot more:

I hope this was helpful and good luck in creating your new site! If you have any questions about the steps above, leave a comment below and I’m happy to clarify.

One response to Build a Drudge Report website in WordPress

  1. Before You Mock that App's Design... Walk a Mile in Its Shoes

    October 6th, 2015 at 10:39 am

    […] templates for their websites forever (in case you’re interested, there’s a Drudge template for WP). The reason is that customers within an industry usually interact with websites in […]

Leave a Reply

Your email address will not be published. Required fields are marked *