.
avatar

Hacking WordPress Core Files

| December 8th, 2011
in Web Development



If you are working in WordPress and are thinking about modifying the core WordPress code I’d like to tell you why you shouldn’t. I’ll start with a reminder that WordPress has created both plug-in and theme capabilities to help customize every part of WordPress including looks and functionality. Given you can accomplish what you need using these tools, hacks shouldn’t be needed and are not recommended.

Reasons why you shouldn’t hack WordPress core files:

  • There’s almost always a solution that doesn’t involve hacking core files
  • Almost all situations should be handled with a hook or custom plug-in
  • Upgrading to the latest version or security patch will overwrite your changes
  • Core file changes could cause other plug-ins to not work correctly
  • Makes it more difficult for other developers to debug or solve issues



Modifying the core files is a quick fix that will likely end up more costly than doing it correctly the first time or the functionality could just disappear on the next upgrade. It is more likely among amateur and beginner developers that are not aware of the correct way to implement the functionality. I’m not saying you will never have to edit the core files because there is that chance you may find a bug. But in that case you need to report it to WordPress so they can fix it in the next upgrade.

So next time you’re working with WordPress take some time to look through all the WordPress documentation out there and I guarantee you there is a better way of solving the issue that will not interfere with future development and updates.

As for beginners to WordPress I highly recommend the print and PDF version of the book Digging Into WordPress by Chris Coyier & Jeff Starr. It is the best WordPress book I’ve come across and on my top 3 books of all time. I cannot express my love of the spiral binding (I wish all tech/developer books did this), the large and colorful print and screenshots throughout the book and most importantly the content itself covers everything you would want to know in a detailed, accurate and easy to follow way.



Tags: , ,
Posted in Web Development | No Comments »
avatar

Category Controlled WordPress Feed in Cascade

| November 22nd, 2011
in Beacon News, Cascade Server, Creative Design, Managing Web Content, Web Development



One of our recent enhancements to the Beacon website included integrating components of our blog into the content of the site. This is visible on the homepage under the “Blog” tab and shows the three most recent postings on our WordPress blog. Additionally, we decided to include links to recent blog links by categories or topic on the page. For example, the SEO Management page would produce blog links that fell in the SEO category. This is applied throughout the site on interior pages, which is effective for SEO as each page will be updated with every blog posting we create (given the post falls in the category of the page displayed).

The blog feed on the homepage was much easier in comparison worked like this:

XSLT Format used in Cascade:

This is a simple ASP literal that will be the populated by the blog feed.

<xsl:comment>#START-CODE<asp:Literal id=”litFeedReaderBlog” runat=”server”/>#END-CODE</xsl:comment>

VB for CodeBehind File:

VB CodeBehind File (.pdf)

This small set of code basically links to page with RSS feed, in this case, the general RSS feed for entire blog. The part shown in red needs to match the URL of the RSS feed to your particular WordPress site. The part shown in green is a relative path to the XSL file you will use to format the output. Lastly, the part in blue needs to match the ID of your ASP literal so the codebehind knows where to place the output.

Most WordPress sites use the following schema to the feed: http://sitename.com/rss

Example: http://blog.beacontechnologies.com/feed

The above linked RSS page acts as the data source for the VB CodeBehind file and uses an XSL file (shown below) to format the output to the page. Because this RSS page is updated and managed by WordPress, the output is always up to date with the blog.

XSLT used by CodeBehind File for Output:

XSLT File (.pdf)

This XSL will limit the number of posts displayed to the most recent 3 posts (First 3 listed on RSS page–Code shown in green) and will output it in a way to provide a linked title, the author and date, as well as a snipped from the article itself and ‘Read More’ link. We used JavaScript to clean up some of the output that the RSS feed delivers, such as the [...] text and cleaned up the way links were displayed in the snippet.  You can visit the blog feed page and view source to get the XML data that will be processed by the XSLT.

So, if you followed all that and put it into practice, you get something like this (after styling):

Now, to implement category control, we needed to add an additional Data Definition within Cascade on every page that would set the category. We used a simple drop-down that had an entry for every category we have on our blog. Notice below that the data-definition values need to be URL-friendly. The reason for this is that the modified blog feed with category control will integrate this category to the blog’s general RSS feed. We are going to pass this category information to the codebehind file for processing by sticking the data definition value into the ASP literal’s text attribute. All interior pages would use the same codebehind file as to avoid the need for a new configuration type that would need published with each page.  The only maintenance that goes along with the blog feed is adding new ones to the data definitions as they are created in WordPress.

Blog Category Data Definition

The code and logic above was primarily followed for the related links, but had to be modified to fit the following specs:

  • Have Cascade output a text attribute on the ASP literal containing the category to be used (grabbed from data definitions) which would be passed as a parameter to the functions used in the original VB Codebehind.
  • List out 3 of the most recent blogs (just linked titles, somewhat simplified from homepage output) from the blog category set in the data definition. If NO data definition is set for the ‘blog category’, use the ‘Section’ data definition value (which shown above is required on all of our pages.) The section value is a fall-back to one of the three parent categories on the blog: Web Development, Web Marketing, and Web Hosting.  Notice we can’t just use the values of the ‘Section’ data because it does not match the URL structure on WordPress.
  • If there aren’t 3 posts for the blog category that has been set in the data definition, retrieve what posts are available and then use one or two posts the parent category (depending on how many needed to make 3 posts).

At first, the solution Justin and I had come up with, was to make the VB smart enough to recognize when less than 3 posts were output and go out and grab the remaining from the parent category. The issue with this was that the parent category of any category might list already output postings by the sub-category (since they are listed in order of most recent). Therefore, we had to heavily modify the codebehind file in a way that it would ALSO recognize not to output duplicate posts from the parent category.

XSLT Format and Template Changes in Cascade:

Every page needs to get the codebehind file.  In Cascade, this is accomplished by adding the following to the template:

<!–#START-ROOT-CODE<%@ Page Language=”VB” aspcompat=”true” AutoEventWireup=”false”  CodeFile=”/rightColumnBlogFeed.aspx.vb” Inherits=”_Default” %>#END-ROOT-CODE–>

We saw that http://blog.beacontechnologies.com/feed shows a listing from all categories (10 of the most recent being shown).  We can change the URL to include one of our categories, say… Web Marketing — just by changing the URL to http://blog.beacontechnologies.com/category/web-marketing/feed.  Notice the RSS feed is then modified to fit the category and still listed (as defaulted in WordPress) by most recent posts.  The XSLT file below was used to select either the post category or section for outputting the text attribute of the ASP literal.

Modified XSLT File (.pdf)

Changes in VB Codebehind & CodeBehind’s XSLT

While I’d prefer not to share our exact source code, here are the modification necessary to the templated file above to prevent duplicate stories from being output.

    • The ‘BuildFeed’ function had the first parameter changed to the ASP literal’s text value.
    • The XSLT file got dutplicated, one to output 3 posts and one to grab the full page of posts generated by the RSS (10).  Both had ‘~’ characters appended after each list item.
    • The BuildFeed function would fetch what posts it could from the blog category, if there are less than 3, it would record the titles of the categories found and load them into an array (This was the reason for ‘~’ character being added–Parsing values was a bit easier this way using the split function.)
    • The BuildFeed function would then visit the parent categories RSS page and compare post title with those in the subcategory recorded in the array.  If they matched, it skipped the post, otherwise appended it in with list to be included.  Because we didn’t have any categories with less than 3 posts, I was able to just switch my XSL file used by the codebehind to output only 2 posts–and the VB would take care of the rest and use the 10 post page parent.  Controlling the output this way made it much easier to debug and test that the proper number of posts being output from the parent category and subcategory feeds.


Tags: , , , , ,
Posted in Beacon News, Cascade Server, Creative Design, Managing Web Content, Web Development | No Comments »
avatar

WordPress Development: Plug-ins VS Functions

| June 10th, 2011
in Managing Web Content, Other, Web Development



There are thousands of plugins available for WordPress, which is awesome for non-coders.  The issue with many of these plugins is the bulk code it produces is highly unnecessary when you consider most functionality is already available for use in a fresh installation of WordPress. Plug-ins also have to be reconfigured across sites–integrating these functions into your template eases the portability of your site’s theme while maintaining functionality. On a recent project, we discussed this integration as a standard for blog development, which is a significant advantage when you consider the process of pushing out releases.

Consider the following 3 plug-ins:

 

These are pretty  commonly used methods of displaying blog posts and content.  Together, these 3 plug-ins only take up 500Kb of data–however, everything you need is already in WordPress if you know the lay of the land. The three functions below can do all the same things with just a copy+paste into your functions-file, usually located at:

/wp-content/themes/YOUR-THEME-NAME/functions.php

These are pretty simple to modify or tweak as needed, whether it be the code in PHP or the markup/styles. Oh, and these replacement functions only take up a tiny 1.64Kb!

Functions:

<?php
	function popularPosts($num) {
		global $wpdb;
		$posts = $wpdb->get_results("SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , $num");
		foreach ($posts as $post) {
			$title = $post['post_title'];
			$count = $post['comment_count'];
			$date = $post['post_date'];
			if($count!=0) echo '<li><a href="' . get_permalink($id) . '" title="' . $title . '">' . $title . '</a><br /><div class="post-date">'.$date.'</div></li>';
		}
	}
	function recentPosts($num){
		$args = array('numberposts'=>$num);
		$recent_posts = wp_get_recent_posts($args);
		foreach($recent_posts as $post){
			$date = $post['post_date'];
			echo '<li><a href="' . get_permalink($post["ID"]) . '" title="Look '.$post["post_title"].'" >' .   $post["post_title"].'</a><div class="post-date">'.$date.'</div></li>';
		}
	}
	function recentComments($num){
		global $wpdb;
		$comments = $wpdb->get_results("SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,30) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT ".$num);
		foreach ($comments as $comment)	echo '<li><strong>'.ucwords(strip_tags($comment->comment_author)) ."</strong> commented on " . "<a href="" . get_permalink($comment->ID)."#comment-" . $comment->comment_ID . "" title="on ".$comment->post_title . "">" . $comment->post_title ."</a></li>";
	}
?>

Once you have these in functions.php, it is easy to call the functions from the sidebar or other locations of the template files.

Notes:

  • The functions above would need to go inside of individual unordered list tags as they are currently marked up for the sidebar.
  • The function require to pass a numeric parameter representing the number of posts/comments to return.

Example Usage:

This is an example of how to setup your ‘sidebar.php’ file to make use of these functions, Plugin-free.

<div id="sidebar">
	<div class="search" align="center">
		<?php get_search_form() ?>
	</div>
	<?php
		echo '<div class="tabs">';
		//Popular
		echo '<div id="popular-posts">';
		echo '<h2>Popular</h2><ul>';
		popularPosts(5);
		echo '</ul></div>';
		//Recent
		echo '<div id="recent-posts">';
		echo '<h2>Recent</h2><ul>';
		recentPosts(5);
		echo '</ul></div>';
		//Comments
		echo '<div id="recent-comments">';
		echo '<h2>Comments</h2><ul>';
		recentComments(5);
		echo '</ul></div>';
		//Get dynamic toolbar managed in WordPress Dashboard
		if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('tabs')){echo '</div>';}
		if(function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : endif;
	?>
</div>


Tags: ,
Posted in Managing Web Content, Other, Web Development | No Comments »
avatar

WordPress Theme Development with Artisteer

| March 17th, 2011
in Creative Design, Managing Web Content, Other, Web Development




We recently picked up a fantastic piece of software for designing WordPress themes called Artisteer. While this software doesn’t give you complete control over the content, its great for throwing a general layout which can be finely tuned after it is exported. Artisteer features an easy to use
‘Microsoft Office’-styled interface that generates your layout and scheme via point and click.

When developing for WordPress sites in this way, I religiously abide by the following development process:

Start with the Design/Theme in Artisteer.

  • Start a new project within Artisteer with the WordPress CMS.
  • Work left to right with along the menu tabs on the ribbon across the top. Within each tab, work left to right with the avaible options and settings.
  • On the far left tab, Ideas, click Suggest Design until a base design to work from is found or skip this and build the page using the Layour tab.
  • Each tab focus has a ‘Suggest’ button for the helplessly creative.
  • As you work to the last tabs, the design gets fine-tuned across page elements.
  • Once a design is ready for site integration, click the arrow on Export button at the top of the menu bar. Select Export Options…
  • On the properties option window, enter the author name, url, template version, template URL, any associated tags, and a brief description of the theme.
  • Once this is entered, export your theme as a WordPress Theme. Exporting the theme as standard markup is available too, but is of no use inside WordPress.

Integrate into WordPress.

  • Start up your FTP app of choice, FireFTP is convenient if your a FireFox user.
  • Navigate and transfer a copy of your theme folder to: /public_html/wp-content/themes/
  • Log into your WordPress Dashboard. http://YourSite.com/wp-admin
  • Under the appearance drop-down on the sidebar, select Themes.
  • Your theme once uploaded, should be listed among the themes avaialable to your site. Find yours and click ‘Activate’.

Add Non-Artisteer Elements and Styles to Template

    • Artisteer isn’t going to always have every part of your site. You can make these from the ‘editor’ in the WordPress Dashboard listed under Appearance, or use a text editor and FTP.
    • Making these modifications require knowing the WordPress Theme structure. Much of the code is in PHP, so background there also helps.
    • Inside of every Artisteer generated WordPress theme, you will have the following in your Export folder:

  • Open and add/change markup to THEME_NAME/header.php for changes to the header area, usually META, LINK, and SCRIPT tags and body elements that precede the menu bar.
  • Open and add/change markup to THEME_NAME/templates/page.php for changes to the pages Menu, Sidebar, down until the main content area is loaded.
  • Open and add/change markup to THEME_NAME/templates/post.php for changes to the content area of posts and pages across the site.
  • Open and add/change markup to THEME_NAME/footer.php for changes to the footer area, this is any markup that follows the pages main content area
    (May be contained within outter-most DIV if designed so within the ‘Sheet’ in Artisteer).
  • Open and add/change markup to THEME_NAME/404.php for changes to text and verbage on the 404 page.
  • Open and add/change styles in THEME_NAME/style.css for changes to the stylesheet.

Site Structure and Content

  • After the above is said and done, all thats left is organizing the structure of the site and loading it with content.
  • Under 'Settings &gt; General', change blog metadata and primary options.
  • Under 'Settings &gt; Writing', set defaults and settings for publishing blog content.
  • Under 'Settings &gt; Reading', set a static or blog listing homepage and set listing pages to show either summaries or full articles.
  • Under 'Settings &gt; Discussion', configure comment restrictions and requirements.
  • Under 'Settings &gt; Media', configure media (image and file) restrictions and requirements.
  • Under 'Settings &gt; Privacy', configure whether the site is to be visible or not to Search Engines.
  • Under 'Settings &gt; Permalinks', customize the URL structure. I generally stick to Month & Name or a Custom Structure using: /%category%/%postname%
  • Determine sidebar widgets and make active under 'Appearance &gt; Widgets'.
  • Load posts and pages with content in their respective sections. Keep in mind to setup categories for posts if necessary.


Tags: , , ,
Posted in Creative Design, Managing Web Content, Other, Web Development | No Comments »
avatar

Connecting Cascade Server with WordPress and Twitter

| January 19th, 2011
in Cascade Server



Cascade Server CMS has built in tools, called Connectors. These connectors allow Cascade Server to connect directly to 3rd-party applications. Currently, there are two Connectors available to choose from, WordPress and Twitter. Once a Connector is setup correctly, any page you publish using Cascade can automatically be posted to your twitter or blog. This can reduce the hassle if you manage your Twitter, WordPress blog, and website content separately. Both of the Connectors are easy to setup.

To setup a new WordPress Connector:

  1. Navigate to Connectors in the Site Administration area
  2. Click “Create Connector
  3. Choose “WordPress” as the Connector type
  4. Click “Submit
  5. Fill in the WordPress Connector’s name, parent folder, and URL (pointing to the WordPress instance to be used)
  6. Fill in the Username and Password for your WordPress account.
  7. Fill in the Content Type (under “Content Types” tab). Note: Each Content Type determines which Page Configuration is published to the WordPress post.  The Content Type also maps Metadata fields to Categories and Tags for the post
  8. Click “Submit” to save your WordPress Connector.
  9. You need to verify that the connection with WordPress is successful. Click on the “View” tab, and click the “Verify” link.

To setup a new Twitter Connector:

  1. Navigate to Connectors in the Site Administration area
  2. Click “Create Connector
  3. Choose “Twitter” as the Connector type
  4. Click “Submit
  5. Fill in the Twitter Connector’s name, parent container, destination (The Destination to which a Page must be published in order for a tweet to be generated)
  6. Fill in the Content Type (under “Content Types” tab).
  7. Under “Parameters” tab, fill in the Hashtags (eg. #BeaconBlog) or Prefix that will be published with each tweet.
  8. Click “Submit” and save your Twitter Connector
  9. Click on “Click here to allow and Verify again.”
  10. A new window will open up, type your Username and Password and click “Allow”.
  11. Close that window, and go back to your Cascade Server Connector window. Click “Verify” again and it will be all set.
  12. You need to verify that the connection with Twitter is successful. Click on the “View” tab, and click the “Verify” link.

If you need further help, check out Hannon Hill’s Knowledge Base at: http://www.hannonhill.com/kb/Connectors/ OR leave a comment below.



Tags: , , , ,
Posted in Cascade Server | No Comments »
avatar

10 Great WordPress Plugins for Businesses

| July 21st, 2010
in Managing Web Content, Search Engine Optimization, Web Development, Web Marketing



If your business uses WordPress for blogging or as a content management system, there are some great plugins out there to make life easier. Here are the top 10 WordPress plugins that I love.

1. Headspace 2 – HeadSpace manages meta data and other SEO functions. It allows you to tag your posts, create custom titles and descriptions that help your page ranking.

2. Simple Facebook Connect – This plugin comes with many different options. You can give your visitors the ability to comment using Facebook Identity (with FB avatar support), login with Facebook credentials and register using Facebook. It also allows you to automatically publish new posts to a Facebook Profile or manually publish posts to a Facebook Profile or Application/Fan Page. And if that weren’t enough, check out the other available buttons and widgets available through this plugin!

  • Share button and Shortcode
  • Connect Button Widget and Shortcode
  • User Status Widget and Shortcode
  • Live Stream Widget and Shortcode
  • Bookmark Widget and Shortcode
  • Find us on Facebook button Widget and Shortcode
  • Fan Box Widget
  • Fan Count Chicklet and Widget

3. TweetMeme – The TweetMeme button plugin simply adds the TweetMeme button to your posts and feed. It keeps a running total of how many times your content is tweeted. (See example on this post!)

4. Akismet – This does a great job of keeping your WordPress site free of spam. When a new comment, trackback, or pingback comes to your site it is Akismet runs hundreds of tests on the comment to determine whether or not it is spam.

5. WP Click-Track – This plugin automatically posts and rewrites links in your content (pages, sidebar, posts, etc.) in order to include a tracking element. It also allows users to create stand alone trackable links that can be included in posts. It also provides extensive reports right within the WordPress dashboard.

Link Report

6. Category Order – This seems like a simple plugin but there have been countless times where I’ve needed categories to be in a specific order that wasn’t alphabetical or by ID. This little plugin allows you to easily reorder your categories the way you want via drag and drop.

7. Google Analytics for WordPress – Even though you can use Google Analytics on a WordPress site without this plugin, it’s missing a whole lot of features that this plugin offers. This plugin includes:

  • Google Analytics Custom Variables
  • Google Analytics API integration
  • E-Commerce integration
  • Event tracking

8. cformsII – CformsII is the best form plugin I’ve used. Its creators are actually the authors of one of my favorite cooking blogs. This amazing plugin has an incredible amount of features and flexibility. You can create detailed custom forms, style them individually and place them in sidebars, posts or pages.

9. AddThis – AddThis is my favorite share plugin because  it automatically optimizes itself for each person who visits your site. AddThis custom fits each menu with the services they’ll normally use. This plugin also has an automatic interface for iPhone users. The plugin allows a customized share button to be placed in a sidebar or on each post. AddThis.com also provides detailed analytics so you can see how your content is shared across the Web.

10. YD Recent Posts Widget – This WordPress plugin installs a new sidebar widget displays your most recent blog posts along with images. It is very customizable allowing different settings on the home page and other blog pages.



Tags: , ,
Posted in Managing Web Content, Search Engine Optimization, Web Development, Web Marketing | 4 Comments »
avatar

Free WordPress Theme: Light Graffiti

| July 16th, 2009
in Creative Design, Managing Web Content, Web Development



We did a quick theme we think you’ll enjoy inspired by a hot new trend in photography, light graffiti, check it out!

 Light Graffiti WordPress Theme

Light Graffiti - WordPress Theme by Beacon Technologies, Inc

Related Posts Plugin for WordPress, Blogger...

Tags: , , , , , , , , , , ,
Posted in Creative Design, Managing Web Content, Web Development | 5 Comments »
RSS


Bad Behavior has blocked 482 access attempts in the last 7 days.