Theme | coderchris.com

Posts Tagged ‘theme’

Advanced Syntax-Hilighting Online Code Editors - A Wordpress IDE?

Written by Chris on July 2, 2008 – 6:10 pm -

When I write plugins for wordpress I like to do it on a test blog in a live environment.

Maybe not the best idea, but it's how I like to do it, and it also flags up any weird and wonderful restrictions to the development of the plugin as a result of my hosting company's security policy.

For a while now I've worked with just the plain old plugin editor that comes with wordpress, but this is cumbersome to say the least and as such I went looking for a syntax highlighting editor which I could (if necessary) convert into a plugin to (ironically enough) improve the plugin editor.

Turns out that there's quite a few good syntax highlighting online code editors available (list at the end of this post) and at least one neat one (CodePress) has been converted to a wordpress plugin for theme editing and plugin editing.

This is a really great start, but there's a couple of things I'd really like to see to progress this work - If I have the time I'll do it myself, otherwise someone else reading this post may like to take it up!

Basically the current Codepress for wordpress plugin is missing (in my opinion) a few additional functions to create backups of the plugin or theme files you're working on, to an extent a rudimentary versioning system could and should be implemented within the editor.

There should be an option to package up the plugin you're editing and release it to the community/tie updates into the automatic plugin updater of 2.5

The current CodePress release is great but what would make it even greater would be code hinting when editing.

I don't know enough JavaScript to say whether or not this is possible but it would be cool for the editor to notice that you've just typed or started to type a PHP (or other language) function name, and provide you with a syntax hint for the function.

This would work (in my mind) by noticing the opening of ( and then checking what preceded it back to the last space or operator (*, ., /, etc.), then looking up this string from a function definition array and displaying a tooltip near where you are editing in the text area to remind you of the syntax - possibly with an autocomplete if you press enter.

I think the main problem with this is knowing where you are in the text area to display the div with the tool tip text in it in the right place. I know you can monitor where you are in a text area in terms of columns and rows, so surely if you know the location of the start of the text area and the size of the character in the text area and the co-ordinates of the cursor in the text area via row/column values you should be able to determine the optimal position for the <div>?

I think it would be really great to see that kind of functionality in any of the online code editors listed below on it's own let alone any other stuff such as versioning that I've already mentioned.

So there it is!

I probably will end up doing some work on the codepress plugin myself from a versioning point of view, but if any one else out there can figure out a way of doing the code hinting in JS that'd be fantastic!

Existing On line Code Editors:

Autosuggest example (could be used to provide the tool tip if the positioning is worked out): http://gadgetopia.com/post/3773

Wordpress plugins:

Codepress plugin for Wordpress: http://rulesplayer.890m.com/blog/?page_id=4
Flash based code editor with wordpress plugin (dated solution IMO): http://www.flashtexteditor.com/ftf/

Popularity: 31% [?]

Sphere: Related Content

Tags: code, codepress, editor, high, highlight, java, JavaScript, light, PHP, plugin, press, script, syntax, theme, Wordpress
Posted in JavaScript, PHP, Plugins, Pot O' Ideas, Web Development, Wordpress | No Comments »

Page and Sub-page Menus In Wordpress

Written by Chris on September 17, 2007 – 6:52 pm -

Recently I wanted to change the theme I use on my personal blog to the following: http://www.wpdesigner.com/2007/01/22/digg-3-columns-wordpress-theme/ as the current one I was using was pretty awful (to say the least) and this was a lot better

I liked this theme but unfortunately it lacked one thing (as do a lot of other themes I've used) - an auto generating set of page menu tabs at the top. The default theme just had a link to the home and about pages, so I added this in and it now works exactly the way I wanted it to. I've pasted the code below should you wish to do something similar.

This mod basically creates a list of all the parent pages along the top (which are rendered as tabs due to the css), and then when a link of a parent page is clicked, it displays the home tab, the tab for the parent page and then the list of tabs for the sub pages of that parent page.

On my site so far I only have one level of sub pages below the parent, but I believe this should work for any hierarchy of sub-sub pages - if you use this code and it does please post a comment to let me know.

Also this is a bit rough - the next time I use it I will probably clean it up a bit, but I know it works for now. If you'd like to provide me with a cleaner version before I have chance to work on it please feel free to drop me a line, and if it works I'll also post it here.

<div id="header">
<div id="menu">
<ul>
<li><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('name'); ?>"><?php _e('Home'); ?></a></li>
<?php
// From http://codex.wordpress.org/Template_Tags/wp_list_pages
$defaults = array('depth' => 1,
'show_date' => '',
'date_format' => get_option('date_format'),
'child_of' => 0,
'exclude' => '2, 53',
'title_li' => '',
'echo' => 1,
'authors' => '',
'sort_column' => 'menu_order, post_title');
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children)
{
if(intval($post->post_parent)>0)
{
wp_list_pages('title_li=&include='.$post->post_parent);
}
else
{
?>
<li><a href="<?php echo get_permalink($post->ID); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php
}
echo $children;
}
else
{
?>
<li><a href="<?php echo get_permalink(2); ?>" title="<?php _e('About'); ?>"><?php _e('About'); ?></a></li>
<?php
wp_list_pages($defaults);
}
?>
</ul>
</div>