Posted on
I’ve been customising a theme that had a new version, getting the message “There is a new version of … available”. I didn’t want the end-user to update the theme, because I’d customised it so heavily. I know that any updates are going to need to be done by a WordPress theme developer.
After a while of searching through code, looking for add_action and add_filter hooks, and even delving into the database, I realised I could just edit the theme’s style.css and remove the “Version:” line from the WordPress specific CSS header right at the top. And the notification (and oh so dangerous link) went away!
Summary: Delete ‘Version’ line altogether from the theme’s /style.css file.
Posted on
I just updated my WordPress installation from 3.2 to 3.3. The upgrade was running but then the page directed to this message:
Briefly unavailable for scheduled maintenance. Check back in a minute.
The front page and wp-admin both showed this unstyled message. After a quick search I found that simply deleting the .maintenance file via FTP will remove this. Perhaps it’s a bug in this version, perhaps something went wrong. But after deleting that file everything seems to be working well. And I must say I like the design tweaks in WordPress 3.3.
Posted on
I’ve created plenty of WordPress themes based on designs from clients. This is the process I usually follow.
1. Create a static HTML and CSS template. I create index.html and style.css.
2. Install WordPress
3. In the WordPress folder wp-content/themes/ I create a folder with the name of my new theme.
4. Copy my static HTML to the new theme folder.
5. Modify style.css, add the WordPress stylesheet header:
/*
Theme Name: THEME_NAME
Theme URI: YOUR_WEBSITE
Description: THEME_DESC
Version: 0.1
Author: YOUR_NAME
*/
6. Rename index.html to index.php. Open index.php and replace the reference to style.css with < ?php bloginfo( 'stylesheet_url' ); ?>
7. In wp-admin, go to Appearance -> Themes and select my new theme. It will still be completely static but this is the starting point for the real WordPress theme development.
8. Create the file header.php ; move the header stuff from index.php into this file. For me this is generally from first line (the DOCTYPE) down to the start of the main content area. In index.php I insert <?php get_header(); ?> to load the contents of header.php.
9. Similarly I create footer.php and sidebar.php and then move the lines from index.php into those files, and replace with <?php get_footer(); ?> and <?php get_sidebar(); ?> respectively.
10. Edit header.php, so that it looks something like this (this is HTML5):
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_enqueue_script('jquery'); //only use if you need jquery?>
<?php wp_head(); //this does a lot of stuff ?>
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-ie.css" type="text/css"></link>
<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="Main">
<header>
<div id="Holder">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<nav>
<?php wp_page_menu(); ?>
</nav>
<div class="clear"></div>
</header>
11. Edit index.php, remove the static content and insert The Loop code, which looks like this:
<?php get_header(); ?> <div id="Content"> <?php //The Loop if( have_posts() ) : while( have_posts() ) : the_post(); echo '<h1>'.get_the_title().'</h1>'; the_content(); endwhile; endif; //end the loop ?> </div><!--Content--> <?php get_sidebar(); ?> <?php get_footer(); ?>
If there are other files in your theme directory, use
<?php bloginfo('template_url'); ?>/
… eg:
<link href="<?php bloginfo("template_url"); ?>/webfonts/bauhaus.css" rel="stylesheet" type="text/css" />
12. In footer.php I might have something like:
<footer>
© <?php echo date('Y').' '; bloginfo('name'); ?>
</footer>
</div><!--Wrap-->
<?php wp_footer(); ?>
</body>
</html>
At this point we should see our theme loading content dynamically from WordPress. But this is just the start…
See the WordPress Template Checklist for a more thorough guide to everything you might need.
Posted on
Or any type of file, really. I needed to quickly remove links from an old website that was using flat HTML files. In my linux command line, I found I could do:
perl -pi -e 's/SEARCH/REPLACE/g' *.html
To replace all instances of SEARCH with REPLACE in *.html.
Except I needed to do a fair bit of escaping, because HTML is full of characters that mean something else on the command line.
So let’s say the string I needed to remove was:
<a title="Search Engine Optimisation" href="http://superspammyseocompany.com/" target="_self"><span>Search Engine Optimisation</span></a> by <a title="Super Spammy SEO Company" href="http://superspammyseocompany.com/" target="_self">Super Spammy SEO Company</a>
I copy + pasted this into vim, and then every time these characters occur:
< , >, / and ”
I put a \ in front of each of these, which gave me:
\<a title=\"Search Engine Optimisation\" href=\"http:\/\/superspammyseocompany.com\/\" target=\"_self\"\>\<span\>Search Engine Optimisation\<\/span\>\<\/a\> by \<a title=\"Super Spammy SEO Company\" href=\"http:\/\/superspammyseocompany.com\/\" target=\"_self\">Super Spammy SEO Company\<\/a\>
Which was a bit of work, but still much more fun than manually removing the link from each file.
Note that these characters do not need to be escaped with a backslash:
= (equals), . (dot), and _ (underscore)
So my final command was:
perl -pi -e 's\\<a title=\"Search Engine Optimisation\" href=\"http:\/\/superspammyseocompany.com\/\" target=\"_self\"\>\<span\>Search Engine Optimisation\<\/span\>\<\/a\> by \<a title=\"Super Spammy SEO Company\" href=\"http:\/\/superspammyseocompany.com\/\" target=\"_self\">Super Spammy SEO Company\<\/a\>//' *.html
I’d already initialised a git repository and committed the files so I could easily restore the files in case of a mistake. A quick look through the links showed it all worked perfectly, and it saved me so much time I thought I’d write this post about it.
Bonus: I outputted all the changed files to list.html, which had one filename per line, like:
./file1.html ./file2.html ./file3.html
Here’s the vim command to turn them all into links, for easy human checking:
:%s/^\(.*\)$/<a href="\1">\1\<\/a\>\<\/br\>
Posted on
Late yesterday afternoon a client asked if I could look at a business’s WordPress installation. They had posts in several categories but only wanted to show the “Latest News” posts in the archives.
WordPress is designed around blog posts, whereas I find that many business or company sites are designed around pages (eg About Us, Contact Us) – and don’t use WordPress’ powerful blogging tools on the front page. My site is an example – the content on the home page doesn’t change that much.
This means that many of the solutions are also geared around blog-post design.
While searching I found a few examples of how to exclude a specific category from the archives, when what I needed was to include only one category in the WordPress archives – generated in the theme by wp_get_archives().
The solution is to add a filter that modifies the SQL used by wp_get_achives() to the theme’s function.php:
add_filter( 'getarchives_where', 'customarchives_where' );
add_filter( 'getarchives_join', 'customarchives_join' );
function customarchives_join( $x ) {
global $wpdb;
return $x . " INNER JOIN $wpdb->term_relationships ON ($wpdb->posts.ID = $wpdb->term_relationships.object_id) INNER JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)";
}
function customarchives_where( $x ) {
global $wpdb;
$include = '1'; // category id to include
return $x . " AND $wpdb->term_taxonomy.taxonomy = 'category' AND $wpdb->term_taxonomy.term_id IN ($include)";
}
Replace ’1′ with the category ID (wp-admin > posts > categories > edit, then in the address bar it is directly after ‘&tag_ID’) and that’s it. wp_get_archives() will now only display posts from that category.
I found this in http://wordpress.org/support/topic/wp_get_archives-and-conditional-tags?replies=6#post-1578041 (thanks Paul!).
Posted on
I’ve been meaning to update my website’s design and layout for a long time. My site is based on WordPress and the theme I’d been using previously was a little too sterile. I wanted something that was more of a portfolio site and yet could still accommodate a blog.
After sporadic searches through the free WordPress themes on offer, I decided none of them quite did what I wanted, so I designed my own.
I wanted to keep it minimal while making use of emerging web technologies like HTML5, CSS3; and I wanted the site to look just as good on smaller screen mobile devices.
To move away from the rather dry grey and blue theme I thought I’d go for something lush, and found a nice background which stretches to the browser width. The background image is called “Green Meadow II” by Timothy Schellhase, which I found on the Gnome site under the category http://art.gnome.org/backgrounds/nature (unfortunately there’s no way to directly link to it). It is released under the GNU GPL.
The title fonts are provided by Google Web Fonts, an amazing and free service. There’s a little delay on the page load but I think it’s worth it.
I wanted to include a sharing service for my blog posts, but I’m just not that happy with any of the existing WordPress plugins. They’re either very bloated, hard to configure and style, or both.
Instead I decided to just link to the social media sites I’m on, and got the icons you see at the left of the footer from http://icondock.com.
I think the most important element of a site is a contact form, which I decided to include on every page, with a bright call to action which hopefully draws the eye. On the blog pages this appears right at the bottom, as I assume blog users are more after technical information rather than my services. I created my own AJAX style WordPress contact form, which hooks in to WordPress AJAX functions to send me an email directly.
It probably needs a little more work before I can submit it to the WordPress theme repository, but I hope to release it for free at some point, with the option for the user to upload their own background image and use their own colours.
Overall I wanted to keep the design minimal, while keeping a nice balance between formal and relaxed. I think I’ve done pretty well and I’m quite happy with my new site.
So what do you think? All feedback is appreciated, please leave your thoughts in the comments!
Posted on
A client using Hostmonster was doing some hair-pulling over what appeared to be a .htaccess problem while installing a Symphony site I developed. We thought it might be related to the fact it was running on a subdomain.
The server would give a blank page, and on the HTML source would show something like “500 SHTML wrapper”.
It turns out this happens when group write permissions are set on the script. Via the Hostmonster Cpanel File Manager, you can right-click the file, click permissions and uncheck “write” and the script should run.
The way I worked this out was: first, rename .htaccess to something like _htaccess, so we know that’s not getting in the way.
Next try viewing a file like favicon.ico (this was served correctly). Then upload a simple PHP script like phpinfo.php, with contents:
<?php phpinfo(); ?>
When I did this I was still getting the 500 error. I found in a Hostmonster forum someone had mentioned group write permissions, which I started experimenting with until it worked.
Posted on
This allows you to create infinitely deep Silverstripe page hierarchies without having to mess around too much with navigation. Simple and effective.
<% include Nav %> <div id="Content"> <h1>$Title</h1> $Content $Form <% if Children %> <ul style="padding-top: 1em"> <% control Children %> <li><a href=$Link>$MenuTitle </a></li> <% end_control %> </ul> <% end_if %> </div><!--Content-->
Posted on
I came across this and there were no Google matches, which I thought was strange.
So if you’ve installed Symphony CMS under Ubuntu (I have 10.04, Lucid Lynx) and get the message “no suitable XSLT processor was found”, it means that you need to install the package “php5-xsl”.
I like GUIs so I used Synaptic, but I’m sure you could also do something like “sudo apt-get install php5-xsl”.
Then restart Apache with “sudo /etc/init.d/apache2 reload” to load the XSLT module.
Posted on
It’s been a long time between posts, mainly because I’ve been so busy. Lately I’ve been working with Symphony CMS. Which means I’ve been writing templates using XSLT, which I think is excellent for writing templates. My XML skills have really advanced over the last 6 months. Using XSLT you can transform one bit of XML into another bit of XML. And because XHTML is XML, it means that I can transfer the XML data output from my Symphony data sources to XHTML.
The documentation that does exist for Symphony is quite good, but there seems to be a lot that simply isn’t there. Hopefully that will improve in the future.
I’ve already used Symphony on a couple of projects. It’s a CMS that looks after the developer as much as (perhaps more than) the content author. The learning curve for the developer is pretty steep but once I got over it, it’s been very smooth sailing. If it’s possible to sail down a curve.