# HowTo: Working with contextual links to the panel

**URL:** <https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566>\
**Category:** Solutions\
**Tags:** v2\
**Created:** [July 8, 2015, 4:19pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566 "2015-07-08T16:19:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [July 8, 2015, 4:19pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/1 "2015-07-08T16:19:28Z")

</div>

## Pointer:

If you have done all steps up to and including step 5 and you are logged in, your homepage of the demo content looks like:

 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/1X/20c35a1116664c8a0356426577a18d0bfbe468f4.jpg) 

Look at the **four** gear wheels in purple!

If you then e.g. click at the gear wheel  
 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/1X/f54a45ee3c571872c8f87f8060a6a4410178c534.JPG)

another tab or window of your browser opens with:

 ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/1X/515d335130f8e74052196d8572d6f7b13f2fa288.JPG) 

So you can jump with just **one click** from any content for editing to the correct side of the panel.

_ **Is that awesome?** _

* * *

## HowTo

### Remark:

- The following is like a [cookbook](http://en.wikipedia.org/wiki/Cookbook#Usage_outside_the_world_of_food)! You may want to change some parts of the following, to fit your needs. **Feel free!**
- **Hint:** For the first try, don’t change anything and follow this description “ **step by step** ”!
- For this HowTo I assume that we use a newly installed and unchanged Kirby version 2.1.0. Otherwise, you need to adjust the description correspondingly.

### Step 1:

- Add a new file with the name “ **pagetitle.php** ” in the directory “ **/site/snippets** ”
- This new file should look like:

```php
<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = $site->user() and $user->hasPanelAccess()): // user is logged in and has panel access ?>
<a href="<?php echo $site->url() ?>/panel/#/pages/show/<?php echo $thePage->uri() ?>/p:1" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

```

### Step 2:

- Open all \*.php files in the folder “ **/site/templates** ” and search for “`<h1><?php echo $page->title()->html() ?></h1>`”.
- Replace all results with “`<?php snippet('pagetitle') ?>`”.

**Hint** to @jenstornell [Don’t require title in the blueprint](http://forum.getkirby.com/t/dont-require-title-in-the-blueprint/1360/6):  
You can replace the written title by replacing the results e.g. with “`<?php snippet('pagetitle', array('thePageTitle' => $page->page_title())); ?>`”.

### Step 3:

- Open the file “ **projects.php** ” in the folder “ **/site/snippets** ” and search for “`<h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>`”.
- Replace it with “`<?php snippet('pagetitle', array('theTag' => 'h3', 'thePage' => $project, 'thePageLink' => $project->url())); ?>`”.

### Step 4:

- Within your CSS file “ **assets/css/main.css** ” add these lines at the end of the file:

```css
/* =================================================
 * HowTo: Working with contextual links to the panel
 * =================================================
 */
@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src: url(../../panel/assets/fonts/fontawesome-webfont.woff) format('woff');
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-feature-settings: normal;
  font-kerning: auto;
  font-language-override: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
}
.fa-cog:before {
  content: "\f013";
}
/* The following color is deliberately garish chosen to show the gear wheels significantly. Please adjust (later)! */
.admincolor {
  color: #F0F;
}

```

### Step 5:

- Log in at the panel and keep logged in.
- Go to your website in another browser window (being logged in).
- Click at a **gear wheel**! Then enjoy!

### Next Steps:

- Go to another page of your website (being logged in) and there click at a **gear wheel**.
- You may want to look at your website as a **guest** (not logged in) **and** logged in as a user without panel access, if you have this type of user!
- Modify the file “ **pagetitle.php** ” in the directory “ **/site/snippets** ” to fit your needs.
- Modify and extend the **CSS file** and extend the file “ **config.php** ” in the directory “ **/site/config** ” (in this post I show only the main elements, you need to test this idea).
- Add a **login panel/page** on the site itself and a link to it for a login without opening the panel. Details can be found on [Kirby docs: Solutions \> Authentication](http://getkirby.com/docs/solutions/authentication).

_[last edited: 2015-07-12 12:50 / German time]_

Good luck!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 8, 2015, 4:53pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/2 "2015-07-08T16:53:44Z")

</div>

Just a suggestion:

If you camel case or underscore your multi-word identifiers, they would be much easier to read, e.g. instead of

$thepagetitle -\> $thePageTitle or $the\_page\_title

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [July 8, 2015, 5:07pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/3 "2015-07-08T17:07:48Z")

</div>

@texnixe:  
Thanks for the tip!

---

<div class="post-metadata">

**Author:** ![joranovski](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/joranovski/32/106_2.png) [@joranovski](https://forum.getkirby.com/u/joranovski)\
**Post date:** [July 10, 2015, 10:03am UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/4 "2015-07-10T10:03:51Z")

</div>

This looks like a great addition, so customers can easily edit their content without having to look up the specific content.

What would enhance this even further is to use a small login panel on the site itself without opening the panel so one could immediately edit the content on the site this way.

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [July 10, 2015, 10:53am UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/5 "2015-07-10T10:53:05Z")

</div>

> [@joranovski](#):
>
> What would enhance this even further is to use a small login panel on the site itself without opening the panel so one could immediately edit the content on the site this way.

For this look at [Kirby docs: Solutions \> Authentication](http://getkirby.com/docs/solutions/authentication).  
On Kirby websites I use it too, but this HowTo should be short to show the main idea.

[Added:]  
I have added a hint within the **Next Steps**.

---

<div class="post-metadata">

**Author:** ![joranovski](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/joranovski/32/106_2.png) [@joranovski](https://forum.getkirby.com/u/joranovski)\
**Post date:** [July 10, 2015, 2:37pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/6 "2015-07-10T14:37:46Z")

</div>

Thanks for pointing this out!

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [November 22, 2015, 2:20pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/7 "2015-11-22T14:20:35Z")

</div>

With **Kirby version 2.2.x** the adress of the panel pages have changed.

Therefore, the file in **Step 1** is as follows:

```php
<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = $site->user() and $user->hasPanelAccess()): // user is logged in and has panel access ?>
<a href="<?php echo $site->url() ?>/panel/pages/<?php echo $thePage->uri() ?>/edit" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

```

Good luck!

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [April 13, 2019, 7:01pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/8 "2019-04-13T19:01:54Z")

</div>

With **Kirby version 3.x** the adress of the panel pages and more has changed.

Therefore, the file in **Step 1** is as follows:

```auto
<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = kirby()->user() and $user->role()->permissions()->for('access', 'panel')): // user is logged in and has panel access ?>
<a href="<?php echo $thePage->panelUrl(); ?>" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

```

Good luck!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 14, 2019, 10:38am UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/9 "2019-04-14T10:38:49Z")

</div>

How about modernising your code a bit:

```auto
<?php
$tag = $tag ?? 'h1';
$p = $p ?? $page;
//etc.

```

And the most important thing, use

```auto
$page->panelUrl()

```

instead of that string concatenation stuff.

```auto
<a href="<?= $p->panelUrl() ?>">

```

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [August 9, 2019, 6:42pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/10 "2019-08-09T18:42:37Z")

</div>

I updated and extended the snippet for **Kirby 3** , following @texnixe’s hints.

Therefore the file in **Step 1** is as follows:

```php
<?php
  /* Kirby 3.x snippet: pagetitle.php
   * last update 10.08.2019 by @HeinerEF (check, if user can read the page in the panel)
   * update 09.08.2019 by @HeinerEF (using the hints from @texnixe at https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/9)
   */
  $theTag = $theTag ?? 'h1'; // the tag for the page title via the snippet variable "theTag" assigned or 'h1'
  // $theTagAddon // the e.g. "class-text" in the pagetitle tag via the snippet variable "theTagAddon" assigned (including 'class="..."')
  $thePage = $thePage ?? $page; // the "$page" via the snippet variable "thePage" assigned
  $thePageTitle = $thePageTitle ?? $thePage->title(); // the "$page->title()" via the snippet variable "thePageTitle" assigned
  $thePageTitle = str_replace('</<wbr>', '</', str_replace('/', '/<wbr>', html($thePageTitle))); // add '<wbr>' after each '/' in the visible text of the title
  // $thePageTitleAddon // the "Addon text" after the page title via the snippet variable "thePageTitleAddon" assigned
  // $thePageLink // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link
?>
        <<?= $theTag; ?><?php if (isset($theTagAddon)) echo ' ' .$theTagAddon; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; ?><?= $thePageTitle; ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if (isset($thePageTitleAddon)) echo $thePageTitleAddon; ?><?php if($user = kirby()->user() and $user->role()->permissions()->for('access', 'panel') and $thePage->permissions()->can('read')): // user is logged in and has panel access and can read the page in the panel ?><a href="<?= $thePage->panelUrl(); ?>" target="<?= option('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?></<?= $theTag; ?>>

```

Good luck!

_[last edited: 2019-08-10 21:15 / German time]_

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 10, 2019, 7:16am UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/11 "2019-08-10T07:16:48Z")

</div>

You can find an alternative less verbose solution here (can be adapted for Kirby 2 if needed):

> [@Link to panel page from front end](https://forum.getkirby.com/t/link-to-panel-page-from-front-end/15188/15):
>
> You can outsource the link code into a field method. Useful if you need such a link in multiple locations: Create a field method in a plugin: \<?php Kirby::plugin('my/methods', ['fieldMethods' =\> ['editLink' =\> function($field) { $page = $field-\>parent(); $title = $page-\>title(); if (kirby()-\>user()) { $title .= ' ' . Html::a($page-\>panelUrl(), 'Edit page', ['class' =\> 'editlink']); } return $title; } ] ]); T…

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:22pm UTC](https://forum.getkirby.com/t/howto-working-with-contextual-links-to-the-panel/1566/12 "2025-02-06T17:22:43Z")

</div>

Archived on February 6, 2025, 5:22pm UTC