Creating Custom Wordpress Widget - Need Breakdown of Tasks Involved

[MarximusMG]

I'm looking into creating a custom Wordpress widget for my site, and have a list of things that must be accomplished in terms of functionality. I'll start by saying that I realize this is no simple undertaking, but I have time to invest in this and will likely seek outside help as needed.

In short, I am looking to create a widget that operates similarly to what is seen on ultimate-guitar.com - I would like to have a personal collection of chord charts for songs.

From the backend, I would like to be able to create a song and populate it with the chords and lyrics (with each verse, chorus, bridge, etc. separated into a distinct component). Where it gets slightly more complex is that I want these chord charts to be customizable, in that from the front end the user will be able to drag and drop each verse, chorus, bridge, etc. into a large, blank body so that they can choose which components to choose and in which order to have them displayed. (I envision the moving of each component to operate the same as moving the widgets on the Wordpress dashboard).

Once the user has dragged the components of the song into the main body, I would like the ability to transpose the chords (located directly above the lyrics) up or down. This functionality can be seen on the chord charts on ultimate-guitar.com. After transposing to the desired key, the user will have the option to print the customized chord chart.

Finally, as if my list of features isn't long enough , I want the database of songs to be searchable or browsable. I've included a very rough sketch from my iPad of how I picture the front end to look.

Based on the above functionalities, can someone please help me out by possibly breaking down the necessary parts that will be coded and explaining how this can be accomplished? Thanks in advance!

 

[SrWebDeveloper]

I apologize if I pegged you wrong, but to me you seem a newbie to web development both front and especially back end.

One quick example as to why I suspect this:

the user will be able to drag and drop each verse, chorus, bridge, etc.

Just that, alone, could involve front end Ajax using jQuery or similar framework to handle the modal drag/drop and back end engine to generate the very specific but dynamic content you requested, all within a custom WordPress plugin or series of plugins. Very complex for a beginner, too complex for a single pre-made plugin in open source land, this request alone is easier said than done just to maintain cross browser compatibility and usability, not to mention the SQL and back end table schema design to store and fetch the data sensibly. All this, just for that!

Does that example of high level explanation satisfy your request here on the forum? If so, I pegged you wrong and others will help you with an overview of each feature as I just did, sans very specific details.

Until then, please let me take a moment to put the brakes on this - noting it would help to know 1) are YOU the developer and 2) your skill level - what is it, really?

With respect to 2, from a high level view based on your project overall you'll likely need to know:

1) WordPress plugins and how to create them
2) PHP
3) CSS
4) Javascript frameworks such as jQuery or others suited to the job
5) MySQL queries, table schema and how to integrate into WordPress
6) Ajax
7) CSS sprites

You've already created a basic wireframe, one of the many steps in web development. Next what traditionally follows are COMPS, which are details including functionality and graphics of each wireframe based on the CMS being used, which is WordPress in your case.

I want to warn you, some folks here might not be up to the challenge to help you in further detail with how each of the 7 technologies (or more) I listed above will play a role with each request in your wish list. I am hoping this reply helps you help us, because based on what I see so far and guessing your experience level -- you should consider consulting a professional as a next step. Correct me if I am wrong.

 

[MarximusMG]

SrWebDeveloper, I really appreciate the response. In answer to your question, I am familiar with PHP and CSS, but at a basic level. I should have prefaced my first post by placing an emphasis on the fact that I am planning to have outside professional help with this project. The extent of my web development knowledge lies mostly in making minor front end adjustments once a majority of the project has been completed.

The primary reason I chose to ask for help with breaking down what would be involved in this project is because I'd like to be able to accurately specify what would have to be done in order to accomplish this, as I am searching for professional help in taking on this plugin.

 

[SrWebDeveloper]

SrWebDeveloper, I really appreciate the response. In answer to your question, I am familiar with PHP and CSS, but at a basic level. I should have prefaced my first post by placing an emphasis on the fact that I am planning to have outside professional help with this project. The extent of my web development knowledge lies mostly in making minor front end adjustments once a majority of the project has been completed.

The primary reason I chose to ask for help with breaking down what would be involved in this project is because I'd like to be able to accurately specify what would have to be done in order to accomplish this, as I am searching for professional help in taking on this plugin.

Thanks for explaining.

In general, complex projects like this require:

1) Requirements - you work with the contractor to define and agree on them
2) Wire Frame - simple modals to demonstrate basic layout and widgets (anything that is dynamic, i.e. back end generated or rich user i.e. drag and drop with Ajax) and forms and other content, devoid of styling
3) Comps - a merging of the first two plus styling (you doing front end) and SEO concerns - a rendering of each page using placeholder or foobar content to demonstrate final layout and usability
4) Build
5) Test
6) Revise (repeat steps 4-6 as often as it takes until you're happy)
7) Deploy

You're asking about step 4, without talking to a professional first to nail down the game plan. That is why I responded GENERALLY, high level.

My advice is indeed to leave the "breaking down" (details and timeline of the build in step 4) to the professional because such things can only be determined after they talk to you in depth and see exactly what is involved in the build. I dare not guess which discipline comes first and send you in the wrong direction or contradict what a pro would say much more familiar with the details.

Others here might not care so much, just, well, be warned.

-jim