register_setting() vs add_option()

So do I still need to hook admin_init and call those register_setting() if I did add_option() before?

Yes. You need.

You may add add_option to set the default value.
Another call to add_option will do nothing.
However, the idea of register_setting() is more than just add_option().

Each setting has the context page such as (general, reading, writing, media, some-page-that-you-defined, …) and can have the callback function where you can do action on your data.

For more info check the Settings API.

---

Someone may think the Settings API is a big mess. BTW, this is what you can read from the WordPress core.

File: wp-admin/includes/template.php
2: /**
3:  * Template WordPress Administration API.
4:  *
5:  * A Big Mess. Also some neat functions that are nicely written.

(there is also part of the settings API in wp-includes/option.php )

On the other side, an example from the codex can help you start up fast.

However when working with settings you need to dig deep and cover the possible errors — so you need to understand how it works perfectly.

This may be hard for the WordPress programmers that start writing the first plugins. It may take days.

In WordPress 4.7 we had updates to the Settings API, but this doesn’t negotiate the fact that the Settings API may be leveled up in the future.

If I recall, it is hard to choose the different HTML elements when you create sections for instance:

File: wp-admin/includes/template.php
1286: function do_settings_sections( $page ) {
1287:   global $wp_settings_sections, $wp_settings_fields;
1288: 
1289:   if ( ! isset( $wp_settings_sections[$page] ) )
1290:       return;
1291: 
1292:   foreach ( (array) $wp_settings_sections[$page] as $section ) {
1293:       if ( $section['title'] )
1294:           echo "<h2>{$section['title']}</h2>\n";
1295: 
1296:       if ( $section['callback'] )
1297:           call_user_func( $section['callback'], $section );
1298: 
1299:       if ( ! isset( $wp_settings_fields ) || !isset( $wp_settings_fields[$page] ) || !isset( $wp_settings_fields[$page][$section['id']] ) )
1300:           continue;
1301:       echo '<table class="form-table">';
1302:       do_settings_fields( $page, $section['id'] );
1303:       echo '</table>';
1304:   }
1305: }

As I see the problem with the Settings API — this API is old.

---

What may be the possible improvement.
Pseudo-language. You just define your form like this via the Settings API

   ---
   name: cool-settings.php
   style: default            
   ---
   textfield: First Name|first-name
   textfield: Last Name|last-name
   textarea: About Yourself|about
   image: Your Image|image|(.gif|.jpg|.jpeg|.png)

I saw this syntax from Jekyll.