RSS

Author Archives: terrytek

Things to remember when porting a WordPress site

I recently redid the website of the non-profit for which I work. The original site was HTML/CSS, but the Executive Director wanted it redone in WordPress, since she has a WP blog and is familiar with the interface. I knew very little about the inner workings of WP, but have “learned by doing” these last many weeks. I didn’t even know when I started that there are really two WordPresses; wordpress.com, on which you’re reading this blog; and wordpress.org, where the non-profit’s website was developed. (You can view the site at www.lcnlit.org) .

(For those of you unfamiliar with the two WordPresses, wordpress.com is a site where your blog is hosted for free. Your domain name is generated by wordpress and has wordpress.com in the URL, as you can see if you look at the URL of this blog post you are currently viewing. You can upgrade and get your own domain name and increased control over the look of your site for $99/year. wordpress.org is the site you should use if you want to do a WP site with a domain name and/or server that you are already paying for. You have unlimited control over the look and feel of your site there.)

Using WP as a CMS for a static site is not without its issues. Even though it’s a very powerful platform, it was and still is geared towards blog sites, not static sites. Things like comments and their handling, post archives/categories/tags, and the like are not things that I needed too much for a static site. I actually ended up making the home page of http://www.lcnlit.org a series of three posts, not a wp page, so that I could get the look that I wanted. I stripped the posts of metadata (author, date and time) to make them look like parts of a static page rather than posts, but under the hood, they’re still posts. For those developers used to making changes to the HTML, using WP as a CMS requires some adjustment. A good deal of the HTML used to generate a wp page or post is pulled from the site database using PHP. Tracking down something that you need to change on the site is much more difficult when you can’t go directly to the HTML and change it yourself–Chrome Developer Tools or Firebug for Firefox can tell you where in the generated HTML file something resides, but NOT which PHP file generated that HTML or where in that PHP file you need to make the change.

Here are some things you need to check if you are moving your WP.org site from one server to another. In my case, I moved the site from a local development site on my computer to our live server, but I would imagine some of these things need to be checked if you’re moving from one server to another as well.

(1) MENU LINKS:

Before you port the site, go into the general settings and change the WordPress address and site URL to your new URL. This will update most of the necessary links in your site. After porting the site, check the links back to your home page in your menu(s)–Appearance>Menus>click on the dropdown arrow to the right of your home page’s bar in the menu. Update that link to your new URL.

When I ported the lcn site, all of the pages in the menu linked fine to each other, but when I clicked “home” on the menu, they were looking for the address of the home page on the local development site until I updated the URL to the live site URL manually.

(2) PERMALINKS: 

Before you port the site, go to Settings>Permalinks and make sure the links are formatted the way you would like. In my case, I used the custom structure and added “/home” in the text box. This resulted in the permalinks having the structure of “my chosen URL/page slug”. (To view your page’s slug, while on the page editing screen,  click “Screen Options” in the upper right corner and make sure that “slug” is checked. The slug will then appear at the bottom of your editing screen).

After you port the site, go back to Permalinks and resave.

I did not have any permalink problems after porting the site, but from what I’ve read on the web, broken permalinks are a big issue when moving a site.

(3) IMAGE LINKS:

All of the image links in my site were messed up by the move; I had to redo every link. Grr.

There is a plugin called Duplicator which is supposed to make moving your site easier, but I didn’t learn about it until after I had moved the site. I hear good things about it.

(4) CHECK YOUR WIDGETS:

I had a link/image in one of my text widgets that had to be totally redone after the move. I don’t think making changes in the General Settings filters down to the widgets, so recheck any links or image links in your widgets after a move.

(5) BE VERY CAREFUL PORTING YOUR WP DATABASE:

The WP database is where all of your site’s information resides. The db name and password can be long and complicated, so check and recheck the accuracy of your information when going between the old and new servers.

(9) CONSIDER WHAT TO DO WITH YOUR PLUGINS:

One of the plugins that I had installed on the site on the local server was quite complex. When I was uploading this particular plugin to the live site, I accidentally deleted a file it had put outside of the Plugins folder which was integral to the plugin’s function. This could have been disastrous, as the lack of this file corrupted the site enough that I couldn’t even get into the wp admin of the site. Fortunately, I realized what had happened and reuploaded the relevant files, and then I could get into the wp admin (phew!) Since our previous live site had been superseded by the wp site, if I hadn’t been able to get back into the admin, our live site would have been a badly corrupted wp site, not a desirable outcome!

If I had this port to do over, I would not have uploaded this complex plugin via FTP. I would have uploaded the site to the live server and then reinstalled the plugin on the live site. This would have been an option for me since I did not have very much data stored in the plugin, but would NOT be a good option if you had a plugin with a lot of data that would need to be replaced, as might happen if you’re porting your site from one live server to another.

Advertisements
 
Leave a comment

Posted by on May 8, 2013 in WordPress

 

Tags: ,

Navigation images and accessibility

I am working on a homepage for my personal website. I have an image that I want to use as my navigation, but I also want to make my site accessible to text-only browsers and screen readers (not that there’s going to be any great stuff on my website, but I want to learn good practices). Making image navigation accessible is a lot harder than it sounds.

If you make the text of the image hidden using CSS, some screen readers won’t read the text. The same is true for the negative text indent, which advocates giving your text-indent a high negative value so that the text doesn’t appear on the screen. But both of these approaches don’t help when a user has a text-only browser, has images turned off, or is using certain types of screenreaders (some people turn off images on their portable devices to speed up download times, which can be agonizingly slow when you’re used to a broadband connection on a computer). So what to do?

There is a rather cumbersome workaround that involves putting an empty <span> element in each list item of the navigation so that you can put the navigational image on top of the text version, thereby showing the text if images are off or someone is using a screen reader. The empty <span> is certainly not good semantic use of html, and the process also involves giving each <li> in the nav its own id.

The best workaround I have found is Seamus Leahy’s “Image Replacement–No Span”. It is beautifully simple and gets the job done. Try it in your browser. You can easily view the “bare bones” html output in Firefox 4; View>Page Style>No style. For IE9, Tools>Internet Options>Advanced>Multimedia, uncheck “Show Pictures”. In Chrome 12, Wrench icon>Options>Under the Hood>Content Settings>Images>check “do not show any images”. (It would be really nice, IE and Chrome, if you could turn images off for just one page at a time like you can in Firefox!!) If you try this with Leahy’s code, you’ll see that without images, the text appears on the screen. In the case of navigation links, the links appear and are fully functional. Voilà!

 
Leave a comment

Posted by on July 12, 2011 in CSS, HTML5

 

Tags: , ,

Learning CSS

Unfortunately, the course “HTML and CSS from the beginning” turned out to be “HTML from the beginning”. The instructor decided that he didn’t have time to keep preparing lessons and providing feedback along with his work obligations, so the course was prematurely terminated. That means I am learning CSS on my own. It’s too bad, because the instructor was very good. It was a free course, though, so I can’t complain too much.

Fortunately there are practically infinite web sources to learn CSS. But unlike HTML5, which is a fairly new standard upheld by the major browsers, CSS is still in version 2.1 and still has some major limitations and browser quirks. CSS 3 is in development, but some browsers are implementing some of its features now. This is a long-winded way to say that it seems to be harder to find current CSS best practices than it is to find HTML5 best practices. If you’re learning something new anyway, you might as well learn it the right way!!

Since I’m trying to learn web design with the best practices possible, and since I don’t have any production deadlines to meet (yet), I want to learn as much about accessibility as I can while learning CSS. More on that in the next post.

 
2 Comments

Posted by on July 12, 2011 in "HTML and CSS from the Beginning", CSS

 

Tags: , ,

Week #4 reflection

I find that the more I’m learning, the more I realize I don’t know. I guess that’s not a bad thing; it just stimulates the desire to learn more.

“Learn By Doing” has always been one of the most effective learning methods for me. Once I make a certain mistake and learn how to correct it, I’m not likely to forget the right procedure the next time. One implementation of that this week is my attempt to use internal CSS stylesheets in some of my HTML documents (my elementary attempts at CSS in previous weeks were done with external style sheets). Jamie had said a few weeks back that I should comment more, so in an effort to do so, I had put some comments within the style tag (that’s where you put an internal style sheet). I found out putting comments inside the style tag is not a good idea!! Evidently, it can screw up the browsers’ reading the stylesheet, as I found out in my p, article, header, footer file. I had put a comment inside the style tag of that document and could not figure out for the longest time why my browser was formatting the #notable properly but ignoring the formatting for the #checklist (both were after the comment, but the comment seemed to affect them differently)!! And I found out in week #2 that you can’t leave a space between a number and its unit in CSS, because if you do, the CSS doesn’t work! So that is another mistake I won’t make again. Learn By Doing, it’s a mantra to live by 😉

I really like that HTML5 has tags that seem to be more descriptive of their contents than the “universal” div tag, like header, footer, article, nav, etc. I’m sure it will lead to code that’s easier to read, even if I don’t totally understand all the uses of the new tags yet.

Enjoying this learning journey very much, but not quite sure where I’m going with the final project…have to keep thinking. I’ve also learned a lot from my fellow classmates and enjoy reading their blogs; thanks to all of you for your help!

Antsy to start CSS!!

 
 

Tags: , ,

The World Around You Part III

I have a lot of photos and files, but in some photos/files I cover more than one of the tags assigned.

p, article, header and footer tags

(oops, I forgot the h5 tags around the two small-font colored blocks of text above (the yellow “The Checklist” and the black “Notable Quote”. Sorry.)

The p tag is for a paragraph or unit of text. As with most block elements, it starts on a new line and adds a blank line afterwards. However, I learned the hard way that you cannot nest lists (ul, ol or dl) inside p tags (I know this because your code doesn’t validate if you do that).

The article tag is for a page unit that can stand alone, like an article, blog post, etc. It’s new in HTML5.

The header and footer tags are just what they sound like–tags that allow you to group items in your header or footer together. They are sort of like specialized div tags, and they’re new in HTML5 (yay, HTML5)!

View the p, article, header, footer HTML file here.


div tag

The div tag is basically a container for a unit of content that you want to treat as one unit. Before HTML5, things you now place in nav, header, footer or article tags would have been in div tags.

View the div HTML file here.


nav tag

The nav tag is a way to group the navigational items on your page in one place. Yet another new tag in HTML5.

View the nav HTML file here.


dl and blockquote tags

The dl tag is for a definition list, where the terms to be defined have dt tags and their definitions have dd tags. Blockquote is used to set off a block of text from the surrounding text, such as a quotation.

View the dl, blockquote HTML here.


ol tag

The ol tag is for an ordered list, where the items need to be in sequential order.

View the ol HTML file here.


ul tag

The ul tag is for an unordered list, where the items don’t have to be in a particular order.

View the ul HTML file here.


span tag

The span tag is an inline element, useful when you just need a touch of CSS for a few words, etc. within a block element.
View the span HTML file here.


time tag
The time tag is used to indicate a specific date or time. As many of you know, I have struggled with the use of this element 😉 but my current understanding is that it enables people and computers to be sure they are referencing the same exact date and/or time, which is useful for example when you are dating a blog post or the computer is parsing HTML for an appointment to go into a calendar. It is a new tag in HTML5 and there probably will be uses for the tag in the future that haven’t been invented yet.
View the time HTML file here.


It took forever to get the text to “stay” with its relevant photo; what a nightmare 😦

 
 

Tags: , ,

Self-Assessment #2 (one of week 4’s assignments)

Here is my self-assessment table. Both the HTML and CSS validated.

Three things I’m having trouble with in HTML:

(1) I don’t know if “having trouble” is the right word, but I feel like I need to learn and experiment a lot with the img tag, since it’s pretty important in creating a web page;

(2) Still don’t totally understand the time tag. I can write a valid one, and understand how it is used to mark the date of, for example, a blog post, but someone on the Google list said “We use the time tag at my work to display our hours for that specific day and to display any events we have going on (ex- we have a charity ride leaving in 2 hours……1 hour….etc)”. I would like to know specifically how that works, and haven’t been able to find an explanation that makes sense to me on the web yet;

(3)I understand how to nest tags but am still learning about block-level vs. inline, and which tags can/cannot nest inside which other tags (the p tag in particular). I’ve had it explained to me but can’t always remember it when I’m actually writing HTML.

 
 

Tags: , ,

Reflections on week #3

I learned a lot with this assignment, because unlike the previous two assignments where the html tags were mostly familiar to me, this week’s had many tags that were new to me, such as <time>,<article>,<dl> and so on. When validating my html file, I learned that certain tags can’t be contained within certain other tags. For example, lists can’t be nested inside the <p> tag.

I understand the value in marking up pictures, but I find it frustrating to do the text on them; there’s never enough room!!

Even though we haven’t done CSS yet, I have a .css file with my .html file this week because I’ve been fooling around with CSS.

Looking forward to the next assignment, especially since things have been a bit hectic in my house the last few days, but now I’ll have more time.

 
 

Tags: , ,