Digging into WordPress » functions

Don’t fork your theme, flex it with “is_plugin_active” conditional

Peter Shackelford — Wed, 04 Apr 2012 17:49:08 +0000

Donkey Work

Donkey work is really the last thing I want to be doing. Piddly tasks that could have been avoided with a little thought and perspective. Below I explain how I worked my way away from becoming a donkey with a dozen child themes to manage and maintain, with just a little knowledge of a native wordpress function.

The details.

I am running a multisite that predominately uses a single child theme. Each site has it’s separate color scheme applied through a few lines of css. Where sites need unique functionality, functionality plugins are used. These contain custom post types, rss redirects, custom thumbnail sizes etc… This has worked really well for keeping our theme’s function.php file slim while giving us all the functionality we need, where we need it.

Each site uses a single identical footer, which is built into the theme. At the time, we did this knowing that we would be creating department sites as subdirectories. Content between the utility navigation and the footer was to be their turf but the utility nab and footer content are locked down. We built our universal footer using switch_to_blog function and a custom menu.

 'div',
			'menu'         => 'Footer',
			'container_id' => 'footer-links',
			'menu_class'   => 'menu', 
			'echo'         => true,
			'fallback_cb'  => 'wp_page_menu',
			'depth'        => 0
		);
		wp_nav_menu($args);
		restore_current_blog(); ?>

The above code registers a new menu area called Footer. To take advantage of this I need to create a menu in the wordpress menu area with that exact name. The bit of JQuery turns off the link in the first level of menu items. This with a little css is used to create the menu headers. Great! One identical footer that is used on every site that uses this child theme.

The Dilemma

Recently we offered to host/manage websites for regional offices in our organization. They would benefit from our existing infrastructure and consistent branding but all of the content and navigation would be their own. They would not need our built in footer, at least not as it is on all the other sites.

I considered having a separate theme that was modified just for regional offices, I also considered building a plugin that disabled and replaced the footer on the existing theme. The first option would not be sustainable in the long run, the second very complicated at the outset. To be honest I very much doubt I could have pulled it off. My solution was to take advantage of the fact that I had already created a functionality plugin that would be used on every regional site. Using the is_plugin_active conditional I was able to alter the theme to not switch_to_blog if the regional plugin was enabled.

if (is_plugin_active('regional-functionality-plugin.php')) {
	//plugin is activated! Look no switch_to_blog!!
	$args = array(
		'container'    => 'div',
		'menu'         => 'Footer',
		'container_id' => 'footer-links',
		'menu_class'   => 'menu', 
		'echo'         => true,
		'fallback_cb'  => 'wp_page_menu',
		'depth'        => 0
	);
	wp_nav_menu($args);
} else {
	global $blog_id;
	global $current_blog;
	switch_to_blog(45);
	$args = array(
		'container'    => 'div',
		'menu'         => 'Footer',
		'container_id' => 'footer-links',
		'menu_class'   => 'menu', 
		'echo'         => true,
		'fallback_cb'  => 'wp_page_menu',
		'depth'        => 0
	);
	wp_nav_menu($args);
	restore_current_blog();
} ?>

There we have it, 12 lines of code for the love of a single maintainable theme. So, if you want to earn your salt as a WordPress Developer, learn your functions and save your energy for the creative work.

About the Author

Peter builds web platforms based on WordPress. In his off time he is expounding on the wonders of WordPress among family, friends and strangers. He and his brother host a monthly WordPress meetup in Jackson Michigan.

Getting Comment Info from the WordPress Database

Jeff Starr — Thu, 15 Mar 2012 17:16:45 +0000

An easy way for visitors to enter their emails is by commenting on a post. We did this recently for people to sign up for a notification email. Instead of using a plugin or custom function for a one-time email list, we just went with WordPress core functionality and used post comments for people to sign up. Then the trick then is retrieving the comment information from the database for the specific sign-up post.

We did this recently to collect commentators’ email addresses, but could have easily extracted other comment info as well — comment author, comment date, comment url, and basically anything in the wp_comments table, shown here:

columns in the wp_comments table

You can easily display and collect any of this information for any specific page or post on your site. All you need is a non-public page (or other theme location) to output the results (“non-public” especially if you’re displaying any email data). In our case we just created a new private page and selected our custom page template. Load the page and viola! — instant list of all comment author emails for our sign-up post.

Getting comment info from the database

So you’ve got your sign-up post with some comments, and now want to collect the information and send some emails or whatever. To get the information, we need to query the WP database, select our columns from the wp_comments table, and then display the results on our custom page.

For the SQL query, getting data from the comment table is straightforward, but doing so for a specific post requires a dash of voodoo found in an update on this post. To make a long story short, you have to use nested queries with an arbitrary “AS WHATEVER” added at the end, as such:

SELECT DISTINCT comment_author, comment_author_email, comment_author_IP 
FROM ( 
SELECT DISTINCT comment_author, comment_author_email, comment_author_IP 
FROM wp_comments WHERE comment_post_ID = 1
) AS WHATEVER

The “WHATEVER” is essentially meaningless, so use any name you want. Why? Apparently the “AS” clause is required for the nested (or whatever) queries to work their magic. As you can see, this enables us to grab any column from the wp_comments table. In the example query, we’re selecting the comment_author, comment_author_email, and comment_author_IP columns.

If you have access to the database, you can use a program such as phpMyAdmin to execute the above query directly. Otherwise, we’ll go with the WordPress custom-private-page route. Open your page template and add the following code beneath the_content() template tag:

get_results("SELECT DISTINCT comment_author, comment_author_email, comment_author_IP 
	FROM (SELECT DISTINCT comment_author, comment_author_email, comment_author_IP 
	FROM wp_comments 
	WHERE comment_post_ID = 1
	) AS WHATEVER"); 
// display the results
echo '';
foreach($comment_info as $info) { 
	echo ''. $info->comment_author .' - '. $info->comment_author_email .' - '. $info->comment_author_IP .''; 
}
echo '';
?>

Just pick your post ID and done. When you visit the custom page in a browser, you should see the results of your query displayed as a list, similar to this:

Juan Gris – juan@hotmail.com – 123.456.789
Max Ernst – max@gmail.com – 987.654.321
Salvador Dali – dali@email.com – 456.789.123

But no need to keep it list format, with a little tweaking, we can output any data using whatever markup works best. For example, to just grab the emails from a nice

list, change the foreach loop to this:

echo '';
foreach($comment_info as $info) { 
	echo $info->comment_author_email . "\n";
}
echo '
';

..and that should give you just the data, with no interfering markup:

juan@hotmail.com
max@gmail.com
dali@email.com

Customizing

There are two ways to customize this technique. In the query itself, you can specify which columns you want to display. And then you can also customize the markup, to format the data to suit your specific needs. Sort of a multipurpose method for grabbing post-specific info from the database.

Displaying Theme Data with WordPress

Jeff Starr — Wed, 14 Dec 2011 18:36:29 +0000

A cool trick you can do with WordPress is display information directly from your theme’s style.css stylesheet. I recently used this on a site where the theme’s version number is used throughout the template to keep things current and consistent.

get_theme_data()

The function that makes it possible is called get_theme_data(), and it simply returns an array of information about any of your theme files. Here is how it’s used in your theme template:

So $theme_filename is required and should be the path and filename of your theme’s style.css file. There is no default value for this, so you need to ensure a proper value.

So what information can you display with get_theme_data()? The function returns an array of values that basically comprises the different meta items in your stylesheet. Here is a list of possible return values (all strings):

Name – theme name
Title – either theme name or linked theme name
URI – theme URI
Description – wptexturized version of the theme name
AuthorURI – theme author URI
Template – theme parent template, if exists
Version – theme version number
Status – theme status (default: publish)
Tags – theme tags
Author – author name or linked author name

Note that these return values are case-sensitive and will not work if the first letter is not capitalized.

Examples

The Codex provides this example for getting and displaying the theme Name and Author:

This should get you going.. just copy/paste into your theme template and indicate the theme name in that first line of code. Displaying other bits of theme data is matter of editing/replicating those last two lines.

Once you see how it works, you can do cool stuff with it, like display your theme’s version number sort of globally throughout your site. I’m using this technique to append version parameters to my stylesheet URLs, like so:

..and the output markup looks like this (notice the appended version parameter, ?v=1.3):

Because I am using multiple stylesheets, this method really saves a LOT of time trying to keep track of everything. Here is the theme_version() function that goes in your theme’s functions.php file:

// display version number
function theme_version() {
    $theme_name = 'xycss'; // customize with your theme name
    $theme_data = get_theme_data( get_theme_root() . '/' . $theme_name . '/style.css' );
    echo '?v=' . $theme_data['Version'];
}

And with a few modifications, you can also display your theme’s information in your posts and pages via shortcode:

// version number shortcode
function theme_version_shortcode() {
    $theme_name = 'xycss'; // customize with your theme name
    $theme_data = get_theme_data( get_theme_root() . '/' . $theme_name . '/style.css' );
    return $theme_data['Version'];
}
add_shortcode('theme_version', 'theme_version_shortcode');

With that second snippet in your functions.php file, displaying your theme info directly in pages is as easy as writing this:

[theme_version]

..and the output:

1.3

It’s pretty cool stuff, and I’m sure there’s tons more you can do with it too. If you know any tricks or tips, please share in the comments, Thanks :)

HTML Formatting for Custom Menus

Jeff Starr — Mon, 28 Nov 2011 18:09:42 +0000

For some projects, it’s nice to output clean, well-formatted markup. Using theme template files enables great control over most of your (X)HTML formatting, but not so much for automated functionality involving stuff like widgets and custom menus. One of my current projects requires clean, semantic HTML markup for all web pages, but also takes advantage of WordPress’ custom-menu functionality to make things easy. In this DiW article, we’ll see how to enjoy both: WordPress custom menus and clean, well-formatted HTML markup.

Customizing HTML displayed with wp_nav_menu()

By default, WordPress custom menus are displayed in your theme template using the wp_nav_menu function, which by default outputs markup that looks like this:

Home
Demos
Downloads
Documentation

That’s a mess of class and id attributes, plus an extra

container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

 ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
  'walker'          => );
?>

Of these parameters, $container lets you specify how to wrap the

'div'

'nav'

false

$container

container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

$items_wrap – “Whatever to wrap the items with an ul, and how to wrap them with” (source: WP Codex)
$walker – “Custom walker object to use (Note: You must pass an actual object to use, not a string)” (source: WP Codex)

These sound useful, but I haven’t had much luck with either. The $items_wrap didn’t seem to do anything, but there are plenty of custom walker scripts available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:


	
		Home
		Demos
		Downloads
		Documentation

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it’s much easier building the menu structure from scratch, using only what’s required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme’s functions.php file:

// custom menu example @ http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '' ."\n";
		$menu_list .= "\t\t\t\t". '' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". ''. $title .'' ."\n";
		}
		$menu_list .= "\t\t\t\t". '' ."\n";
		$menu_list .= "\t\t\t". '' ."\n";
	} else {
		// $menu_list = '';
	}
	echo $menu_list;
}

After placing in your functions.php file, you can call the function and display your custom menus anywhere in your theme by calling it directly:

Then, you can customize the clean_custom_menus() function as follows:

Line 3: specify your custom-menu slug
Lines 8 thru 15: customize markup, tabs, and line breaks as needed
Line 17: uncomment else condition and customize if needed

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Quick Summary

In this article, we explain two ways to clean up and customize WordPress’ custom-menu markup. Either of these methods will take your code from this:

Home
Demos
Downloads
Documentation

..to this:


	
		Home
		Demos
		Downloads
		Documentation

..or whatever HTML structure that’s required. You can achieve this with either of these methods:

Combine wp_nav_menu() with a custom walker class
Combine wp_get_nav_menu_items() with the clean_custom_menus() function

As usual, if you know of better ways of doing something, please share in the comments! Thanks for reading Digging into WordPress :)

Create an Articles-Only Feed

Jeff Starr — Wed, 24 Aug 2011 15:33:10 +0000

WordPress makes it easy to publish content in any number of categories, with any number of tags, and with any type of custom post format. So for example, in addition to full articles, you could also offer screencasts, links, side posts, tweets, and all sorts of other peripheral content. Complementary material may work great for visitors surfing around your site, but including all of that extra stuff in your RSS feed dilutes the potency of your main articles. The idea here is that your visitors will subscribe to the more focused content.

In this post, we create a custom, “articles-only” feed for visitors who want to subscribe to the main content only, without all the side stuff. The technique is actually pretty flexible, and works great to create just about any type of custom WordPress feed content. It’s pretty easy to do, requiring a whopping two steps to make it happen..

Step 1: Create the custom page template

Go to your theme directory and create a new PHP file named article-feed.php. Then add the following code (don’t worry it’s actually not that bad):

';
?>


>

	<?php bloginfo_rss('name'); wp_title_rss(); ?> - Article Feed
	
	
	
	
	
	
	
	
	
	

	
		<?php the_title_rss(); ?>
		
		
		
		

		


		]]>


		]]>
	post_content ) > 0 ) : ?>

		]]>
	

		]]>

This is basically just a typical WordPress feed template, but with some extra query action to make it do what we want. In the first few lines of code, we specify how many posts to display, which categories to include, and whether to display full posts or excerpts:

$numposts = 10; // number of posts in feed
$posts = query_posts('showposts='.$numposts.'&cat=3');
$more = 1;

Using this default code, the custom feed will show 10 posts from category 3. And with $more set to 1, the full article will be included in the feed. This is where you customize your new feed to include whatever you want. So for example, if we post articles in three different categories, say with IDs of 1, 2, and 3, we would modify our code to look like this:

$numposts = 10; // number of posts in feed
$posts = query_posts('showposts='.$numposts.'&cat=1,2,3');
$more = 1;

The query_posts function is quite flexible and provides all of the parameters needed to set up just about any customized feed content. You can exclude/include categories, display specific types of posts, change the number of posts displayed, and so much more. For a full list of options, check out query_posts at the WordPress Codex.

Step 2: Create the custom Page in the WP Admin

Once you have the custom Page Template uploaded to your server, log into the WordPress Admin and visit the “Add New Page” screen (Pages > Add New). Create a new page named “Articles-Only Feed” (or whatever), and select the newly added “articles” page template from the drop-down menu:

While you’re there in the Admin creating this new custom-feed page, take a moment to be mindful of the feed URL and title, which may be set to whatever works best:

Once everything is ready, finish it up by publishing the page to your site. Then check that your new feed is working by visiting the URL of the new page you just created in the WP Admin. Here at DigWP.com, our articles-only feed is available at http://digwp.com/articles/.

Wrap-up + additional resources

In addition to the easy-breezy two-step custom-feed tutorial in this post, here are some additional resources that are sort of related to this general topic:

Tumblr Links with Post Formats

Jeff Starr — Tue, 05 Apr 2011 17:49:20 +0000

With WordPress 3.1’s new Post Format functionality, it’s easier than ever to create your own Tumblr-style Link posts. We do this right here at DigWP.com using our own hand-rolled method. Scroll through a page or two of the site’s most recent posts, and you’ll see that Link posts are formatted and styled differently than regular posts (see screenshot below). In this tutorial, you’ll learn how to use WordPress’ new Post Formats to setup your own Tumblr-style Links in 3 easy steps.

Link posts are meant for quick links to external resources. Ideally, they’re styled for easy recognition without breaking the flow of post content. Link posts look like link posts, Asides look like asides, Galleries look like galleries, and so on. Here’s a chart showing the differences between regular posts and Link posts:

Notice the key difference between the two types of posts: regular post titles link to the single-view of the post, but Link post titles link to the URL of an external resource (i.e., whatever awesome thing you’re sharing with your visitors). This makes it super-easy to share links via true “Tumblr-style” Link posts. And with WordPress 3.1’s new Post Formats functionality, it’s easier than ever to do.

Easy, 3-Step Tutorial

Here’s an overview of the tutorial:

Enable Post Formats via functions.php
Include the conditional template tags in your theme files
Style with some CSS via style.css (optional)
Usage and notes

Even if you don’t implement this technique, the tutorial provides a great example of how Post Formats can be used to add variety and depth to any WordPress-powered site.

Step 1: Enable Post Formats

First, make sure you have the latest version of WordPress (3.1 or better), and then enable Post Formats by adding this snippet to your theme’s functions.php file:

// Enable Post Formats for WP 3.1+
add_theme_support('post-formats',array('aside','chat','gallery','image','link','quote','status','video','audio'));

With that in place, all nine (+1 default) Post Formats will be enabled on your site. Next time you write or edit a post, you should see a Post Formats panel with options for each of these different formats. If you know you won’t be needing some of them, feel free to edit the parameter list in the code snippet. Otherwise, it’s totally fine to leave them all enabled – it doesn’t hurt anything – it’s just a matter of preference.

Step 2: Customize your theme files

Next, in your theme’s template file(s), replace the markup/tags used to generate your post titles (located in the loop) with the following conditional code:

ID, 'LinkFormatURL', true)) : ?>

The first line tests each post using has_post_format and get_post_meta. IF the post is a Link post (has “link” post format) AND has an alternate URL (via “LinkFormatURL” custom field), the post title will be Tumblr-style as specified in the second line of code. If both of those conditions fail, the post title will be the regular/default, as specified in the fourth line of code. You may use any PHP/markup needed to customize your Link posts to suit your design.

Update: Matt Wiebe makes this step even easier. Instead of messing with your theme files, just add this snippet to your theme’s functions.php:

// filter post title for tumblr links
function sd_link_filter($link, $post) {
     if (has_post_format('link', $post) && get_post_meta($post->ID, 'LinkFormatURL', true)) {
          $link = get_post_meta($post->ID, 'LinkFormatURL', true);
     }
     return $link;
}
add_filter('post_link', 'sd_link_filter', 10, 2);

This script filters the post_link and returns the correct URL based on the same conditions as before. Just plug-n-play – no other theme modifications required. Thanks to Matt Wiebe for sharing this more elegant method.

Step 3: Style with CSS

Lastly and optionally, you are encouraged to customize the appearance of your custom Post Formats. Referring back to the opening screenshot, notice how Link posts stand out as distinct and easy to recognize as such. To style your Link posts with CSS, make sure your theme includes the post_class() tag in the outer

(or whatever) for each post. The post_class() function will then output the Post-Format name as a class attribute for each post. This provides a nice hook for hanging your custom CSS. Here is a simple example using our code from Step 2:

.format-standard { width: 100%; }
.format-link     { width: 75%; }

.format-standard h2 { font-size: 24px; }
.format-link h2     { font-size: 16px; }

.format-standard a { color: #000; }
.format-link a     { color: #777; }

Using the .format-{whatever} class attribute, it’s easy to style each of your Post Formats with a distinct appearance that’s easy to recognize.

Usage and Notes

Once you get everything setup, posting Links is as easy as 1-2-3..

Write your Link post
Choose the “Link” format type from the Format radio-button menu (located under the Publish panel)
Add the Link URL (external resource) to a custom field named “LinkFormatURL” (see screenshot below)

And that’s all there is to it! After posting a new Link, it will be displayed using the format and styles that you’ve applied. A few notes:

CSS hooks for post-formats are available via post_class()
When customizing your theme as per Step 2, don’t forget about archive.php, category.php, and any other template files that use the loop
This tutorial sets up Tumblr-style Links for your blog only, but you can check this post to setup the Tumblr Links for feeds as well

If you have any questions about setting this up on your site, leave a comment and we’ll try to help. Also, see the “Possibly Related Posts” below for related content on this topic.

Show Post Thumbnails in Feeds

Jeff Starr — Tue, 08 Jun 2010 07:05:49 +0000

One of the nice things about using WordPress’ new post-thumbnails feature is that they provide tons of flexibility in terms of where and how you display your post thumbnails. By design, post thumbnails are not included within post content, so they will not be displayed in your blog posts unless you call them specifically with the proper template tag:

When included within the loop, the_post_thumbnail() will output the markup for the post’s thumbnail, linked to a full-size or pre-sized version of the image. Of course, there are a few more awesome things that you can do with the_post_thumbnail. Now that we’ve seen how to include thumbnails in post content, let’s do it for feed content..

Display Post Thumbnails in Feed Content

To include post-thumbnails in your feeds, we need to filter WordPress’ feed functionality and inject the required template tag into both feed-excerpt and full-feed content:

// show post thumbnails in feeds
function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '' . get_the_post_thumbnail($post->ID) . '' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

Include that code in your active theme’s functions.php file and your feeds will display the post thumbnail before each post. To display the post thumbnail after the post content, a slight adjustment is made to the fourth line of the function:

$content = $content . '

' . get_the_post_thumbnail($post->ID) . '

';

The

will prevent the post text from wrapping around the post thumbnail, but theoretically its removal would enable the post content to wrap around the image:

$content = get_the_post_thumbnail($post->ID) . $content;

As easy and flexible as it is working with the_post_thumbnail(), there may be situations where you need more control over the appearance and functionality of your posts’ attached images. Fortunately, WordPress’ custom fields and image-attachment functionality enable just about any custom configuration you can imagine.

Specify Unique CSS File Per Post

Chris Coyier — Mon, 10 May 2010 21:20:39 +0000

I’m a HUGE fan of being able to link up a CSS file on a per-page basis. I just find it extremely common that a page needs CSS styling unique to it, and I hate litering a sites main stylesheet with customizations that only one particular page needs. We’ve talked about this before, and even created a custom method for doing so, as well as mentioned the art direction plugin, which makes this easily possible.

Both of those methods are still sweet, but I find in general that I like to write my CSS in actual CSS files I keep in my theme and can edit using whatever CSS editor I like, as well as keep things clean and simple in the admin. So, I’ve altered the technique a bit.

The idea is to add a simple text input to the page editor, right underneath the content area, where you can manually specify the name of a CSS file. In the image below, you can see I’ve also added one for JavaScript.

To add this to your site, it’s just some code to add to the functions.php file. Should work for any site.

// Custom Stylesheet box in Pages/Posts
add_action('admin_menu', 'digwp_custom_css_hooks');
add_action('save_post', 'digwp_save_custom_css');
add_action('wp_head','digwp_insert_custom_css');
function digwp_custom_css_hooks() {
	add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'page', 'normal', 'high');
}
function digwp_custom_css_input() {
	global $post;
	echo '';
	echo '';
}
function digwp_save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function digwp_insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		  $filename = get_post_meta(get_the_ID(), '_custom_css', true);
		  if ($filename) {
			echo "";
          }
		endwhile; endif;
		rewind_posts();
	}
}

If you are happy with just CSS only, you can stop there. If you would like the JavaScript box as well, here is that code.

// Custom JavaScript in Pages/Posts  (...lots of repeated code, could be better)
add_action('admin_menu', 'digwp_custom_js_hooks');
add_action('save_post', 'digwp_save_custom_js');
add_action('wp_head','digwp_insert_custom_js');
function digwp_custom_js_hooks() {
	add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'page', 'normal', 'high');
}
function digwp_custom_js_input() {
	global $post;
	echo '';
	echo '';
}
function digwp_save_custom_js($post_id) {
	if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js = $_POST['custom_js'];
	update_post_meta($post_id, '_custom_js', $custom_js);
}
function digwp_insert_custom_js() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		    $filename = get_post_meta(get_the_ID(), '_custom_js', true);
		    if ($filename) {
			 echo "";
            }
		endwhile; endif;
		rewind_posts();
	}
}

You could probably combine these together a bit better than I have done here, it’s a bit redundant.

How it Works

There are three things going on here, which tap into three existing WordPress “hooks”.

Adds text inputs to the page editing screen of the admin using the admin_menu hook and the add_meta_box function
Save the values of those text inputs when the page is saved using the save_post hook
Output or