Sharing code, experiences, and stories of a web developer.

How to add an options page to custom post types in WordPress


## TL;DR version:

### Native WordPress Submenu Page:
```php
// Add to functions.php

// Register submenu page 
add_action('admin_menu', 'msd_page_settings');
function msd_page_settings(){
	add_submenu_page(
		'edit.php?post_type=YOUR_POST_TYPE_SLUG',
		'Custom Post Type Page Title',
		'Custom Post Type Options',
		'edit_posts',
		'custom-post-type-options',
		'msd_callback_fuction',
		null
	);
}

// Callback function to display your options
function msd_callback_fuction(){	
}
```

### ACF Pro Options Page:
```php
// Add to functions.php
if (function_exists('acf_add_options_sub_page')) {
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Custom Post Type Options Title',
		'menu_title'	=> 'Custom Post Type Options',
		'parent_slug'	=> 'edit.php?post_type=YOUR_POST_TYPE_SLUG',
	));
}
```

***

## Detailed Version:
Sometimes you need to add an options page to your custom post type. Options pages are generally used for customisable bits of your plugin or theme. For example, you might want to add some fields for a nice banner with a heading and background image on your custom post type's archive pages. The two main ways that I have been using are the native WordPress way and the ACF way.

### Native WordPress Submenu Page:
WordPress has a handy and relatively comprehensive tutorial for creating an options page which you can find *[here](https://codex.wordpress.org/Creating_Options_Pages)*. As we only need to add a submenu to our custom post type in the back-end, we just need the add_submenu_page function.
As you can see below, this function accepts 7 parameters:

```php
add_submenu_page( 
	string $parent_slug, 
	string $page_title, 
	string $menu_title, 
	string $capability, 
	string $menu_slug, 
	callable $function = '', 
	int $position = null 
)
```

You can read more about each one of these parameters *[here](https://developer.wordpress.org/reference/functions/add_submenu_page/)*.

$parent_slug is probably the most important parameter. This is where you can assign the options page to a custom post type. In WordPress, custom post types' URL in the back-end looks like this: 

SITE_URL/wp-admin/edit.php?post_type=CUSTOM_POST_TYPE_SLUG

This is true for all custom post types including pages. Post which is the default post type in WordPress only has the edit.php bit in its URL. 
Therefore, if we want our options page to become a child our custom post type in the back-end, we just need to change CUSTOM_POST_TYPE_SLUG to the slug/name of our custom post type.

$function is the callback function in which you will add your fields. I think the other parameters are pretty self explanatory. 

Once done, we just need to put this inside a function and hook it in to the 'admin_menu' action:

```php
// Add to functions.php

// Register submenu page 
add_action('admin_menu', 'msd_page_settings');
function msd_page_settings(){
	add_submenu_page(
		'edit.php?post_type=YOUR_POST_TYPE_SLUG',
		'Custom Post Type Page Title',
		'Custom Post Type Options',
		'edit_posts',
		'custom-post-type-options',
		'msd_callback_fuction',
		null
	);
}

// Callback function to display your options
function msd_callback_fuction(){	
}
```

### ACF Pro Options Page:
Adding an options page through the native way requires an additional step which is adding all the fields, capturing them and then displaying them on the pages that we want. ACF makes our lives much much easier (as always) here. We just need to add the below function to our functions.php and add the fields that we want through ACF's interface:

```php
// Add to functions.php
if (function_exists('acf_add_options_sub_page')) {
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Custom Post Type Options Title',
		'menu_title'	=> 'Custom Post Type Options',
		'parent_slug'	=> 'edit.php?post_type=YOUR_POST_TYPE_SLUG',
	));
}
```

parent_slug here is similar to the first parameter of add_submenu_page. We just need to change YOUR_POST_TYPE_SLUG to our custom post type's slug.

Hope you found this short tutorial useful!

What I have learned as a web developer in my first year



I have been a professional web developer for about 1.5 years now. What do I mean by professional? I mean I have have a paid job in web development. I started learning web development (HTML, CSS, PHP and WordPress) back in 2016, and finally managed to break into the industry in 2019. Even though I only put effort into learning how to code for about 6 months before I was hired.

Before I did web development professionally, I had some ideas about what it would be like, but things were not exactly what I was expecting. This motivated me to start this blog. So in this post, I am going to share my experiences from the last 1.5 years as a professional web developer.

## Getting a job is important, so are mental health and your salary

> I just wanted to get a web development job and finally be happy. 

I went to a couple of job interviews before my first job. I was happy with the lowest salary and didn't really care whether I liked that company or not. I just wanted to get a web development job and finally be happy. 

This motivated me to practice and learn programming every single day but I was so desperate to find a job that I didn't really negotiate my salary in my first job. Getting a job is great but if you are not getting paid enough, you will definitely become demotivated after a while. 

In addition to money, try to do some research about companies that you apply for and see whether you like them or not. I am so happy that I wasn't successful in my first job interview because they had many negative reviews on Glassdoor, which I only read after they rejected me! Take a look at companies' websites, LinkedIn and other social media pages and if you know you are going to hate working at a company, don't apply for a job there. Be patient, keep learning and you will definitely find a better opportunity. 


## Don't care about how others might judge you as a junior developer

> That's not important. What is important is that you have a job and this is a chance for you to learn. 

This is not true about every experienced web developer out there but if you are a junior web developer, some of your more senior colleagues might look down on you. While this is not acceptable, it's understanble to an extent. They have been in the industry for a long time and have forgotten how it feels to be a junior developer! 

They might even be natural jerks and look down on you to show they know more than you and everyone else! That's not important. What is important is that you have a job and this is a chance for you to learn. Therefore, don't lose hope and, even if you get offended, don't leave your job! Be smart. Get some experience, build your skills and **then** leave. 

## Learn new things, but do not burn yourself out

Programming is all about learning. It doesn't matter how much experience you have, there are a lot of languages and tools that you can learn.

I really enjoy learning new things, but sometimes I burn myself out. Sometimes I come home after a long day at work and try to work on my personal projects but my brain is literally fried and can't process anything!

Don't do this to yourself. Take a break, do something else and try to enjoy other things too (I know it's hard!).

## Don't hate or love a language, framework, etc.

> Don't limit yourself by thinking this language or that framework is dead.

I always thought I would use React or NodeJS in my professional job but I'm a WordPress developer now (no, I don't use Elementor or Divi, I develop custom themes!). I also thought PHP was dead and WordPress is useless but this is not true. 

When I started my first job, I found out how powerful (and even great) PHP is and how much people make from WordPress. There are many agencies out there that charge thousands of dollars for WordPress websites. As long as there are people out there who use a language, CMS, or framework, there will be demand for people who can use them and build things on them. If you use a language at work that you don't like, learn it. Trust me, you will enjoy it. It's exactly like learning all those cool things like React or Vue.

Don't limit yourself by thinking this language or that framework is dead. Your first job in this industry can be anything. You just need it on your resume. Once you have something on your resume, then you can choose what programming languages you want to work with in your next jobs.

## You might have to educate your non-developer colleagues

> Don't assume everyone around you knows what you know. 

Sometimes your boss or your graphic designer colleague wants you to add a new feature to a website. They think it's going to take a couple of hours but you know it requires a lot more time. Don't get frustrated and go off at them! Instead try to talk to them and explain why that feature requires more time than what they think and even suggest better ways of doing it. Don't assume everyone around you knows what you know. Your job as a developer is not just coding. It also includes managing what your bosses, colleagues and clients expect of you. 


## Last words

While I have really enjoyed being a web developer, I have been faced with some challenges, which I tried to explain in this article. You may not experience the same things but being a junior web developer is an enjoyable and, sometimes, frustrating journey. You will struggle, feel stupid, learn, and at some point you, will do things that you never thought you would be able to do. 

It's an amazing process. Enjoy it!





Hello, world!


Hi there. My name is Mani. I am a web developer. I am going to share my experiences, stories and useful code snippets on this blog. 

Stay tuned!

Mani Shah

Latest Posts: