Added a Tweet, too ...<br><br><div class="gmail_quote">On Mon, Jan 24, 2011 at 6:55 PM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com">emil@themeid.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">
<div>Good job, tweeted as well :)</div>
<div><br clear="all"> </div>
<div><font size="1"><b>Emil Uzelac</b> | ThemeID | T: 224-444-0006 | Twitter: <a href="http://twitter.com/emiluzelac" target="_blank">@EmilUzelac</a> | E: </font><a href="mailto:emil@themeid.com" target="_blank"><font size="1">emil@themeid.com</font></a><font size="1"> | </font><a href="http://themeid.com/" target="_blank"><font size="1">http://themeid.com</font></a></div>
<div><font size="1"><font color="#666666"><i>Make everything as simple as possible, but not simpler.</i> - Albert Einstein</font></font></div><div><div></div><div class="h5"><br><br><br>
<div class="gmail_quote">On Mon, Jan 24, 2011 at 5:49 PM, Chip Bennett <span dir="ltr"><<a href="mailto:chip@chipbennett.net" target="_blank">chip@chipbennett.net</a>></span> wrote:<br>
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;" class="gmail_quote">*jaw drops*
<div><br></div>
<div>Now *that* is an awesome tutorial! Well done, Daniel!</div>
<div><br></div>
<div>(Tweeted)</div>
<div><br></div>
<div><font color="#888888">Chip</font>
<div>
<div></div>
<div><br><br>
<div class="gmail_quote">On Mon, Jan 24, 2011 at 5:34 PM, Daniel Tara <span dir="ltr"><<a href="mailto:contact@onedesigns.com" target="_blank">contact@onedesigns.com</a>></span> wrote:<br>
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;" class="gmail_quote">
<div vlink="purple" link="blue" lang="EN-US">
<div>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">I wrapped this into and article. Hope it helps you and all developers in need out there:</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"><a href="http://www.onedesigns.com/tutorials/separate-multiple-theme-options-pages-using-tabs" target="_blank">http://www.onedesigns.com/tutorials/separate-multiple-theme-options-pages-using-tabs</a></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><b><span style="font-size: 10pt;">From:</span></b><span style="font-size: 10pt;"> <a href="mailto:theme-reviewers-bounces@lists.wordpress.org" target="_blank">theme-reviewers-bounces@lists.wordpress.org</a> [mailto:<a href="mailto:theme-reviewers-bounces@lists.wordpress.org" target="_blank">theme-reviewers-bounces@lists.wordpress.org</a>] <b>On Behalf Of </b>Sayontan Sinha<br>
<b>Sent:</b> Monday, January 24, 2011 11:24 PM</span></p>
<div>
<div></div>
<div><br><b>To:</b> <a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><b>Subject:</b> Re: [theme-reviewers] add_theme_page()</div></div>
<p></p>
<div>
<div></div>
<div>
<p class="MsoNormal"> </p>
<p style="margin-bottom: 12pt;" class="MsoNormal">That would be a relief. Let me give it a try.</p>
<div>
<p class="MsoNormal">On Mon, Jan 24, 2011 at 1:12 PM, Daniel Tara <<a href="mailto:contact@onedesigns.com" target="_blank">contact@onedesigns.com</a>> wrote:</p>
<div>
<div>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">Creating tabs is as easy as this:</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">function sayontan_admin_tabs( $current = 'general' ) {</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $tabs = array( 'general' => 'General', 'layput' => 'Layout', 'advanced' => 'Advanced' );</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $links = array();</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> foreach( $tabs as $tab => $name ) :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> if ( $current == $tab ) :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $links[] = "<a class='nav-tab nav-tab-active' href='?page=sayontan_options&tab=$tab'>$name</a>";</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> else :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $links[] = "<a class='nav-tab' href='?page=sayontan_options&tab=$tab'>$name</a>";</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> endif;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> endforeach;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> foreach ( $links as $link )</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> echo $link;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">}</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">if ( isset ( $_GET['tab'] ) ) :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $tab = $_GET['tab'];</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">else:</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> $tab = 'general';</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">endif;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">switch ( $tab ) :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> case 'general' :</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> // Whatever</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> break;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> ...</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;">endswitch;</span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125); font-size: 11pt;"> </span></p>
<p class="MsoNormal"><b><span style="font-size: 10pt;">From:</span></b><span style="font-size: 10pt;"> <a href="mailto:theme-reviewers-bounces@lists.wordpress.org" target="_blank">theme-reviewers-bounces@lists.wordpress.org</a> [mailto:<a href="mailto:theme-reviewers-bounces@lists.wordpress.org" target="_blank">theme-reviewers-bounces@lists.wordpress.org</a>] <b>On Behalf Of </b>Sayontan Sinha<br>
<b>Sent:</b> Monday, January 24, 2011 10:47 PM<br><b>To:</b> <a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a></span></p>
<div>
<p class="MsoNormal"><span style="font-size: 10pt;"><br><b>Subject:</b> Re: [theme-reviewers] add_theme_page()</span></p></div>
<p class="MsoNormal"> </p>
<blockquote style="border-width: medium medium medium 1pt; border-style: none none none solid; border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color windowtext; padding: 0in 0in 0in 6pt; margin: 5pt 0in 5pt 4.8pt;">
<p class="MsoNormal">Ideally, it would still have just one Theme Options page under</p>
<div>
<div>
<p class="MsoNormal"><br>appearance, and then use tabs or something else on its own page to<br>separate the options out.</p></div></div></blockquote>
<div>
<div>
<p class="MsoNormal"><br>This is much easier said than done. I have been working towards getting tabs in place on one page (multiple calls to add_theme_page makes things look quite ugly), but there are simply too many limitations with the whole API to make this work effectively. Let me try to explain.<br>
<br><b><u>The Scenario:</u></b><br>My theme has several options. Putting them all on one page causes a lot of issues, like sluggishness of the back-end and interference with PHP-Suhosin protection settings (though Suhosin can be tweaked). I originally had a 2-level tab system, with horizontal tabs at the top for different sections of settings, then vertical tabs within each section (that is similar to the kind of settings that the other folks are talking about). The tabs were all handled by JQuery. This works fine with a small number of options, but with a large number of options, the sluggishness shows up in the back-end. That was when I removed the horizontal tabs at the top level and used add_menu_page and add_submenu_page.<br>
<br>But with the recent enforcements of new rules and recommendations, I have had to do some major rework. I first rewrote the options framework to use the Settings API, but still with add_menu_page and add_submenu_page. Now I am rewriting again to get rid of the additional menu and roll it back to how the look was earlier, but with a difference: the entire set of options will not be loaded into browser memory in JQuery tabs. Instead, I will try to fetch each page as it is clicked, like the Theme Installation page in WP.<br>
<br><b><u>My attempts:</u></b></p>
<ol type="1">
<li class="MsoNormal">I first simply created one options page, then included a set of links at the top. <br><b><u>Issue:</u></b> Getting the links to behave as belonging within WP. E.g. If your admin panel is at <a href="http://host.com/wp-admin" target="_blank">http://host.com/wp-admin</a>, your theme options page could be at <a href="http://host.com/wp-admin/themes.php?page=my-options" target="_blank">http://host.com/wp-admin/themes.php?page=my-options</a>. The tabs, however cannot be given links through the admin panel. In other words, to get a URL such as <a href="http://host.com/wp-admin/themes.php?page=my-sub-options-1" target="_blank">http://host.com/wp-admin/themes.php?page=my-sub-options-1</a>, I HAVE to use add_theme_page. If I don't use add_theme_page, the page isn't added to the whitelist and will not show up. I cannot use other URLs, because then I will have something like this: <a href="http://host.com/wp-content/themes/my-theme/my-sub-options-1.php" target="_blank">http://host.com/wp-content/themes/my-theme/my-sub-options-1.php</a>, which is just not done.</li>
<li class="MsoNormal">To get around the above, I decided to bundle AJAX with the options page. So I have one options page accessible through <a href="http://host.com/wp-admin/themes.php?page=my-options" target="_blank">http://host.com/wp-admin/themes.php?page=my-options</a>. In there I have 5 links, each of which invokes AJAX to load the specific options page, while staying in <a href="http://host.com/wp-admin/themes.php?page=my-options" target="_blank">http://host.com/wp-admin/themes.php?page=my-options</a>. This way I only need to whitelist the main page.<br>
<b><u>Issue:</u></b> Getting settings_fields() to generate _wp_http_referer different from admin-ajax.php. This is causing options.php to return admin-ajax.php?updated=true, which is not what I want. This is where I am stuck right now, but hopefully I will get over the hurdle soon.</li>
</ol>
<p style="margin-bottom: 12pt;" class="MsoNormal">I am looking forward to completing this exercise, so that other developers can learn from my (rather harsh) experience here.<br><br>Cheers,<br>Sayontan.</p>
<div>
<p class="MsoNormal">On Mon, Jan 24, 2011 at 11:08 AM, Otto <<a href="mailto:otto@ottodestruct.com" target="_blank">otto@ottodestruct.com</a>> wrote:</p>
<div>
<p style="margin-bottom: 12pt;" class="MsoNormal">On Mon, Jan 24, 2011 at 1:03 PM, Rahul Bansal <<a href="mailto:rahul286@gmail.com" target="_blank">rahul286@gmail.com</a>> wrote:<br>> What if theme offers so many options that it need to contains 4-5 subpages?</p>
</div>
<p class="MsoNormal">Ideally, it would still have just one Theme Options page under<br>appearance, and then use tabs or something else on its own page to<br>separate the options out.<br><br>Realistically, I'd say a theme with that many options is too complex<br>
to begin with. Themes should be about the look of the site, not crazy<br>functionality. Break the functionality parts out into plugins that go<br>along with the theme or something like that.<br><span style="color: rgb(136, 136, 136);"><br>
-Otto</span></p>
<div>
<div>
<p class="MsoNormal">_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a></p>
</div></div></div>
<p style="margin-bottom: 12pt;" class="MsoNormal"><br><br clear="all"><br>-- <br>Sayontan Sinha<br><a href="http://mynethome.net/" target="_blank">http://mynethome.net</a> | <a href="http://mynethome.net/blog" target="_blank">http://mynethome.net/blog</a><br>
--<br>Beating Australia in Cricket is like killing a celebrity. The death gets more coverage than the crime.</p></div></div></div></div>
<p style="margin-bottom: 12pt;" class="MsoNormal"><br>_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a></p></div>
<p style="margin-bottom: 12pt;" class="MsoNormal"><br><br clear="all"><br>-- <br>Sayontan Sinha<br><a href="http://mynethome.net/" target="_blank">http://mynethome.net</a> | <a href="http://mynethome.net/blog" target="_blank">http://mynethome.net/blog</a><br>
--<br>Beating Australia in Cricket is like killing a celebrity. The death gets more coverage than the crime.</p></div></div></div></div><br>_______________________________________________<br>theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br><a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div><br>_______________________________________________<br>theme-reviewers mailing list<br><a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br><br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>