How-to: Developing simple SPIP plugin

Creating the simplest SPIP plugin. Plugin name: voltaire.

Task definition

It is necessary to create plugin that would allow to change properly the contact information and then, to bring it out in right place. Information is 4 text fields (Header contacts, Footer contacts, Column contacts, Creeping line). Actually, 4 new fields have to be added in SPIP base.

Access to task of this information must be performed by button in menu “Site editor”.

Create file plugin.xml

Now, we create a directory /plugins/voltaire in which the development will be performed.
Creating a file plugin.xml – file with information about plugin. The plugin can not be without this file. Then, we put a minimum data set in that file for our plugin:

<plugin>       
        <nom>Voltaire</nom><!-- Plugin name -->
        <auteur>Aleksey Yaroshchuk (a.yaroshuk@aloha.org.ua)</auteur><!-- Plugin creator -->
   <licence>GNU/GLP</licence><!-- Licence-->
        <version>1.0.0</version><!-- Version of plugin -->           
        <description> <!-- Description on different languages -->
        <multi>
        [en] This plugin provides simple adding of contact information
        [ru] Этот плагин позволяет легко добавлять контактную информацию
        </multi>
        </description>
        <etat>test</etat><!-- Plagin state. It can be  dev and stable -->
   <prefix>voltaire</prefix><!-- Plugin preface. It is recommended to create tha same name of folder in order to avoid mistakes -->
   <icon>img/voltaire_128x128.png</icon><!-- Link on plugin icon, which lies on plugin folder img-->
        <bouton id='voltaire_button' parent='naviguer'><!-- Add button  "Website editor", which leads on editing of plugins info. -->
<icone>img/voltaire_24x24.png</icone>
<titre>Contacts</titre>
<url>cfg&cfg=voltaire</url>
</bouton>
        <necessite id="cfg" version="[1.15.2;]" /><!-- Make notice yhat our plugin will not operate correctly without cfg plugin version >= 1.15.2 -->
</plugin>

Configuration setup of our plugin by means of CFG plugin

Since our plugin will not create its tables in data base, and will store information in metatable and operate with it through plugin CFG, hence, forst of all, we create the directory fonds. In this directory we create cfg_voltaire.html. File name is very important for its correct catching by plugin CFG. As it is seen, our plugin prefix takes part in its name. The file content will be approximately following:

<!-- Next comments are info for CFG plugin -->
<!-- titre=Voltaire -->
<!-- autoriser=configurer -->
#CACHE{0}
<div class="ajax"> <!-- You can easily remove class ajax, the form will not be proceeded through ajax -->
#FORMULAIRE_CONFIGURER_VOLTAIRE
</div>

As you see, the whole point of this file consists in inserting the form of plugin configuration and writing some service information (which can be also inserted in form).

After that, we create a directory formulaires that includes a file configurer_voltaire.html – for the same configuration form. In that file we write all fields which we want to store in meta table in data base, and plugin CFG will take care about their storage. This file content will be such:

<!-- A little bit more info for plugin CFG -->
<!-- autoriser=configurer -->
<!-- refus=<:cfg:refus_configuration_administrateur:> -->
<!-- nom=voltaire -->
<div class='formulaire_spip formulaire_configurer formulaire_configurer_#FORM' id='formulaire_configurer_#FORM'>
<h3 class='titrem'>Configrationof plugin Voltaire</h3>
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
<form method="post" action="#ENV{action}">
        <div>
#ACTION_FORMULAIRE{#ENV{action}}                
           <ul>
<li class="editer_header_contacts">
<label for="header_contacts">Контакты вверху</label>                                
<input type="text" name="header_contacts" class="text" id="header_contacts" size="60" value="#ENV{header_contacts}" />
</li>
               <li class="editer_footer_contacts">
<label for="footer_contacts">Contacts in footer</label>                                
<input type="text" name="footer_contacts" class="text" id="footer_contacts" size="60" value="#ENV{footer_contacts}" />
</li>
               <li class="editer_column_contacts">
<label for="column_contacts">Contacts in block</label>                                
<input type="text" name="column_contacts" class="text" id="column_contacts" size="60" value="#ENV{column_contacts}" />
</li>
               <li class="editer_creeping_line">
<label for="creeping_line">Creeping line</label>                                
<input type="text" name="creeping_line" class="text" id="creeping_line" size="60" value="#ENV{creeping_line}" />
</li>               
</ul>
<p class='boutons'><input class='submit' type="submit" name="_cfg_ok" value="<:bouton_enregistrer:>" /></p>
</div>
        </form>
</div>

Now, it is time to enter in adminpanel, install plugin and make sure that the button “Contacts” in the part “Site editor” leads to the page of plugin editing since we have written in file plugin.xml. Also we will make sure that data entry is stored in data base.

Data output in templates

In principle, I could tell how to create tags for information output being needed. But, as far as standard tag #CONFIG is sufficient for this plugin, thus, I have no need to create unnecessary code. And about creating tags I will tell you in another article. So, for information output it is quite enough to apply one of next constructions:

#CONFIG{voltaire/header_contacts}
#CONFIG{voltaire/footer_contacts}
#CONFIG{voltaire/column_contacts}
#CONFIG{voltaire/creeping_line}

That’s it! Now, our simple plugin is ready for usage.

to top