CSS

Menu Behind Youtube Video

Leave a comment

After embedding a Youtube video on the front page, I noticed that the drop down menus were appearing behind the video, making some pages inaccessible from the menus. Not good.

Some poking around Google led to http://manisheriar.com/blog/flash_objects_and_z_index

I found that only step 3 (setting wmode=”transparent” in the embed tag) is necessary. To get that version of the embed code, it is necessary to select the “Use old embed code” checkbox in Youtube’s embed settings. However, this means that only Flash playback is supported.

Prior to this, I also tried wrapping the embed code in a <div> and using the z-index CSS setting. That didn’t work at all. Perhaps there’s another solution that will work with the iframe embed method so HTML5 video can also be supported.

Functions, Templates

Podcast Feed

7 Comments

Since my site has weekly MP3 uploads, it makes sense to create a podcast feed for it. Unfortunately, those updates were implemented with custom post types, which don’t generate podcast feeds automatically with the <enclosure> tags. Thus I would have to generate a custom feed myself.

The Codex page on Customizing Feeds explains how to get a custom post type to use my own custom feed. Since I’m using a child theme, I used get_stylesheet_directory() instead of get_template_directory().

When I first setup the custom post type and imported the existing content, the meta value _wp_attached_file included the full URL. It still does as the custom insert post functions for the custom post type have been written that way. Thus to generate the path to the file (to get the filesize for the RSS feed), I had to modify the output of get_attached_file() by using the get_attached_file filter.

Using the default RSS2 template as a starting point, I modified the template to produce a feed which more or less follows the iTunes format. The major challenge was getting the filesize of the MP3 files, this was done with the PHP filesize() function.

$size = filesize( get_attached_file( $child->ID ) );

The author and subtitle fields were field with the available post meta stored with the custom post type.

A strange problem I encountered was that this worked perfectly with iTunes on my test setup, but iTunes refused to recognize the feed properly on the live site. This was solved by using feedburner, and subscribing to the feedburner feed instead. However, this still doesn’t explain what’s wrong with the feed on the actual site which prevents iTunes from getting it properly.

Administration

Amazon Web Services

Leave a comment

Amazon Web Services (AWS) provides computing resources in the cloud. You can get access to as many ‘machines’ as you’re willing to pay for, as well as storage, database services and many others. All these can be combined to create a rapidly scalable application.

AWS does provide a free usage tier, allowing anyone to sign up and try out the service for free for a year, as long as the application remains below limits. Full details of these limits can be found on their website.

The free usage tier includes 750 hours of an EC2 micro instance, enough to run a little web server. The rest of this post will give a brief overview of how to get WordPress running on EC2.

Start by creating a new instance in the region of your choice. The Amazon Machine Images (AMIs) which are free to use are marked with a yellow star. AWS has recently started offering Ubuntu as a free image. This has made it much easier for me to get stuff working.

AWS provides instructions on how to create a SSH key and use it to login to the instance. If you want to allow others or other machines to login, generate SSH keys for them and place the public portion in the /home/ubuntu/.ssh/authorized_keys file.

Install Apache, PHP and MySQL using apt-get. This is basic LAMP setup stuff.

Install SVN. This is optional, but I like using SVN to install WordPress because it’s so easy to update.

To change the location of the webroot folder, change the DocumentRoot setting of /etc/apache2/sites-enabled/000-default

For permalinks to work, mod_rewrite must be enabled. Also, the AllowOverride setting in the 000-default apache configuration file must be set to ‘all’.

From the AWS Management Console, click on the instance to see its public DNS information. This address is the publicly accessible IP address. The full domain name ending in ec2-xxx-xxx-xx-xx..compute.amazonaws.com can be used for the WordPress site and home URLs. You can also create a shorter address with DynDNS and point it to the IP address given.

Before your web server can be reached from the internet, there’s one more thing to do. Go to Security Groups in the AWS Management Console, it’s under the Network & Security section. Select the security group used by your instance. Add a new inbound rule for port 80 (HTTP). This is necessary for the web server to be publicly accessible.

Now that everything is ready, use any method you like to install WordPress. Remember to create a database and user first.

Administration

SSL Certificates

Leave a comment

Strictly speaking, this isn’t a WordPress post. However, it is related to the server setup I use for WordPress development and testing.

I’ve been using Apache’s built in snakeoil SSL certificate because the server was only accessible on port 443. However, this gave that ugly and very scary looking untrusted SSL certificate error whenever I accessed my own development server. One day, I got sick of that extra click to confirm that I wanted to continue, so I decided to do something about it.

Generating a new Certificate

Information about generating self-signed SSL certificates is available in the documentation located at /usr/share/doc/apache2.2-common/README.Debian.gz

Run the command 

make-ssl-cert /usr/share/ssl-cert/ssleay.cnf /path/to/cert-file.crt

This will prompt for the hostname, where I put the domain name of the dyndns address. This command generates both the public and private key and puts them in the same file. The documentation suggests putting it in /etc/ssl/private

Configuring Apache

Modify the apache2 configuration in /etc/apache2/sites-enabled/default-ssl
Change the value of “SSLCertificateFile” to the path of the newly generated certificate. Comment out “SSLCertificateKeyFile” as both parts are in the certificate file.

Generating the Public Key for the Cert

Generate the public key portion of the certificate by running 

openssl x509 -in /path/to/cert-file.crt -out /path/to/output -pubkey

Importing the Certificate

Copy the public certificate file to the host machine. You can also do this on other machines used regularly to access the web server.

From Start -> Run, type in ‘mmc’. Go to File->Add/Remove Snap-in, and add the certificate snap-in.
Expand Trusted Root Certification Authorities ->Certificates, then go to Action->All Tasks->Import in the menu.

Import the public key file. The default location is Trusted Root Certification Authority.

After this, Chrome and IE will no longer give scary looking warnings about untrusted certificates.

Plugins

SlideDeck Bumps

Leave a comment

With new events coming up, it was time to replace the Slidedeck on the home page. This turned out to be more difficult than expected.

Firstly, the Insert SlideDeck button was hidden behind the Upgrade banner. When I moved that admin widget away from the sidebar to the main post column, the ‘Insert’ button became visible, but it didn’t work. Terribly irritating.

I remembered that all it did was to insert a shortcode into HTML view, but when I tried [Slidedeck], that didn’t work either. After firing up my development VM and checking the test page I had created, I realized that the shortcode is case sensitive.

For my own reference, and because all the information online was on how to use the ‘Insert’ button, the shortcode I’m using is below.

[SlideDeck id='xxxx' width='100%' height='250px'] Replace xxxx with the id number of the SlideDeck, which can be seen when editing it.

Administration

Error Establishing a Database Connection

1 Comment

I hadn’t started up my virtual test server since changing the network configuration to get port forwarding to work properly. Today when I tried it out, I got the dreaded “Error Establishing a Database Connection” message on all my local WordPress sites.

Even the mysql client couldn’t connect to the database, and of course neither could phpmyadmin. The database server was running and I had even restarted it multiple times to make sure. Removing it and installing it again didn’t help either.

I finally found the problem in the mysql config file in /etc/mysql/my.cnf. The bind-address setting was set to the old fixed IP address I had been using. I’m not sure why it hadn’t broken before when I first changed from a fixed IP to the Virtualbox NAT. I changed it back to ‘localhost’, restarted mysql server, and all my sites started working again.

EDIT: I realised from WordPress.com’s statistics page that there are quite some visitors landing here by searching for the title. The information above is probably not what you’re looking for.

If you’re getting this error on your WordPress.org self hosted install, check the settings in the wp-config.php file. If you’re unsure what the values should be, ask your hosts. Every host configures their servers in their own way. Some have the database on the same machine, so the DB_SERVER setting is ‘localhost’. Others might put it on a dedicated database server with its own hostname. Also make sure that your hosting plan lets you use a database. Some of the cheapest ones may not.

If you’re still stuck, post a question in the Installation or How-to and Troubleshooting sections of the WordPress.org forum.

Administration

Networking Woes

Leave a comment

After changing ISP, I got a new modem with a built in wireless router. I managed to configure port forwarding and get it to work with my test server running on VirtualBox. Just for the record, the port forwarding interface on the device required me to select from a list of devices. I had to port forward to the host machine’s IP.

After some weeks of using the built in wireless router, I got tired of the weak signal strength. To be fair, it might be because it is placed in a less centralized location due to wiring constraints. I decided to connect my Linksys router to it and use the Linksys device for wireless service.

I had previously tried connecting a LAN cable from the local Ethernet port of the ISP provided modem to the WAN port of the Linksys device. That didn’t work at all. However, it does work when it’s connected to a LAN port on the Linksys device. I’m not sure why that’s the case as I thought putting it to WAN would just send all the packets through another layer of address translation.

Next step was to disable the wireless network on the built in modem and make sure that the Linksys router was configured with the desired settings. This was accomplished with the provided web administration interfaces.

When I tested the network, some devices could get Internet access, while some couldn’t. I had to disable and re-enable the wireless network adapter to get it to work.

Unfortunately, all these steps broke port forwarding to my guest OS. I had VirtualBox set up to use a bridged network, but it looked like the modem didn’t even recognize the guest as its IP did not show up in the list of connected devices.

I looked through the other network options in VirtualBox and looked up the documentation.

It turns out that with the NAT option, I could run a server on the guest OS if I configured port forwarding with VBoxManage. There’s even an example on the page.

Shut down the guest OS, change the networking option to NAT, and run the following command.

VBoxManage modifyvm "guest-name" --natpf1 "guest-https,tcp,,443,,443"

Restart the guest. As no IP address was specified with modifyvm, it is necessary to use DHCP on the guest. Change the networking settings, restart the eth interface, and try to access the web server.

A request to the web server now goes to the modem, where it is forwarded to the host machine, which then forwards it onwards to the guest! A little convoluted, but once again my test server is publicly accessible so I can ask friends for feedback.

Functions

Hiding the Editor Part 2

3 Comments

A previous post explained how to hide the WordPress editor for custom post types.

I just noticed that this no longer works in WordPress 3.3.1. It looks like the CSS Ids have changed for the editor. The whole editor is now enclosed by a div with the id ‘postdivrich’.

Thus the hide_editor() function now reads as below. Much simpler.

	function hide_editor() {
		?>
			<style>
				#postdivrich {display:none;}
			</style>
		<?php
	}
CSS

Adding Announcements

Leave a comment

As the new year came round, a requirement to post announcements on the home page of the site came up. I figured that the easiest way to do this is to edit the page content directly. Using the built in HTML editor, I put the text in an ‘announcements’ div.

<div id='announcements'>
Announcement text here</div>

A simple addition to the theme’s stylesheet ensured that the text would look different and stand out.

#announcements {
	background-color: #21759B;
	color: #FFFFFF;
	clear: both;
	padding: 6px 12px 6px 12px;
	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	margin-bottom: 20px;
}

Of course, this only looks nice if the announcements area isn’t too long. Future work may include adding ‘Announcements’ as a custom post type so other people can make the changes easily. With more announcements, it may also be necessary to use a ticker style, showing only one at a time and allowing the user to scroll through the list.

Administration

WordPress 3.3

1 Comment

WordPress 3.3 is out!! Upgrade your sites now. Here’s what I did to upgrade.

  1. Backup the database. Using phpmyadmin provided by my host, I exported the database to a .sql file, just in case.
  2. Upgrade. Using SSH, I logged in to my webhost and ran the following command in the root directory of my site.
    svn co http://core.svn.wordpress.org/tags/3.3 .
    This works because I used SVN to install WordPress. Personally, I like this method as it is very easy to switch versions if I ever have to. I can even switch to trunk if I’m feeling adventurous. I have yet to do this though.
  3. Update the database. Visit domain.com/wp-admin/upgrade.php and a page will come up prompting for a database update. Just click the button.
  4. Update plugins. Slidedeck was the only plugin that needed updating. Remembering what happened the previous time, I backed up my custom skin first. Sure enough, the update overwrote the folder and I had to copy the skin back.
  5. Enjoy WordPress 3.3 🙂
Design a site like this with WordPress.com
Get started