Title: Custom Topbars
Last modified: August 21, 2016

---

# Custom Topbars

 *  Resolved [harley130](https://wordpress.org/support/users/harley130/)
 * (@harley130)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/custom-topbars/)
 * How can I create my own custom topbars and seed them in the examples? Can they
   be designed in Photoshop to same dimensions as sample images? Will they then 
   be visible in the plugin?
 * [http://wordpress.org/plugins/wp-topbar/](http://wordpress.org/plugins/wp-topbar/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434193)
 * The Sample TopBars are generated from this file: `../wp-topbar/lib/samples/sample_topbars.
   json`
 * To create your own samples, you can first create them as normal TopBars. Then
   export your existing TopBars as a JSON file and then replace the file above with
   your file. Make sure to put any images in the ../samples directory. You might
   have to edit the JSON file to fix any image file locations.
 * Note that with every upgrade, the sample_topbars.json file will be replaced.
 * Bob
 *  Thread Starter [harley130](https://wordpress.org/support/users/harley130/)
 * (@harley130)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434203)
 * Thanks Bob, will give it a look and see what I can do.
 *  Plugin Author [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434273)
 * I’ve coded up a way to have your own custom TopBars added to the Samples tab.
 * Here is the FAQ entry. This will come out in v. 5.17:
 * `First create all the TopBars you want as custom Samples. Then export the TopBars
   in the JSON format. Now, create a location on your server to store the files.
   For example ../wp/wp-content/plugins/wp-topbar-samples. Next rename the export
   file to custom_topbars.json. Now move that file, plus any images you need into
   the directory you created. Finally, go to the General Settings Tab and enter 
   the URL for the directory in the "Custom Samples URL" field. Now, the TopBar 
   will first display the Standard samples then the TopBars from your custom_topbars.
   json file. You can then copy these new TopBars just like the Standard samples.`
 *  Plugin Author [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434318)
 * harley130, try version 5.17. I just pushed it out.
 *  Thread Starter [harley130](https://wordpress.org/support/users/harley130/)
 * (@harley130)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434319)
 * I’ll give it a spin when I return home from Christmas vacation.
 *  Thread Starter [harley130](https://wordpress.org/support/users/harley130/)
 * (@harley130)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434334)
 * In your above post, you say after creating the toolbar (which I would do in Photoshop)
   to export it in .json format. What program will export in the .json format. I’m
   not familiar with the format and I don’t see where PS will export in the json
   format.
 *  Plugin Author [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434335)
 * So, I understand that you created a background image for a TopBar to be used 
   in by plugin.
 * To add this background image into the samples, you need to create a TopBar in
   the plugin — adding your background image to it (using the **TopBar Text & Image**
   tab). Adjust your settings to get the TopBar how you want it to look.
 * Then, you can export all of your Plugins using the Export Tab and selecting the
   JSON option.
 * Now, you can upload that JSON file and all images to a directory on your webserver.
   You’ll need to rename the file per the FAQ.
 * Finally, go to Global Settings and enter in the URL of the directory that has
   the JSON file and associated images. That URL goes into the **Custom Samples 
   URL** field.
 * Now, you can go to the Samples Tab and your TopBar(s) will show up there.
 * Does this answer your question?
 * Bob

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom Topbars’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-topbar_706d6d.svg)
 * [WP-TopBar](https://wordpress.org/plugins/wp-topbar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-topbar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-topbar/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-topbar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-topbar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-topbar/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/custom-topbars/#post-4434335)
 * Status: resolved