Tuesday, July 30, 2013

Switchin it up - Learning how a crypter works

Today I switched things up and decided to see how a vb.net crypter works.  I searched through HF for a simple crypter source and found just what I needed: http://www.hackforums.net/showthread.php?tid=3556669&highlight=Castle+Crypter+V0.1+Source

I've begun the process of going through literally every single line of code to fully understand everything.  This is what the solution explorer looks like for the crypter:
So far I've only fully summarized the Form1.vb: http://pastebin.com/xSTSmt1V
In doing so I've gotten a pretty good idea of what each file is good for:

  • Form1.vb - holds the encrypt and random string functions, filepaths, encryption keys, replacements that are made to the stub code and compilation of the crypted file as well as the addition of a resource that holds the encrypted code.
  • Stub.txt - holds the stub source for a runPE type crypt.
  • Stub 2.txt - holds the stub source for a drop type crypt.
  • clsCodeDom.vb - holds the Compile function where the codedom import is used.  I think this is done to avoid detections but I'm not sure.
  • IconChanger.vb - holds the InjectIcon function where the selected icon (if there is one) is implemented to the crypted file.
  • Controls folder - contains .vb files used for creating custom controls (not important).
  • Stub 1 & 2 Edit.vb - same as Stub.txt and Stub 2.txt juts in .vb files so you can see and edit things a little bit easier.
In the end, I hope to comment out the stub files and codedom and iconchanger classes as well.  This topic interests me quite a bit and it feel nice to take a break from wordpress and web development.

Monday, July 29, 2013

Continuing yesterdays efforts - day 11

Continuing off of yesterday I figured out how to get the twitter dialog working correctly thanks to this dude: http://gpiot.com/elegant-twitter-share-button-and-dialog-with-jquery/
Here's the working code:
$content .= '<li><a href="#" onclick="window.open(\'https://twitter.com/share?url=' . esc_url('http:\\' . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '&text=Check this out!: ' . esc_url($_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '&\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">tw</a></li>';
To get it to work I just had to had the &text attribute.

Now for the google plus button.  I ran into the same issue as the twitter button leaving me to believe that I need to find out why I can't use $_SERVER commands or get_permalink for the url.  I revised the entire function so it looks like this now:
function b4b_sharing_enabled($content){

$b4b_options = get_option('b4b_theme_display_options');

$b4b_share_post_enable = $b4b_options['share_post_enable'];


if ($b4b_share_post_enable && is_single() || is_page()){
$url = get_permalink();
$content .= '<nav class="sharethis"><ul>';
$content .= '<li><a href="https://www.facebook.com/sharer/sharer.php?u=' . esc_url($url) . '" onclick="window.open(this.href, \'facebook-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">facebook</a></li>';
$content .= '<li><a href="https://twitter.com/share?url=' . esc_url($url) . '" onclick="window.open(this.href, \'twitter-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">twitter</a></li>';
$content .= '<li><a href="https://plus.google.com/share?url=' . esc_url($url) . '" onclick="window.open(this.href, \'googleplus-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">googleplus</a></li>';
$content .= '</ul></nav>';
return $content;
} else {
return $content;
}
}
add_filter('the_content', 'b4b_sharing_enabled');
I couldn't figure this out on my own so I've asked a question on it here: http://wordpress.stackexchange.com/questions/108241/sharing-buttons-url-doesnt-show-up-in-dialog-box
While waiting for people to answer I'm going to work on the footer settings because I'm going to include the implication of the author bio in the same b4b_sharing_enabled function (except I'll rename it).

This is what I wrote for applying all of the footer options:
function b4b_footer_options(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_social_icons_enable = $b4b_options['social_icons_enable'];
$b4b_facebook_url = $b4b_options['facebook_url'];
$b4b_twitter_url = $b4b_options['twitter_url'];
$b4b_footer_text = $b4b_options['footer_text'];

if($b4b_social_icons_enable){
?>
<nav class="socialicons">
<ul>
<?php
if($b4b_facebook_url != ''){
echo '<li><a href="' . $b4b_facebook_url . '">facebook</a></li>';
}
if($b4b_twitter_url != ''){
echo '<li><a href="' . $b4b_twitter_url . '">twitter</a></li>';
}
?>
</ul>
</nav>
<?php
}

if($b4b_footer_text != ''){
echo '<p>' . $b4b_footer_text . '</p>';
}
}
add_action('wp_footer', 'b4b_footer_options');

This is what the footer.php looks like now after a few modifications to it: http://pastebin.com/Vb7sFU9f
One issue I've noticed though is that you can enter in non-urls into the facebook and twitter url inputs and the text in footer input is too small.  This means I need to make some adjustments to the validation function and input callback.
I've split up the textarea callback into an input and textarea callback.  Here's what I'm left with after making these changes:
function b4b_input_callback($args){
$options = get_option('b4b_theme_display_options');
if($args[0]=="number_of_posts"){
$html = '<input type="number"';
$html .= ' pattern="\d*"';
} elseif ($args[0]=="facebook_url" || $args[0]=="twitter_url"){
$html = '<input type="url"';
} else {
$html = '<input type="text"';
}
$html .= ' id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" value="' . $options[$args[0]] . '" />';

echo $html;
}

function b4b_textarea_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<textarea id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" rows="' . $args[1] . '" cols="' . $args[2] . '">' . $options[$args[0]] . '</textarea>';

echo $html;
}

The footer_text field is the only option utilizing the textarea callback.  Upon completing this I've also come to realize that I left all the applied options in the header.php and never took them out to put in the theme-options.php; so I'll make these changes now.  First I changed the header to this:
Then I added the following hook function: http://pastebin.com/cqsmRnrT
function b4b_header_options(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_header_type = $b4b_options['header_type'];
$b4b_header_image = $b4b_options['header_image'];
$b4b_header_title = $b4b_options['header_title'];
$b4b_header_slogan = $b4b_options['header_slogan'];

if ($b4b_header_type == 'image'){ ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo $b4b_header_image; ?>" alt="logo" />
</a>

<?php } elseif($b4b_header_type && $b4b_header_title == '' && $b4b_header_slogan == '') { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

<?php } elseif($b4b_header_type && $b4b_header_title != '' && $b4b_header_slogan != '') { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( $b4b_header_title ); ?>" rel="home"><?php echo esc_attr( $b4b_header_title ); ?></a></h1>
<h2 class="site-description"><?php echo $b4b_header_slogan ?></h2>

<?php }
}
add_action('site-branding', 'b4b_header_options');

Please note: The site-branding hook is the custom hook that I added into the header.php.

After all the changes I've wrote about so far this is what the theme-options.php currently looks like: http://pastebin.com/LvXcsGPr

I still haven't received any help on the sharing buttons problem so I have the rare opportunity to work on something different.  I'm going to browse through the tutorials on wp.tutsplus.com cause I can always find something new on there.  This tutorial series about coding standards seems useful and interesting so I'm going to summarize whatever I get through: http://wp.tutsplus.com/series/the-wordpress-coding-standards/

Well, I got distracted and went out instead.  I'm going to sleep now, so if there isn't any type of assistance tomorrow I'll come back to it.

Sunday, July 28, 2013

New plans for coding the options panel - day 10

I've decided that it would be a could idea to keep all (or as much as possible) of the settings usage in the theme-options.php.  Why?  I just like the idea of making it a lot more portable so I can bring it to other themes I work on.  This being said, with the help of the query_posts wp documentation I removed the usage of query_posts from the index.php and used the pre_get_posts hook in the theme-options.php instead:
function b4b_number_of_posts($query){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_number_of_posts = $b4b_options['number_of_posts'];
if($b4b_number_of_posts != '' && $query->is_home() && $query->is_main_query()){
$query->set('posts_per_page', $b4b_number_of_posts);
}
}
add_action('pre_get_posts', 'b4b_number_of_posts');


Now I can go back to the share this buttons.  First I need to find the hook that I can use for the usage function which I'm looking for in here: http://codex.wordpress.org/Plugin_API/Action_Reference
I thought pre_get_commments would be what I was looking for but upon running the following code it only puts "TESTING" before the recent comments widget:
function b4b_sharing_enabled(){
echo '<h1><b>TESTING</b></h1';
}
add_action('pre_get_comments', 'b4b_sharing_enabled');


After reading through this article, http://wp.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-actions-and-filters/, I've realized I need to look for a filter instead in here: http://codex.wordpress.org/Plugin_API/Filter_Reference

So to add something to the end of your content I've found you only have to do this:
function b4b_sharing_enabled($content){
$content .= '<h1><b>TESTING</b></h1>';
return $content;
}
add_filter('the_content', 'b4b_sharing_enabled');


Leaving you with:

I've been working on the social buttons for a couple hours now only to get stuck on the damn twitter button.  Here's the current code:
function b4b_sharing_enabled($content){
$content .= '<nav class="sharethis"><ul>';
$content .= '<li><a href="#" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u=' . esc_url('http:\/\/'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]) . '\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">fb</a></li>';
$content .= '<li><a href="#" onclick="window.open(\'https://twitter.com/share?url=' . esc_url('http:\\' . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">tw</a></li>';
$content .= '</ul></nav>';
return $content;
}
add_filter('the_content', 'b4b_sharing_enabled');


The popup for the twitter button works but the problem is the url doesn't show up in the tweet like it should.  If I replace $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"] with a simple url like google.com it works.  Why is this the issue?  I guess I'll just have to take a look at it tomorrow.  I'm done today.

Saturday, July 27, 2013

Options Panel - day 9

So continuing from yesterday I'm working on the number of posts per page option.  The first thing I was working on was choosing whether to remove numbers using jquery on keyup or using php and just changing the input type.  The jQuery version looks like this:
//only allow numbers to be entered
$('#number_of_posts').keyup(function(e){
if(/\D/g.test(this.value)){
this.value = this.value.replace(/\D/g, '');
}
});

I got this solution from here: http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery

This is the php function which involved me changing the textarea callback:
function b4b_textarea_callback($args){
$options = get_option('b4b_theme_display_options');
if($args[0]=="number_of_posts"){
$html = '<input type="number"';
$html .= ' pattern="\d*"';
} else {
$html = '<input type="text"';
}
$html .= ' id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" value="' . $options[$args[0]] . '" />';

echo $html;
}

I got help to find this solution from here: http://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers
Rather than replacing anything besides numbers with letters right away this allows for the letters to be entered and doesn't allow them to be saved.  I've decided to use the php solution instead of the jQuery one because letters can still be saved if the user clicks the save button right away.

Lastly this is the php code I made for querying the amount of posts:
<?php
$options = get_option( 'b4b_theme_display_options' );
$number_of_posts = $options['number_of_posts'];

if($number_of_posts != ''){
$args = 'posts_per_page=' . $number_of_posts;
query_posts($args);
}
?>


Next is the enabling sharing in posts option.  Planning this more in detail, this option will have a sharing button for Facebook, Twitter, Email and Google Plus.  These developer pages will help me create the code I need for the share buttons:

As for the email share button, that's something I want to try writing from scratch as a learning experience.  As of now I have a headache so I'm leaving this option for tomorrow.

Friday, July 26, 2013

Yet another day on the options panel - day 8

I'm jumping right into the last tutorial today: http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-8-validation-sanitisation-and-input-ii/

First, the author goes to add a checkbox field into the example section he created yesterday.  I've already created my own checkbox callback but the author goes more into detail explaining it.  Here is my code:
function b4b_checkbox_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<input type="checkbox" id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" value="1" ' . checked(1, $options[$args[0]], false) . '/>';
$html .= '<label for="' . $args[0] . '"> ' . $args[1] . '</label>';

echo $html;
}

This makes use of the checked func: http://codex.wordpress.org/Function_Reference/checked
To use this I would simply use an if loop to check if the saved options value is 1 or not.

Then the author goes through the callback for a radio button.  It's pretty much the same as a checkbox as it uses the checked function but the $checked parameter increments for each radio button in the set.  Again, to use the label to check the radio button just set the label's "for" attribute equal to the radio button's ID.

Lastly the author shows how to make the callback for the select control, which I've already done again.   Here's the code I've used for it:
function b4b_select_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<select id="' . $args[Count($args)-2] . '" name="b4b_theme_display_options[' . $args[Count($args)-2] . ']">';
foreach($args as $arg){
if ($args[Count($args)-1] != $arg && $args[Count($args)-2] != $arg){
$html .= '<option value="' . $arg . '"' . selected($options[$args[Count($args)-2]], $arg, false) . '>' . $arg . '</option>';
}
}
$html .= '</select>';
$html .= '<label for="' . $args[Count($args)-2] . '">' . $args[Count($args)-1] . '</label>';

echo $html;
}

This makes use of the selected func: http://codex.wordpress.org/Function_Reference/selected

After reading skimming through some of the tutorials again and browsing through the codex this is what my final header looks like: http://pastebin.com/SRdwSmhe

Now that the header is done I'm going to put a bit of planning for the other options down:
  • To display the favicon I'm just going to implement (to theme-options.php) the display favicon code from this author's tutorial: http://wp.tutsplus.com/tutorials/creative-coding/integrating-the-wp-media-uploader-into-your-theme-with-jquery/?search_index=2
  • To control the number of posts on the home page I first need to edit the validation callback so it will only accept numbers.  Then before the loop (in index.php) I'd want to use query_posts(http://codex.wordpress.org/Function_Reference/query_posts) in combination with retrieving the option (sanitized).  It's important to keep in mind that this option is useless since there are already options for this in Settings->Reading.
  • Code for the enable sharing posts and author bio options will go in the page.php between the get_template_part func and code for the comment loop.
  • The enable social icons (in the footer) option will go in the footer.php and be an if loop to decide whether it will display or not.
  • Text in footer controls the text in the footer that is shown at the very bottom and centered in a very light blue.
  • Facebook & Twitter url inputs first need to be changed so only a valid url can be saved.  Then it will be made (in footer.php) so that if they are blank their button won't appear. 
Okay so here's the favicon options code:
function b4b_add_favicon(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_favicon = $b4b_options['favicon_image'];
?>
<link rel="icon" type="image/png" href="<?php echo esc_url($b4b_favicon); ?>">
<?php
}
add_action('wp_head', 'b4b_add_favicon');

That's it for today.  More will come tomorrow.

Thursday, July 25, 2013

Today's wp work - day 7

Before I implement any more options in the theme I'm going back to the settings api tutorials and finishing summarizing them.

In the sixth tutorial, http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-6-menu-pages/, the author is teaching how to introduce a top-level menu, add two submenus that will link to different tabs.   This will be making use of the add_menu_page and add_submenu_page functions I explained in better detail here: http://persteezy.blogspot.com/2013/07/options-panel-day-5-wordpress-menu-types.html

Now this goal is all fine and dandy but I couldn't get the tabs from the 5th tutorial (http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-5-tabbed-navigation-for-your-settings-page/) to work and since this tutorial builds upon that working I can only summarize what he's saying now.  The 5th tutorial not only didn't work for me but it didn't work for another person as well.

Simply reading through the tut now, the author used add_theme_page and add_menu_page in a function that's hooked to the admin_menu hook.  Then a submenu (goes under top-level) item for one of the tabs is added using the add_submenu_page leaving you with two submenu items.  Two?  Yes, that's because the add_menu_page also leaves the user with a submenu page with the same name and callback function.  After this, a third submenu page is added for the second option.

Author then adds a tab parameter (default value of null) to the *_theme_display func grabs the value of tab and assigns it to a var, creates an if loop that checks what the var equals and reassigns the var depending on what it equals.  Then to utilize this change the author changes the callback of the submenu to something like this:
create_function( null, 'sandbox_theme_display( "social_options" );' ) 
create_function explained: http://php.net/manual/en/function.create-function.php

Now this would be great to implement if the tabs worked but they don't and I don't plan on looking for a solution until another time.  Honestly I think jQuery is probably the better solution here because (A) I'm not very good with ajax and (B) it cuts back on load time majorly.  Now I'm onto tut #7: http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-7-validation-sanitisation-and-input-i/

Validation - the process by which data entered into the options page by the user is examined and it is determined whether it's acceptable to save.

Sanitization - the process by which data coming out of the database is assured to be clean and properly formatted for rendering.

So validation should be done before data gets written to the db and sanitization should be done between loading the data from the db and displaying it in the browser.  The author then goes to add a new input_examples function, create a submenu for it, and add it to the tabs like the other functions.  He then adds an input field to the tab that will be used to test validation.

The third parameter for the register_setting function is what gets used for the validation function callback.  The function should accept the $input parameter which will obviously hold the data to be validated.  This function will normally follow these three steps:
  • Create an array for storing validated options
  • Validate the options
  • Return the created array
In the author's validation function he does this then uses a foreach to loop through the inputs.  If the loop is not null (isset: http://php.net/manual/en/function.isset.php) then the author makes use of two php functions to validate the input and add it too $ouput at the same time:
Not sure why the user doesn't try making use of the esc_html and esc_url wp functions but I guess I'll just have to continue reading and find out.  Here's the validation function in my code:
function b4b_theme_display_options_validation($input){
$output = array();
foreach($input as $key => $value){
if(isset($input[$key])){
$output[$key] = strip_tags(stripslashes($input[$key]));
}
}
return apply_filters('b4b_theme_display_options_validation', $output, $input);
}
apply_filters(http://codex.wordpress.org/Function_Reference/apply_filters) is used because it is just known as a best practice (idk).

The author then uses sanitize_text_field(http://codex.wordpress.org/Function_Reference/sanitize_text_field) for echoing the options.

This concludes the tutorial and my wp work for today.  The author included me with one link that I'm now using as a reference: http://codex.wordpress.org/Data_Validation
One more tut in the series to go and I plan on finishing it tomorrow.

Wednesday, July 24, 2013

Unfocused.

Honestly these I've been having a very bad motivational issue with doing anything computer programming related and it's starting to piss me off.  I once used to love programming for the fun of it and now I'm only worried about one thing and that's money.  I've applied to countless jobs (near and far) but absolutely no one wanted to hire me because I have absolutely no work experience in retail or computer hardware, I'd only be working for a short amount of time (because I'm off to college soon), and there's no open web developer positions that will hire someone with just a high school education and not even a portfolio website.

I find myself constantly looking (and wasting my time) to make "easy money" online rather than to focus on improving my programming skill and building a much stronger portfolio.  For example, just the other day I bought a shit ebook on HF that's supposed to teach me how to get free one month xbox live codes and spent hours trying to make it work and plotting ways I can change the method to make it work.  The method will never work and was just a waste of a $25 Amazon GC.

From this point on (like with MapleStory), I've decided that I'm done with forums.  Yes, that means I'm officially off WJ, HF, TBN, & HC until I improve my skill to the point where I can create amazing things and make money doing something I love.  I've been told this before by my lawyer and he said:
Don't focus on making money at such a young age (I was 17 at the time).  Just focus on improving and getting better at your talent and the money will come.
When I first heard this it went in one ear and out the other because I was so convinced that making money at that age was the most important thing I could possibly too because I wanted to be able to get whatever I wanted without struggle.  Now, I'm realizing how true this statement is.  If I continue trying to make money in semi-illegitimate ways and not utilizing my talent I won't turn into anything but a fraudster and a criminal.  I need to focus on building my skills and create my own path to the riches in a completely legal way.

That's all I have for today.  Sorry for posting all this bullshit and none of the usual coding stuff but this was just another thought I needed to get straight.  However I did implement the header options into the b4b theme through the header.php file by inserting the following:
<?php $display_options = get_option( 'b4b_theme_display_options' ); ?>
<div class="site-branding">
<?php if ($display_options['header_type'] == 'image'){ ?>
<img src="<?php echo $display_options['header_image']; ?>" alt="logo" />
<?php } elseif($display_options['header_type'] == 'text' && $display_options['header_title'] == '' && $display_options['header_slogan'] == '') { ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php } elseif($display_options['header_type'] == 'text' && $display_options['header_title'] != '' && $display_options['header_slogan'] != '') { ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( $display_options['header_title'] ); ?>" rel="home"><?php echo esc_attr( $display_options['header_title'] ); ?></a></h1>
<h2 class="site-description"><?php echo esc_attr( $display_options['header_slogan'] ); ?></h2>
<?php } ?>

</div>

Going to bed now. There'll probably be more activity on here from now on.

Monday, July 22, 2013

Back from vacation! - my options panel

Sorry I forgot to tell you guys that I was going on vacation for a bit.  I didn't have a reliable internet connection where I was so I couldn't make any posts.  Anyways I pretty much finished the basic aesthetics and options for the options panel in the new theme I'm making.


Here's the files used for this and their source code:

I'm aware that I can just combine the two js files but I'm keeping them separate to stay a little more organized (I'll put them together and compress it when I finalize everything).  I'm sure some things can be coded better but I'm moving on to the rest of the theme now and will come back for improvements after everything is done.  That's all for today, pce!

Thursday, July 11, 2013

Back from college - wp options panel day 6

I had college orientation and a bunch of other stuff to take care of which is why I was gone for so long.  I my free time though I have been designing a new WordPress theme called Boundaries for Breaking.  So far I've only designed it in Photoshop and it looks pretty good.  When I code it it'll be named b4b and I need to re-size it because the design is a bit small.  Since I haven't been learning about the settings api like I should have I'm going back to learning about it for most of today.

Before I even get started with taking notes, I had to fix my localhost (wampserver) first.  What was wrong with it?  This was the error:

I fixed it by following the advice from the first responders on these two threads:

Okay back to note taking...  So in this tutorial http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-4-on-theme-options/ the author goes over categorizing all the fields in each section to a single option.  Once you define multiple option sections and display them using settings_fields(), do_settings_sections() and submit_button() wrapped in a form only the newest defined option will actually save.

Now for part 5, http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-5-tabbed-navigation-for-your-settings-page/, he says you can keep these option groups and still save with using tabs instead of new pages.  I only got to the very beginning of this tutorial before I ran into troubles and couldn't get anything working.  The non-working code is here: http://pastebin.com/xVmuKjcc

I'm back to this code now though cause it is still working: http://pastebin.com/3HLKhuQG

I'm going to read through part 5 again and try to add tabs to my code even with only one set of options.  Didn't add tabs still yet but added the image uploader by following and making modifications/additions to the code from these two tutorials:

Here's the code at the end of today: http://pastebin.com/c9U3gD0Z
Here's the additional js file: http://pastebin.com/ErZy47vc

Pce niggs.

Friday, July 5, 2013

Options panel day 5 - wordpress menu types

On part 3 of the settings api tutorials and this part goes over menu types (not the settings api but very closely related).

Top-level menus: are the menus in the left column that hold sub-menu pages.  You use the add_menu_page function to add your own: http://codex.wordpress.org/Function_Reference/add_menu_page
add_menu_page(Page Title, Menu Title, Capability, Menu Slug, Callback, Icon URL, Position);
  • Page Title - Title displayed in the browser window tab.
  • Menu Title - Title displayed in the menu.  Keep it short so it doesn't wrap and look stupid.
  • Capability - String value that specifies which users can access the menu.  Roles: http://codex.wordpress.org/Function_Reference/add_menu_page
  • Menu Slug - identifier for the menu page.  Is a hook that submenu pages use to register themselves.
  • Callback - function that defines content for the page.  This can be html or refer to and external file.
  • Icon URL - path of the icon that gets displayed next to menu title.  (optional)
  • Position - place in the menu where the page gets placed.  It gets placed at the bottom by default but custom positioning allows you to put it above or below and existing item.
Use this function in a custom function you create that is hooked to the admin_menu.  A lot of people think that the position argument is a bad practice cause it changes the traditional wordpress experience and the position can be overwritten if defined somewhere else.

Submenus: pretty much the same as a menu except they belong to top-level menus (they always have a parent).  add_submenu_page is the function that is used for submenus: http://codex.wordpress.org/Function_Reference/add_submenu_page
add_submenu_page(Parent Slug, Page Title, Menu Title, Capability, Menu Slug, Callback);
  • Parent Slug - ID of the menu item it will belong to.
  • Page Title - same as top-level.
  • Menu Title - same as top-level.
  • Capability - refers to what types of users can access the specific submenu page
  • Menu Slug - ID for this specific item.
  • Callback - same as top-level.
Plugin Pages: the add_plugins_page function was made to make it easier for plugin developers: http://codex.wordpress.org/Function_Reference/add_plugins_page
add_plugins_page(Page Title, Menu Title, Capability, Menu Slug, Callback);
All of its parameters work the same as add_menu_page.  This should be called from within your plugin's php file and not your functions.php.

Theme Pages: uses add_theme_page to add a submenu to the appearance menu: http://codex.wordpress.org/Function_Reference/add_theme_page
add_theme_page(Page Title, Menu Title, Capability, Menu Slug, Callback);
All of its parameters work the same as add_submenu_page.

Now what is each menu type good for exactly?:
  • Top-Level Menus - for when you have a group of important settings that don't fit in other existing menus.
  • Submenus - either custom or already existing, should be put under a parent menu that works.
  • Plugin Menus - used for plugins and should used tabbed navigation if there's multiple option pages.
  • Theme Menus - used for theme options and follows the same deal with tabbed menus as plugin menus.  However, top-level menus are sometimes used for theme options instead.
So that's everything I took down for part 3.  Here's the code I'm left with at the end of that: http://pastebin.com/aYk6kjzX

Part 4 is supposed to go more into detail about theme options so I'm starting that now but that's all for this post.

Tuesday, July 2, 2013

Options panel struggles continue - day 4

Things aren't going so well creating an options panel.  Today I learned that the method I've been using to create an options panel is outdated and that there's a settings api that I could be using instead: http://codex.wordpress.org/Settings_API

When going through the tutorial (in my last post) I started picking up on this bit by bit.  So for the rest of this post I'm taking down some notes on this settings api as I work my way through this tutorial series: http://wp.tutsplus.com/series/the-complete-guide-to-the-wordpress-settings-api/
btw I'm starting the options panel from scratch now (but keeping theme-options.php) in a new file (better-options.php).

So yea, this api is supposed to facilitate the processes of:

  • introducing menus
  • option pages
  • saving (I'm looking forward to this lol)
  • validating
  • retrieving user input
You should use the api because it's secure and properly manages (my mistake).

There are three main components of the api:
  1. Fields - single inputs (options) that you'll see on menu pages like textboxes, radio buttons, selects, etc.  They hold the value that gets put in the db.
  2. Sections - are used for grouping (usually related) fields.  Normally used so each section is its own menu page.
  3. Settings get registered after you've defined your fields and sections.
Creating a section uses the add_settings_section function I learned about before: http://codex.wordpress.org/Function_Reference/add_settings_section
add_settings_section(ID, Title, Callback, Page);
  • ID - identifier for the section.  The value is used in registering the field within each section and can be named anything (keep it meaningful).
  • Title - a value displayed at the top of the page as an (h1 or h3 or something).
  • Callback - the name of the function where the code for displaying certain elements for the section will go.
  • Page - this value tellswp which page your options are displayed on.
This is a reference for some page keys:
  • General, “general”
  • Writing, “writing”
  • Reading, “reading”
  • Discussion, “discussion”
  • Media, “media”
  • Privacy, “privacy”
  • Permalinks, “permalink”
The add_settings_field function gets used to ad fields: http://codex.wordpress.org/Function_Reference/add_settings_field
add_settings_field(ID, Title, Callback, Page, Section, Arguments);
  • ID - ID of the field and used in saving and retrieving the value (keep it meaningful).
  • Title - value that turns into the title of the field option on the page.
  • Callback - Same as in section.
  • Page - identifies which page the option should be on and can be added to an existing page rather than a section that's already been defined.
  • Section - the ID of the section you created earlier when registering sections.  (optional param)
  • Arguments - array of arguments that get brought to the callback func.  (optional param)
Now after you add some sections and fields they still will not save.  Why?  Because they weren't registered with the register_setting function yet: http://codex.wordpress.org/Function_Reference/register_setting
register_setting(Option Group, Option Name, Callback);
  • Option Group - Name of the group of options.  This will be and existing group of options in wp or an ID that we made when we created our section.  (required)
  • Option Name - The ID of the field we're registering.  If registering multiple fields, you'd have to call this function multiple times.  (required)
  • Callback - Same as section and field.  (optional)
Now to use these options you created, the get_option function comes into play: http://codex.wordpress.org/Function_Reference/get_option
get_option(Option ID, Default Option);
  • Option ID - the ID of the field that you want the value of. (required)
  • Default Option - the value if the option returns nothing (like if it didn't exist in the db).  (optional)
Well that's all I'm going through for today.  By applying all this knowledge (and the little programming skill I have), I've come up with this as my functions file: http://pastebin.com/ZkGkiMVP

I've also applied these options to my themes header file: http://pastebin.com/FzBUbxF9

So this is what this code looks like:

At the end of the day, I'm happy to finally be getting somewhere with the options panel without having to copy and paste massive amounts of code.  With this settings api, I actually understand what's going on now so tonight I can go to sleep a little less pissed off than usual ;)